Web プログラマになる

:: be web programmer ::

スタイルを書く場所その３

スタイルを書く場所の３つ目は、style 属性の中です。
style 属性は、全てのブロックレベル要素とインライン要素に対応しています。

style 属性の中に、スタイルのプロパティと値を直接書いていきます。

<body>
 <h2 style="color: #000099; font-size: 120%;">
  ３つの言語 その２　CSS
 </h2>
 <p style="font-size: 90%">
  見た目やデザインは、スタイルシート（CSS）の役目です。<br>
  スタイルシートを使うと、文字の色や大きさを自由に
  変えることができます。
 </p>
</body>

要素固有のスタイルを指定する場合は、この書き方を使用します。

●競合するスタイルの優先順位

３つの場所を組み合わせてスタイルを書いていくと、同じ要素のスタイルが競合することがあります。

競合した場合は、優先順位の高いスタイルが適用されます。

スタイルの優先順位は、次のとおりです。

style 属性のスタイル
style 要素のスタイル
css ファイルのスタイル
ユーザ定義のスタイル
ブラウザのデフォルトスタイル

優先順位が一番高いのは、style 属性のスタイルです。
優先順位の低いスタイルは、高いスタイルによって上書きされます。

例えば、次のような css ファイルと style 属性のスタイルがあったとします。

≪css ファイル≫

h3 {
  color: #990000;
  font-size: 110%;
}

<h3 style="color: #006600">見出し</h3>

この場合、h3 要素のスタイルは style 属性のスタイルで上書きされます。
上書きされたスタイルは、次のようになります。

h3 {
  color: #006600;
  font-size: 110%;
}

Web プログラマになる最初のページへ

このページの一番上へ

Web プログラマになる

スタイルを書く場所 その３

●競合するスタイルの優先順位

≪css ファイル≫

スタイルを書く場所その３