TOP ＞ スタイルシート基本知識 ＞ スタイルシートの優先順位を制御する
スタイルシートの優先順位を制御する
スタイルシートの内容は、特定の要素（タグ） のstyle属性＞HTMLファイルのヘッダー部のstyle要素＞外部ファイルを利用の順番に適用されます。
これらを組み合わせて使うケースでは、複数の箇所に同じプロパティに違う値を指定してしまうこともあります。
つまり、外部スタイルシートとタグのstyle属性のbody要素でfont-sizeプロパティに違う値を指定したとすると、 そのHTMLファイルの中では、タグのstyle要素の値が適用されるわけです。
ここで、どうしても外部スタイルシートでの指定を優先したい場合はどうしたらよいでしょうか？
タグのstyle要素に書き込まないというのも、一つの手段ですが、「!important」キーワードを利用して、指定した書式を優先させることもできます。
スタイルシートの優先順位を制御する
セレクタ｛プロパティ：値 !important ;｝
"!importantキーワードを使用している場合"のサンプルページはコチラをクリック！
"!importantキーワードを使用していない場合"のサンプルページはコチラをクリック！
- サンプルページのコードは以下の通りです。
|
・111a.cssの内容(!important適用) body{ background-color: red !important; }h1{ font-size: 15pt; color: green; background-color: #ffccff; } em{ color: #ffccff; background-color: green;} |
|
・111.htmlの内容 <html><head> <title>「!important」キーワードで適用優先度を変更するサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/111a.css" type="text/css"> </head> <body style="background-color : #ffffff;"> <h1>外部ファイル「111a.css」で、body要素の背景色を指定する際に<em>「important」</em>を指定しています。<br> HTMLのbodyタグに<em>style属性</em>で背景色を指定しても、適用される背景色は外部ファイルで指定した色です。 </h1> <p>bodyタグでは、背景色を白色に指定しています。しかし、外部ファイルの背景色に赤色を指定し、「!important」キーワードを指定してあるので、外部ファイルの赤色が優先されています。</p> </body> </html> |
|
・111b.cssの内容(!important適用しない) body{ background-color: red; }h1{ font-size: 15pt; color: green; background-color: #ffccff; } em{ color: #ffccff; background-color: green;} |
|
・111b.htmlの内容 <html><head> <title>「!important」キーワードで適用優先度を変更するサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/111b.css" type="text/css"> </head> <body style="background-color : #ffffff;"> <h1>外部ファイル「111b.css」で、body要素の背景色を指定する際に<em>「important」</em>を指定していません。<br> HTMLのbodyタグに<em>style属性</em>で指定した背景色が適用されています。 </h1> <p>bodyタグでは、背景色を黒色に指定しています。しかし、外部ファイルの背景色に赤色を指定し、「!important」キーワードを指定してあるので、外部ファイルの赤色が優先されています。</p> </body> </html> |
[
スタイルシート基本知識 ]
