カスケーディングスタイルシートまたはCSSは、すべて同じ要素に影響を与える多くのプロパティを持つことができるように設定されています。 これらのプロパティの中には、互いに競合するものがあります。 たとえば、段落タグに赤のフォント色を設定し、後で青のフォント色を設定することができます。 段落を作るためにブラウザはどのような色を知っていますか？ これはカスケードによって決定されます。
スタイルシートの種類
スタイルシートには3つの異なるタイプがあります。
- 作成者スタイルシート
- これらは、Webページの作成者が作成したスタイルシートです。 ほとんどの人がCSSスタイルシートを考えていると思います。
- ユーザースタイルシート
- ユーザースタイルシートは、Webページのユーザーによって設定されます。 これにより、ユーザーはページの表示方法をより詳細に制御できます。
- ユーザーエージェントスタイルシート
- これらは、Webブラウザがそのページを表示するためにページに適用するスタイルです。 例えば、XHTMLでは、大部分のビジュアルユーザエージェントは、タグをイタリック体のテキストとして表示します。 これはユーザエージェントスタイルシートで定義されています。
上記の各スタイルシートで定義されているプロパティには重みが与えられます。 デフォルトでは、著者スタイルシートは最も重みが大きく、ユーザスタイルシートが続き、最後にユーザエージェントスタイルシートが続きます。 唯一の例外は、ユーザースタイルシートの！importantルールです。 これは作者のスタイルシートよりも重要です。
カスケーディングオーダー
競合を解決するために、Webブラウザは次の並べ替え順序を使用して、どのスタイルが優先され使用されるかを判断します。
- まず、問題の要素と割り当てられたメディアタイプに適用されるすべての宣言を探します。
- 次に、それがどのスタイルシートから来ているのか見てみましょう。 上記のように、作者のスタイルシートが最初に来てからuser、そしてuser agentが来ます。 重要なユーザースタイルは、重要なスタイルよりも優先順位が高くなります。
- セレクタが具体的であればあるほど優先順位が高くなります。 たとえば、「div.co p」のスタイルは、「p」タグのスタイルよりも優先度が高くなります。
- 最後に、定義された順序でルールをソートします。 ドキュメントツリーの後半で定義されたルールは、先に定義されたものより高い優先順位を持ちます。 また、インポートされたスタイルシートのルールは、スタイルシートのルールの直前で検討されます。