HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


スタイルシートの優先度を変更する

書き方

セレクタ { プロパティ:値 !important ; }

解説

スタイルシートをHTMLに読み込む方法に3種類あることはすでに説明しました。以下の3つです。

  1. 各要素ごとに個別にスタイルシートを適用する方法
  2. HTMLファイルごとにスタイルシートを記述する方法
  3. 外部スタイルシートを読み込み、一括指定する方法

この3種類のスタイルシートの優先度は、上から順に高くなります。従って、これらの方法で、セレクタに同じプロパティが設定されていた場合、優先度の高い方法の設定値が有効になります。

優先度を変える

以前に設定していたセレクタを、他の方法によって改めて記述し直した場合、これらの優先度によって内容が上書きされてしまうこともあります。これを避けるため、どの方法よりも最優先したいプロパティがある場合、上記のように『!important』をプロパティの値の後ろに記述します。

このようにすると、どの方法でCSSを読み込んだとしても、!importantが書かれたプロパティの設定値が最優先されて適用されます。

CSS/HTMLサンプル

HTMLヘッダー
<style type="text/css">
<!--
body { background:#ffdff9 !important ; }
-->
</style>

HTML本文
<body style="background:#eeeeee;">

</body>

CSSの優先度を変える サンプル

次のページへ >>