CSS をマスターする: カスケードを理解する

カスケード スタイル シート (CSS) は Web の基本テクノロジーであり、開発者が HTML ドキュメントの視覚的なプレゼンテーションを制御できるようにします。 CSS 構文は一見すると単純に見えますが、スタイルを適用および継承する方法は驚くほど複雑な場合があります。効率的で保守可能、予測可能な CSS を作成するには、これらの複雑さを理解することが重要です。
この包括的なガイドでは、CSS のカスケードと継承の概念について説明します。

CSS カスケード

カスケードは、複数の競合するルールが存在する場合に、どの CSS ルールを要素に適用するかを決定するアルゴリズムです。期待どおりに動作する CSS を作成するには、カスケードがどのように機能するかを理解することが不可欠です。カスケードでは、いくつかの要素が次の順序で考慮されます。

• 1 スタイルシートの原点
• 2 つのインライン スタイル
• 3 セレクターの特異性
• 4 ソースの順序

完全に網羅するために、以下を追加できます:

• 2.5 レイヤーで定義されるスタイル 続きを読む
• 3.5 DOM の一部をスコープとするスタイル 続きを読む

カスケードに影響を与える要因を優先順位の順に分析してみましょう:

1. スタイルシートの原点

CSS は 3 つの異なるソースから取得できます:

• 1 ユーザー エージェント スタイル: これらはブラウザーのデフォルトのスタイルです。各ブラウザには独自のデフォルト スタイルのセットがあるため、スタイルのない HTML はブラウザごとに若干異なって見える可能性があります。
• 2 ユーザー スタイル: これらはユーザーが設定したカスタム スタイルです。まれですが、一部のユーザーは、アクセシビリティや個人的な好みのためにデフォルトのスタイルをオーバーライドするカスタム スタイルシートを持っている場合があります。
• 3 作成者スタイル: これらは、Web 開発者として作成するスタイルです。

一般に、作成者スタイルはユーザー スタイルより優先され、ユーザー スタイルはユーザー エージェント スタイルをオーバーライドします。これにより、開発者は必要に応じてユーザーの好みを尊重しながら要素の外観をカスタマイズできます。

2. インラインスタイル

style 属性を使用して要素に直接適用されるスタイルは、非常に高い優先度を持ちます:

<p style="color: red;">This text will be red.</p>

インライン スタイルは、外部スタイルシートまたは