スタイルの継承


CSSにおける継承

 CSSでは、親要素から子要素に継承される場合とされない場合があります。継承される属性は色やスタイルなど大きさや位置に関係しないものです。逆に大きさや位置に関係するものは継承されません。境界線なども継承されません。

 下の例は文字色や背景色が引き継がれる例です。

<div style="color: blue; background-color: yellow;">
親の属性は文字色が青、背景色が黄色<br />
 <div>
  子には親の属性はそのまま引き継がれる。
 </div>
</div>
親の属性は文字色が青、背景色が黄色
  子には親の属性がそのまま引き継がれる。

 下の例は大きさや位置、境界が引き継がれない例です。

<div style="border: solid medium blue; background-color: yellow;">
親の属性は境界線が青の実線、、背景色が黄色<br />
 <div>
  子には親の属性が背景色は引き継がれるが、境界線は引き継がれない。
 </div>
</div>
親の属性は境界線が青の実線、、背景色が黄色
  子には親の属性が背景色は引き継がれるが、境界線は引き継がれない。

inherit

 親の属性を強制的に引き継がせたい場合、inheritを使用します。

<div style="border: solid medium blue; background-color: yellow;">
親の属性は境界線が青の実線、、背景色が黄色<br />
 <div style="border: inherit">
  inheritを使うと、子供にも境界線のスタイルが引き継がれる。
 </div>
</div>
親の属性は境界線が青の実線、、背景色が黄色
  inheritを使うと、子供にも境界線のスタイルが引き継がれる。

 スタイルシートで継承を使うには、

Inherited blockquote

 

このページの先頭へ戻る