Cascading
カスケーディングと継承についてのページです。
スタイルシートでは、複数のスタイルを指定できるためスタイルが競合する場合があります。
競合した場合、スタイルを優先するルールがあります。 ルールを間違えた場合、指定しても表示しないといったトラブルが発生します。
スタイルシートどうしの競合
スタイルシートどうしが競合した場合の優先順位です。
- インラインのスタイルシート
- 埋め込みスタイルシート
- リンクスタイルシート
- インポートスタイルシート
- ユーザーによって設定されたブラウザのスタイルシート
- ブラウザ標準のスタイルシート
埋め込みスタイルシートよりインラインのスタイルシートが優先される
サンプルでは、<I>タグ を赤に指定していますが、タグに直接スタイルを記述するインラインスタイルシートは、優先されます。
p { font-size: 16pt; font-family: Arial, Helvetica; color:
rgb(102,102,102); }
i { color: rgb(255,51,51); }
<p>Normal Text Arial Gray</p>
<p><i>I Tag Embed Style Sheet Red</i></p>
<p><i style="color: rgb(102,102,255);">I Tag Inline Style Sheets Blue</b></p>
ルールどうしの競合
ルールは、抽象的より具体的なスタイルを優先し、書かれた順番は上より下に書かれた指定が優先されます。
HTMLよりスタイルシートが優先される
サンプルでは、<P>タグにフォントがArialでグレイ文字を指定します。<I>はFONT-STYLEがNORMALで文字が赤、<B>は、FONT-WEIGHTをNORMALで文字を青に指定した場合の結果です。
<I>タグは、本来イタリック体で表示しますが、スタイルシートの指定が優先されNORMALで表示します。<B>タグ部分も同様に、ボールド でなくスタイルシートのNORMALが優先されます。
このようにHTMLよりスタイルシートが、優先的に指定されます。
p { font-size: 16pt; font-family: Arial, Helvetica; color:
rgb(102,102,102); }
i { font-style: normal; color: rgb(255,51,51); }
b { font-weight: normal; color: rgb(102,102,255); }
<p>Normal Text Arial Gray</p>
<p><i>I Tag Red</i></p>
<p><b>B Tag Blue</b></p>
前より後から記述された指定が優先される
サンプルでは、<P>タグにフォントがArialでグレイ文字を指定します。<I>はFONT-FAMILYがTimes New
Romanで文字が赤、<B>は、FONT-FAMILYをCourier Newに指定した場合の結果です。
<I>タグ内の<B>部分は、ボールドのCourierになりますが、<I>タグが継承されイタリック体の赤で表示します。
<B>タグ内の<I>部分は、イタリック体のTimes New Romanの赤になりますが、<B>タグが継承されボールドで表示します。
p { font-size: 16pt; font-family: Arial, Helvetica; color:
rgb(102,102,102); }
i { font-family: "Times New Roman", Times; color: rgb(255,51,51); }
b { font-family: "Courier New", Courier; }
<p>Normal Text Arial Gray</p>
<p>I Tag Times Red</i></p>
<p>B Tag Courier</b></p>
<p><i>I Tag Times Red<b>B Tag Courier</b></i></p>
<p><b>B Tag Courier<i>I Tag Times Red</i></b></p>
IDセレクタは、クラスセレクタより優先される
サンプルでは、<P>タグはフォントがArialでグレイ文字です。 <I>は 、FONT-WEIGHTがNORMALで文字が赤。
FONT-WEIGHTをBOLDでフォントをTimes New Romanで文字の色をブルーのtimesと言うIDセレクタを作り指定した場合の結果です。
<P>タグにID指定した場合、IDが優先されますからTimes New RomanのBoldの青で表示します。
<P>タグにIDセレクタ"times"指定した<I>タグ範囲は、<I>のFONT-WEIGHTがNORMALで赤が優先されますが、FONT-FAMILYが指定していないため、IDセレクタのFONT-FAMILYが優先されます。
<P>タグの<I>タグにIDセレクタ"timesを"指定するとIDセレクタにFONT-STYLEが指定していないため、<I>タグのイタリックは優先されますが、FONT-WEIGHTのBOLDとFONT-FAMILYと色
はIDセレクタが優先されます。
p { font-size: 16pt; font-family:
Arial, Helvetica; color: rgb(102,102,102); }
i { font-weight: normal; color: rgb(255,51,51);
}
#times { font-weight: bold; font-family: "Times New Roman", Times; color:
rgb(102,102,255); }
<p>Normal Text Arial Color Gray.</p>
<p><i>Normal Text. I Tag Color Red.</i></p>
<p id="times">Normal Text ID Selector Times Blue.</p>
<p id="times"><i>Normal Text ID Selector. I Tag Times Red.</i></p>
<p><i id="times">Normal Text. I Tag ID Selector Times Blue.</i></p>
セレクタは、具体的な指定が優先される
サンプルでは、<I>タグは 赤で、<P>の<I>タグは青に指定した場合です。このように同じタグに異なったスタイルを指定した場合です。
<P>タグ の<I>タグ部分は、<I>タグの指定でなく<P>の<I>タグの指定の青で表示します。<H3>タグの<I>タグ部分は、<H3>の<I>タグの指定がされていないため<I>タグの指定の赤で表示します。
<I>タグより<P>の<I>タグのように、より具体的に指定された設定が優先されます。
p { font-size: 16pt; font-family: Arial, Helvetica;
color: rgb(102,102,102); }
h3 { font-size: 16pt; font-family: Arial, Helvetica; color: rgb(102,102,102);
}
i { color: rgb(255,51,51); }
p i { font-weight: bold; font-family: "Times New Roman", Times; color: rgb(102,102,255);
}
<p><P>Text. Arial Color Gray.</p>
<p style="margin-bottom: 1em;"><i><P>Text. I tag Color Blue.</i></p>
<p><P>Text ID Selector Times Blue.</p>
<p><i><P>Text. I Tag Times Blue.</i></p>
<h3><i><H3>Text. I Tag Times Red.</i></h3>
 |
 |
|---|
