Column10. 「スタイルの継承」

div { color: #ff0; } という設定をしておくと、<div>〜</div>内に含まれる<p>に対して文字色を指定しなくても、全ての段落が divで指定された色で表示されます。このように親要素で設定された内容が、子要素にも反映することを「スタイルの継承」といいます。継承されるかされないかはプロパティによって決まっていますが、文字色やフォントなどの他は、大体のプロパティが継承されません。継承されるプロパティでも、子要素に改めて指定が書き込まれてあれば、そちらが優先されます。

継承は、文字色やフォントなどのようにページ内であまり頻繁に変わらないような部分に対して、実際に設定する時の便宜上の理由で定義されているものと思われますが、継承されないプロパティでも、値に「inherit」を指定することで、親要素のスタイルを継承させることができます。

継承されるプロパティで主なものは以下の通りです。

border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells,

font, font-family, font-size, font-style, font-variant, font-weight,

letter-spacing, line-height,

list-style, list-style-image, list-style-position, list-style-type