CSSカスケード機構の詳しい説明

CSS (カスケード スタイル シート)

カスケード スタイル シートのカスケードとは、スタイルがドキュメント構造内のあるレベルから別のレベルに渡されることを意味し、その機能は、多くのソースでどのタグを適用するかをブラウザーに決定させることです。どの情報源から。

レイヤリングは強力なメカニズムです。カスケードを理解すると、最も経済的で保守しやすい方法で CSS を作成し、希望する理想的なドキュメントの外観を作成するのに役立ちます。

スタイルのソース

まず、何も書かなくてもすべてのタグにスタイルが含まれるため、ブラウザにはブラウザスタイルシート（デフォルトスタイルシート）が隠されているはずです。たとえば、h1 タグ内のテキストはより大きな太字で表示され、em タグ内のテキストは斜体で表示され、すべてが自動的に追加されます。

2 番目に、ユーザー スタイル シートがあります。非常にまれですが、非常に便利になります。たとえば、視覚障害のあるユーザーは、テキストの基本サイズを自分で大きくしたり (例: body { font-size:200%})、テキストを相互に読みやすい色で表示するように強制したりできます。 Windows のアクセシビリティ機能では、スタイル シートを追加できます。

最後に、デザイナーのスタイルシートがあります。 Web 開発者によって書かれています。

ブラウザがスタイル ソースを扱う順序:

デフォルトのブラウザ スタイルシート

ユーザー スタイルシート

デザイナー スタイルシート

デザイナー埋め込みスタイル

デザイナー インライン スタイル

ブラウザが従うとき 上記の対応する位置でスタイルを検索するときシーケンス内で、特定のタグに定義された属性値が見つかった場合、対応するタグの設定が更新されます。ブラウザはデフォルトのスタイルシートでラベルのスタイルを定義します。そのスタイルが他の場所でもラベルに定義されている場合、ブラウザは設定をドキュメントで定義された値に更新します。

これらはレイヤリングの基本的な動作原理です。

カスケード ルール

ルール 1: 各要素に適用される適切な属性の宣言をすべて検索します。

ルール 2: 順序と重要度で並べ替えます。ブラウザは 5 つのスタイル ソースを順番にチェックし、一致する属性を設定します。後のオリジンが一致する属性を再度設定すると、ブラウザは必要に応じて属性の値を更新し、プロセスを繰り返します。

ルール 3: 関連性によって並べ替えます。判断が難しい状況 (たとえば、2 つのルールが同じタグに一致し、同じスタイル ソースからのものである場合) では、適切性によってルールの勝者が決定されることがあります。

例 1: スタイル シートには次の 2 つのルールが含まれています。

P {font-size:12px;}

p.largetext { font-size:16px; }

次に、

少しのテキスト

が 16 ピクセルの高さで表示されます。後者の方がターゲットが絞られているからです。

P {font-size:12px;}

.largetext { font-size:16px; }

両方のルールは同じタグに一致しますが、クラス セレクターが優先されるため、テキストは 16 ピクセルで表示されます。具体的な理由は、ラベル セレクターの数値ターゲティングが 1 であるのに対し、クラス セレクターのターゲティングは 1-0 であるためです。セレクターのターゲティングをどのように計算するかという問題があります。各スタイルにシンプルなスコアリングシステムがあり、スコアは次の3つの値で表されます。スコアリング方法は次のとおりです:

1. セレクターに ID がある場合は、A に 1 を加算する必要があります。

2. セレクターにクラスがある場合は、B に 1 を追加する必要があります。

3. セレクターに要素名(タグ名)がある場合は、Cに1を加算する必要があります。

4. 最終的な結果は、3桁の証明書に基づいて計算されます。 (結果は実際の 3 桁の数字ではありませんが、ほとんどの場合、3 桁の数字として解釈する方が簡単です。たとえば、0-1-12 と 0-2-1 を比較すると、後者は次のようになります。より具体的な

次の一連の例を見てください:

P 0 – 0 – 1 Targeted=1

p.largetext 0 – 1 – 1 Targeted=11

p#largetext 1 – 0 – 1 Targeted=101

body p#largetext 1 – 0 – 2 ターゲット=102

body p#largetext ul.mylist 1 – 1 – 3 ターゲット=113

body p#largetext ul.mylist li 1 – 1 – 4 ターゲット= 114

ルール 4: 順番に並べ替えます。 2 つのルールの重みがまったく同じである場合、積み重ね順序で最も低いルールが優先されます。

順序よりも適切性の方が重要であるため、より具体性の高いルールが、カスケードの最後に近い具体性の低いルールよりも優先されます。

以上がCSSカスケード機構の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。