スタイルの継承
CSSの場合、プロパティに設定された値は親要素から子要素へ、そして子要素から孫要素へと順に継承されていきます。
HTML
<body>
<div>
<p>
本の<em>カテゴリ</em>
</p>
<ul>
<li>SF</li>
<li>時代小説</li>
</ul>
</div>
</body>
CSS
body {
color: #ff0000;
}
結果
本のカテゴリ
- SF
- 時代小説
colorプロパティは値の継承が行われるプロパティの為、body要素の子要素であるdiv要素にも継承され、さらにp要素やその子要素のem要素、そしてul要素やその子要素のli要素にも継承されます。結果的にbody要素の子要素や孫要素の文字の色は全て赤となります。
HTML
<body>
<div>
<p>
本の<em>カテゴリ</em>
</p>
<ul>
<li>SF</li>
<li>時代小説</li>
</ul>
</div>
</body>
CSS
body {
color: #ff0000;
}
ul,
em {
color: #000000;
}
結果
本のカテゴリ
- SF
- 時代小説
ul要素及びem要素の文字の色を黒に設定しました。ul要素に設定したcolorプロパティは継承されますので、子要素のli要素にも継承されることになります。
HTML
<body>
<div>
<p>
本の<em>カテゴリ</em>
</p>
<ul>
<li>SF</li>
<li>時代小説</li>
</ul>
</div>
</body>
CSS
body {
border: 1px dotted #ffa500;
}
結果
本のカテゴリ
- SF
- 時代小説
borderプロパティは値の継承が行われませんので、子要素や孫要素に枠線は引かれません。