継承について

ここでは、継承についてまとめています。ご参考になれば幸いです。

スタイルの継承とは

ソース

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
h4 {color:blue;
     text-align:center;} /*第４見出しは青い色で中央揃えです。*/
-->
</style>
</head>
<body>

<h4>第４見出し（<em>青い色</em>で中央揃えです。）</h4>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

第４見出し（青い色で中央揃えです。）

上記の例でbody部に注目してみると、bodyエレメント内にはh4エレメントが有り、また、h4エレメント内にはemエレメントが有ります。この場合、bodyエレメントをh4エレメントの親エレメントと言い、h4エレメントを子エレメントと言います。同じように、emエレメントはh4エレメントの子エレメントとなります。

スタイルの継承とは、親エレメントで設定されているスタイルを、その子エレメントも受け継ぐということです。
上記の例だと、h4エレメントにcolor:blue;で青い文字の設定がされています。color属性は継承する属性なので、親エレメントの青い文字の設定を受け継いで、子エレメントのemエレメントも青い文字となります。

W3Cの仕様書（CSS Level1及びCSS Level2）には、属性によって継承する/しないが明示されていますが、現実にはブラウザによって解釈の違いがあり、必ずしもW3Cの仕様書どおりには継承されません。CSS Level2では、意図的に継承をさせるためにinheritキーワードが用意されてますが、対応ブラウザはまだ有りません。したがって、リファレンスの属性の値も省略しています。