この記事では、カスケードされたときにスタイルシートがどのように影響しあうかと、エレメントに親のスタイルがどのように継承されるかについて説明します。
あなたのサンプルスタイルシートに、文書のさまざまな部分のスタイルをいちどに変更するような継承を利用した変更を加えます。
解説 : 接続と継承
エレメントの最終的なスタイルは、さまざまな部分で定義されたものが複雑に影響しあって定義される可能性があります。 この複雑な影響が CSS を強力なものにしていますが、混乱やデバッグを困難にする元にもなります。
継承により、スタイル情報には 3 つの大きなソースが存在することになります。
- ブラウザのマークアップ言語向けの既定のスタイル
- 文書を読む人が定義しているスタイル
- 文書の製作者がリンクさせたスタイル
ユーザが定義したスタイルは、ブラウザの既定のスタイルを変更します。 そしてその上で、文書製作者のスタイルがそれを変更します。 このチュートリアルでは、あなたのサンプル文書の製作者はあなた自身で、あなた自身のみがそのスタイルを編集しています。
| この文書を Mozilla ブラウザで見ているならば、見ているスタイルのうちのいくつかは、ブラウザの HTML に対する既定のスタイルから継承されています。
それらのいくつかは、あなたのブラウザのオプション設定もしくは、プロファイルにある wiki サーバが文書にリンクしているスタイルシートからも、スタイルの一部は定義されています。 |
ブラウザであなたのサンプル文書を開いたとき、STRONG エレメントはそのほかの文字に比べて太字で表示されていると思います。これは、ブラウザの既定のスタイルによるものです。
STRONG エレメントが赤く表示されているのは、あなた自身のサンプルスタイルシートによるものです。
STRONG エレメントは、P エレメントのスタイルにも影響を受けています。これは、子となっていることによります。同様に、P エレメントも BODY エレメントのスタイルの影響を受けています。
接続 (cascade) されているスタイルでは、製作者のスタイルシート、ユーザのスタイルシート、ブラウザの既定のスタイルシート、の順に優先されます。
継承 (inherit) されているスタイルでは、子ノードのスタイルが、親から継承したものより優先されます。
これらは、適用の優先順位にとどまりません。このチュートリアルの後のページでより詳細について説明します。
CSS では、!important キーワードにより、文書製作者のスタイルを文書の読み手が上書きすることができます。
これは、文書製作者として、読者が実際にどのようなものを見るかというのを完全に設定できるわけではないことを意味します。 もしこれらの詳細について知りたいならば、CSS 規格の プロパティー値の指定、接続、継承 を参照してください。 |
実例 : 継承を使ってみる
あなたのサンプル CSS ファイルを編集します。
次の行をコピー・ペーストしてください。 上下にどのような行があったとしても影響することはありません。 ただし、あなたの文書では P エレメントが STRONG エレメントの親であることから、先頭に付け加えるのが一番理にかなっているでしょう。
p {color: blue; text-decoration: underline;}
あなたのサンプル文書にどのような影響を与えるかを見るために、ブラウザでリロードしてください。 パラグラフのすべてのテキスト、先頭の大文字も含めてに、下線が引かれています。 STRONG エレメントも親である P エレメントの下線スタイルを継承しています。
しかし、STRONG エレメントは赤色表示のままです。この赤色は、それ自身のスタイルであり、親である P エレメントの青色指定より優先されています。
|
|
あなたのスタイルシートで、赤色表示の文字のみに下線を付けてみましょう:
|
次は ?
このページを理解するのが難しかったり、コメントがあれば、この記事の 議論 ページで述べてください。
あなたのサンプルスタイルシートは、P と STRONG タグに対するスタイルを定義し、あなたの文書にある対応するエレメントのスタイルを変更したことになります。 次のページでは、より狭い範囲にスタイルを定義する方法について解説します。 セレクター