値の継承
アセンブラの魔女 ⧫ CSS ⧫ 値 ⧫ 値の継承

　いくつかの値は、ドキュメントツリー内の子孫の要素に継承されます。値が継承されるかどうかは、個々の属性の定義によって決まります。

　たとえば、次の例では、─

<H1 style="color:green;">継承のサンプル<EM>ここに親要素の色が継承される</EM></H1>

em要素に色が割り当てられていないため、em要素には親要素の色（green）が継承されます。

　継承が発生する場合、要素は計算値を継承します。親要素から継承された計算値は、その要素の指定値と、その要素の子要素に継承される計算値になります。

　次のスタイルシートを、

body { font-size: 10pt }
h1 { font-size: 130% }

次のHTMLに使った場合について考えてみます。

<BODY>
  <H1>A <EM>large</EM> heading</H1>
</BODY>

　この例では、h1要素の 'font-size'属性は計算値 '13pt'（親要素bodyのfont-size 10ptの130%=13pt）になります。'font-size'の計算値が継承されるため、EM要素の計算値は '13pt'になります。

　この例で、ユーザー・エージェントが13ptのフォントを使えない場合、この例のh1要素やem要素の 'font-size'の「実際の値」は、その環境で利用可能な'12pt'などの値に変更されます。

　匿名ブロックボックス（anonymous block boxes）では、継承は行われません。

　それぞれの属性は、'inherit'キーワードを使って、borderなどの通常は継承できない値を明示的、または強制的に継承することもできます。

　'inherit'値がルート要素に用いられた場合、その属性値は初期値として扱われます。

　以下の例では、body要素で 'color'属性と 'background'属性が設定されています。 他のすべての要素では、color属性値は継承され、background属性は透明設定されます。このスタイルシートにより、ドキュメント全体は、白い背景と黒いテキストで描画されます。

body {
  color: black !important; 
  background: white !important;
}

* { 
  color: inherit !important; 
  background: transparent !important;
}
▼ Property