タグ

selectorに関するsh19eのブックマーク (3)

  • CSS Diner

    No worries, you've got this! You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to. Exhibit 1 - A CSS Rule p { margin-bottom: 12px; } Here, the "p" is the selector (selects all <p> elements) and applies the margin-bottom style. To play, type in a CSS selector in the editor below to select the correct items on the table.If you get it right, you'll advance

    CSS Diner
  • CSSセレクターマッチングのコスト - Unreviewed

    ブラウザエンジン先端観測会での、Constellationさんの話を聴いて、CSSセレクターマッチングのコストには複数のレベルがあることを強く意識するようになりました。セレクターマッチングにかかるコストを下げたい、という場合には、どのレベルで何を高速化しようとしているのかを意識しないと話がかみあいません。Constellationさんの話を私なりに整理して考えた、セレクターマッチングのコストを下げるアプローチは次の3つです。 ①セレクターを減らす ②マッチするかどうかの判定回数を減らす ③1回1回の判定処理を速くする これは、ブラウザーのセレクターマッチングの処理の各部分に対応しています。 CSSの各セレクターについて(①)、 対象となるDOM要素すべてに対して、 セレクターがマッチするかしないか決まるまで、親要素・兄要素を辿りながら(②)、 要素がセレクターにマッチする・しないの判定(③

    CSSセレクターマッチングのコスト - Unreviewed
  • 属性セレクター - CSS: カスケーディングスタイルシート | MDN

    CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメ

    属性セレクター - CSS: カスケーディングスタイルシート | MDN
  • 1