継承（Inheritance）
Updated / Published
Cascading Style Sheets（カスケーディングスタイルシート）の Cascade（カスケード）とは順序立てられたリストのスタイルシートという意味から名付けられたもので、スタイルシートが段階的に継承していく働きを表しています。この継承（Inheritance）とは、(X)HTML文書はすべて樹形図のような構造（木構造）になっていることから、記述するスタイル情報を軽量化し、合理化を図るためにプロパティの値が親要素から子要素へ、子要素から孫要素へと引き継がれていく仕組みのことを言います。
ただし、プロパティのもつスタイル効果によっては継承性がない方が好ましい場合もあるということで、一部のプロパティは継承性を持たないように設計されており、背景やボックスなどに関するプロパティには継承性がありません。
文書のデフォルトとなるスタイルを設定するには html要素、または body要素といった木構造のルート部にプロパティを指定します。なお、HTML4 の規格では body要素の開始タグと終了タグともに省略可能ですが、例え文書から bodyタグの記述が省かれていても、文書を解析する UA は bodyタグの存在を推測することで、文書のデフォルトとなるスタイルの効果は通常通り反映されることに注意してください。
継承サンプル
継承される値が絶対値の例
body { color : gray ; }
......
<body>
<h1>The headline is <em>important</em></h1>
</body>この例では、body要素に colorプロパティで gray の前景色が指定されています。しかし、子要素の h1要素、その孫要素の em要素には個別に colorプロパティの指定がないので、body要素から h1要素へ、そして h1要素から em要素へと、両要素には前景色 gray の指定が継承されます。
継承される値が相対値の例
body { font-size : 10pt ; }
h1 { font-size : 120% ; }
......
<body>
<h1>A <em>large</em> heading</h1>
</body>継承される値がパーセント値などの相対値の場合、指定値ではなく算出値が継承されます。つまり、この例では h1要素のフォントサイズは12pt（親要素の値10pt の120%分）という算出値になり、font-sizeプロパティは算出値を継承するので、em要素も h1要素と同樣に12pt という算出値になります。
たとえば、もし継承されるのが算出値ではなく指定値であると、親要素から子孫要素へと継承されるほどフォントサイズが大きくなってしまいます。つまり、em要素が指定値を継承すると、その親要素である h1要素の 12pt の120%分の大きさとなり、その算出値は 14.4pt となってしまいます。
繰り返しますが、継承される値がパーセント値などの相対値の場合は、指定値ではなく算出値が継承されます。
強制的に継承させる「inherit」
継承性をもたないプロパティであっても、明示的に "inherit" を指定することで、そのプロパティの値を強制的に継承させられます。CSS2 ではすべてのプロパティに inherit の値を指定することができ、そのプロパティが、親要素と同じ算出値をとることを意味します。
body {
color : black !important;
background : white !important;
}
* {
color : inherit !important;
background : transparent;
}この例では body要素に colorプロパティと backgroundプロパティが設定されています。そして、全称セレクタにより他のすべての要素に対して colorプロパティの値が継承され、背景が透過することになります。もしこのルールセットをユーザスタイルシートに用いれば、制作スタイルシートによる前景色と背景の指定を無効化して、文書全体を通じて背景色は白に、前景色は黒になるでしょう。