このサイトついて
SPONSORED LINK
継承について
CSSの最大の特徴の１つでもある「継承」は、理解すれば非常に役立つものです。
理解しなくても無意識の内に使ってしまっているものでもあるほど、難しくもなく、
そして便利なものです。
h1 { color : red ;
font-size : 16pt ;
font-weight : bold }
em { color : blue }
上のサンプルのようにh1要素内にem要素が存在し、そのそれぞれにCSSを
指定しているとします。em要素にはフォントカラーが青であるとしか指定していませんが、
その前の要素H1の影響を受けます。
h1要素にはフォントカラーが赤でサイズが16pt、太字に定義しており、
その全てをem要素にも指定してしまいます。
ただし、em要素でフォントカラーが青と設定しているので、em要素にはフォントカラーが青、
サイズが16ptで太字が当てはまります。
このように、親要素の指定をそのまま子要素が引き継いでしまう性質が「継承」です。
下のサンプルが、継承の典型的な例です。
文書全体をフォントカラー赤、サイズ12ptと指定、h1要素にフォントカラー青のみの指定を
した場合、h1要素の親要素body要素の継承を受け、最終的にフォントカラー青、
サイズ12ptを指定したのと等価になります。
body { color : red ;
font-size : 12pt ;
font-weight : normal }
h1 { color : blue }
複数のCSSファイルを読み込み、同一のセレクタに対して異なる宣言をした場合は、全て最後の指定が有効となります。
また、ある要素内の色は青だけど、この要素内にあるある要素の色はこうしたい、等の組合せ的な場合にも有効になることがあります。
例外的に継承しないプロパティも存在します。この場合は非常にわかりやすい場合が多く、継承し得ないプロパティばかりが該当します。