ホームページ > 記事 > ウェブフロントエンド > CSSのカスケード・継承・具体例を詳しく解説

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

零下一度オリジナル: 2017-06-24 13:40:263700ブラウズ

カスケード

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

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

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

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 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 </head>19 <body>20     <div class="box wrap">21         22     </div>23 </body>24 </html>

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

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

継承

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

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

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>CSS继承性</title> 6  7     <style type="text/css"> 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 </head>23 <body>24     <div class="parent">25         我是父div26         <p>27             我是段落28         </p>29 30         <div class="child">我是子div</div>31     </div>32 </body>33 </html>

効果は次のとおりです:

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

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

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

特殊性 (優先順位)

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

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

インラインスタイル>外部参照スタイル>ブラウザのデフォルトスタイル
ID>疑似クラス | クラス | 属性の選択 > 疑似オブジェクト > 継承
デフォルトでは、フォントの色が決まります。本文にスタイルを追加すると、フォントの色が赤に変わり、継承されたスタイル > ブラウザのデフォルトのスタイルであることを示します

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