特定の要素にスタイルを設定する
指定した要素に対してスタイルを適用させたい場合の記述方法です。
と、上記のように記述することで、HTMLファイルの中のすべてのh1要素、p要素等指定した要素すべてにスタイルが適用されます。
h1 {color:black ; font-size:12pt ; }
p {color:red ; font-size:10pt ; background-color:gray ; }
複数の要素にスタイルを設定する
指定した複数の要素に対して同じスタイルを適用させたい場合の記述方法です。
上記のように、要素名をカンマ記号「 , 」で区切って複数の要素名を記述し、スタイルを指定します。HTMLファイル内の指定された要素に、同じスタイルが適用されます。
h1,h2,h3 {color:black ; font-size:12pt ; }
すべての要素にスタイルを設定する
すべてのHTMLファイル内の要素に対して、スタイルを適用させたい場合の記述方法です。
上記のように、「 * 」記号の後にスタイルを指定することで、すべての要素に同じスタイルが適用されます。
* {font-size: 12pt ; color: black ; }
特定の要素(親要素)の下位にある要素(子要素)に対してだけスタイルを設定する
親要素と子要素を半角スペースで区切って指定します。
と、上記のように記述することで親要素の中にある子要素に対してだけ、スタイルが適用されます。
上記の例の場合、div要素の中にあるp要素にのみスタイルが適用されます。たとえば、p要素の中にdiv要素があっても、スタイルは適用されません。
div p {font-size: 12pt ; color:blue ; }
上記の例の場合、div要素の中にあるp要素にのみスタイルが適用されます。たとえば、p要素の中にdiv要素があっても、スタイルは適用されません。
特定の要素でだけIDやクラスを有効にする
「要素名#ID名」や「要素名 . クラス名」の用に指定すると、そのID名またはクラス名が指定されている「要素名」の要素だけが対象となります。
と、上記のようにスタイルを設定しHTMLファイルを記述すると、上記の例では、HTMLファイルの中のdiv要素だけに「ID名(#mozi)」で設定したスタイルが適用されます。又は、p要素だけに「クラス名(haikei)」で設定したスタイルが適用されます。
他の要素たとえば
と、上記のようにp要素にID名(#mozi)」を、または、div要素に「クラス名(haikei)」を指定しても、スタイルは適用されません。
[ スタイル設定部分 ]
div#mozi {font-size: 12pt ; color:blue ; }
p.haikei {background: red ; }
[ HTMLファイル部分 ]
<div ID="mozi">ID名(#mozi)で指定したスタイルが、div要素
だけに適用されます</div>
<p class="haikei>クラス名(haikei)で指定したスタイルが、
p要素だけに適用されます
他の要素たとえば
<p ID="mozi">ID名(#mozi)で指定したスタイルは、
適用されません</p>
<div class="haikei">クラス名(haikei)で指定したスタイルは、
適用されません</div>