CSS積層性、継承性及び優先度

は、CSSの積層性と継承性(1)の積層性を理解する.積層性とは、複数種類のCSS様式の重畳を意味する.たとえば、インラインCSSスタイルシートを使用して

タグ番号サイズを12ピクセル、チェーン定義

タグ色を赤と定義すると、段落テキストは12ピクセルの赤で表示されます.つまり、この2つのスタイルが重なって表示されます.(2)継承性継承性とは、CSSスタイルシートを書くときに、サブタグが親タグのいくつかのスタイル(テキストの色や番号など)を継承することを意味します.たとえば、ボディ要素bodyを定義するテキストの色が黒の場合、ページ内のすべてのテキストが黒に表示されます.これは、他のタグがタグにネストされ、タグのサブタグであるためです.すべてのCSS属性を継承できるわけではありません.たとえば、次の属性は継承できません.枠線属性の外側距離属性の内側の余白属性の背景属性の位置付け属性レイアウト属性要素の幅が広い属性

です.

CSSの優先度定義CSSスタイルを把握すると、同じ要素に2つ以上のルールが適用されることが多く、優先度の問題が発生します.CSS優先度を体験するために、まず具体的な例を見てみましょう.そのCSSスタイルコードは以下の通りです.

p{
     color:red;}          /*    */
.blue{
     color:green;}    /*class  */
#header{
     color:blue;}   /*id  */

対応するHTML構造は次のとおりです.

"header" class="blue">
	   ，         ？

タグセレクタは重み1を有する、クラスセレクタは重み10を有し、idセレクタは重み100を有する.したがって、テキストは青で表示されます.
重みを考慮するとき、初心者は以下のような特殊な状況に注意する必要があります:(1)スタイルの重みを0に継承します.つまり、ネストされた構造では、親要素スタイルの重みにかかわらず、布団要素が継承されると、その重みは0になります.例:

strong{
     color:red;}
#header{
     color:green;}

対応するHTML構造は次のとおりです.

"header" class="blue">
	          

#headerは重み100を持っていますが、strongによって継承されると重みは0になります.strongセレクタの重みは1ですが、継承スタイルの重みよりも大きいので、ページのテキストは赤に表示されます.(2)行内スタイル優先.styleプロパティを適用する要素は、行内スタイルの重みが非常に高く、100よりはるかに大きいと理解できます.要するに、前述したセレクタよりも大きな優先度を有する.重みが同じで、CSSは近接の原則に従います.つまり、要素に近いスタイルが最大の優先度を持つか、最後のスタイルが最大の優先度を持つということです.CSSは1つ定義しました!importantコマンドで、同じ場合に優先度を大きくします.