CSSのカスケード・継承・具体例を詳しく解説

カスケード

いわゆるカスケードとは、複数の CSS スタイルの重ね合わせを指します。これは、後で設定されたスタイルが前のスタイルをカスケード (カバー) することを意味します カスケードの前提は、CSS セレクターの優先順位が同じであることです。 たとえば、インライン CSS スタイル シートを使用して

マークのフォント サイズを 12 ピクセルとして定義し、リンクされた

マークの色が赤の場合、段落テキストは 12 ピクセルで表示されます。赤、つまり 2 つのスタイルが重ね合わされて生成されます。

 1 nbsp;html> 2  3  4     <meta> 5  6     <title>CSS层叠性</title> 7     <style> 8         .box { 9             background-color: red;10             height: 200px;11             width: 200px;12         }13 14         .wrap {15             background-color: green;16         }17     </style>18 19 20     <div>21         22     </div>23 24 

ブラウザで表示される結果は、長さと幅が 200 ピクセル、背景色が緑色の div です。これは、ボックスで定義された背景色が、wrap で定義された背景色で覆われているためです。

ブラウザの F12 検査要素を通じて、

継承

CSS 継承は、子コンテナのスタイルが親コンテナのスタイルを継承することを意味します。ただし、すべてのスタイルを継承できるわけではありません。テキスト関連のフォント サイズ、色、フォント スタイル、行の高さ、マウス スタイルなど、一部のスタイルのみを継承できます。

幅と高さ、背景色、余白、フローティング、絶対配置などのボックス関連のスタイルは継承できません。

 1 nbsp;html> 2  3  4     <meta> 5     <title>CSS继承性</title> 6  7     <style> 8         .parent { 9             color: red;10             font-size: 20px;11             height: 300px;12             width: 300px;13             background-color: green;14         }15 16         .child {17             height: 100px;18             width: 100px;19         }20     </style>21 22 23 24     <div>25         我是父div26         <p>27             我是段落28         </p>29 30         <div>我是子div</div>31     </div>32 33 

効果は次のとおりです:

p タグと子 div の両方が親 div のフォントの色とサイズを継承しますが、子 div は幅を継承しないことがわかります。親 div の高さと背景色、

継承されたスタイルは実線で表示され、他のスタイルはぼやけて表示されます。

注: 継承を適切に使用すると、コードが簡素化され、CSS スタイルの複雑さが軽減されます。ただし、Web ページ内のすべての要素が多数のスタイルを継承すると、スタイルのソースを特定することが困難になるため、フォントやテキスト属性などの Web ページ内の一般的なスタイルに継承を使用できます。たとえば、フォント、フォント サイズ、色、行間隔などを body 要素で均一に設定し、継承を通じてドキュメント内のすべてのテキストに影響を与えることができます。

特殊性 (優先順位)

CSS スタイルを定義する場合、同じ要素に 2 つ以上のルールが適用されることが多く、優先順位の問題が発生します。この時点で要素はどのようなスタイルで表示されますか?

まず最初に結論を言います:

• インラインスタイル>外部参照スタイル>ブラウザのデフォルトスタイル
  ID>疑似クラス | クラス | 属性の選択 > 疑似オブジェクト > 継承

• デフォルトでは、フォントの色が決まります。 本文にスタイルを追加すると、フォントの色が赤に変わり、継承されたスタイル > ブラウザのデフォルトのスタイルであることを示します

ワイルドカードスタイルを追加すると、フォントの色が灰色に変わります

ワイルドカード スタイルが継承されたスタイルよりも優れていることを示しています。タグ セレクターのスタイルの優先順位をもう一度試してください

他の種類のスタイルよりもタグ セレクターの優先順位が優れていることがわかります。自分でテストしましたが、その中には ! important スタイルの重みを変更することができます

ここで、 ! important 属性によってスタイルの重みを増やすことができるため、h1 タイトルに表示されるフォントの色が青になっていることがわかります。 CSS のウェイトと CSS の各スタイル タイプについて簡単に説明します。それぞれに独自のウェイトがあります

1。インライン スタイル シートのウェイトは最大 1000 です。

2 ID セレクターのウェイトは 100 です。

3. クラス セレクターの重みは 10 です4. HTML タグ セレクターの重みは 1 です

など、同じ要素に異なるスタイル ルールを適用する場合があります。

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