『HTML+CSS基礎課程』学習ノート6

コースアドレス:『HTML+CSS基礎コース』
本文は慕課ネット課程《HTML+CSS基礎課程》の学習ノートである.

1.継承

CSSのいくつかのスタイルは継承性があります.継承は、スタイルを特定のhtmlラベル要素だけでなく、子孫にも適用できるルールです.たとえば、ある色がpタグに適用される場合、この色設定はpタグだけでなく、spanタグであるpタグ内のすべてのサブエレメントテキストにも適用されます.

                p{color:red;}
                <p>    ，     <span>    </span>    。</p>

結果ウィンドウのpのテキストもspanのテキストも赤に設定されます.しかし、いくつかのcssスタイルは継承性がないことに注意してください.例えばborder:1px solid red;

2.特殊性

同じ要素に異なるCSSスタイルコードを設定する場合がありますが、要素はどのCSSスタイルを有効にしますか?次のコードのようにします.

           p{color:red;}
           .first{color:green;}

<p class="first"> 3年生の時、私はまだ<span>の臆病なネズミのような</span>の女の子でした.</p> p和.firstはpというラベルにマッチしていますが、どの色が表示されますか?グリーンが正しい色なのは、ブラウザが重み値に基づいてどのcssスタイルを使用するか、重み値が高いものはどのcssスタイルを使用するかを判断するからです.
次に、重み値のルールを示します.
ラベルの重み値は1、クラス選択子の重み値は10、ID選択子の重み値は最大100です.たとえば、次のコードがあります.

  p{color:red;} /*   1*/
  p span{color:green;} /*   1+1=2*/
  .warning{color:white;} /*   10*/
  p span.warning{color:purple;} /*   1+1+10=12*/
  #footer .note p{color:yellow;} /*   100+10+1=111*/

注意:もう1つの重み値が特殊です.継承にも重み値がありますが、低い文献もあります.0.1しかないと提案されている文献もあるので、継承の重み値が最も低いと理解できます.

3.積層

積層とはhtmlファイルに同じ要素に対して複数のcssスタイルが存在し、同じ重みのあるスタイルが存在する場合、これらのcssスタイルの前後順によって決定され、一番後ろにあるcssスタイルが適用されます.次のコードに従います.

   p{color:red;}
   p{color:green;}

<p class="first"> 3年生の時、私はまだ<span>の臆病なネズミのような</span>の女の子でした.</p>最後のpのテキストはgreenに設定され、この積層はよく理解され、後ろのスタイルが前のスタイルを覆うと理解されています.
したがって、前のcssスタイルの優先度は理解に難くありません.
インラインスタイルシート(ラベルの内側)>スタイルシートの埋め込み(現在のファイル)>外部スタイルシート(外部ファイル)

4.重要性

Webコードを作成するときに、いくつかのスタイルに最高の重み値を設定する必要がある場合があります.この場合、使用できます.importantで解決します.次のコードがあります.

  p{color:red!important;}
  p{color:green;}

<p class="first"> 3年生の時、私はまだ<span>の臆病なネズミのような</span>の女の子でした.</p>このときp段落のテキストにはred赤色が表示されます.
注意:!importantはセミコロンの前に書く
ここで、Web制作者がcssスタイルを設定しない場合、ブラウザは独自のスタイルでWebページを表示することに注意してください.また、ユーザーはブラウザで自分の習慣のスタイルを設定することもできます.例えば、文字を大きく設定して、Webページのテキストをより明確に表示する習慣があるユーザーもいます.この場合、スタイルの優先順位は、ブラウザのデフォルトのスタイル