16.4.2 CSSの記述方法

CSSを記述する方法には,今から説明する三通りの方法があります.同じスタイルの指定をすれば,どの指定方法を使っても見ばえが変化することはありません.ウェブサイト全体に共通するデザインは一つの外部ファイルに保存するなど,汎用性に応じて使い分けをすると良いでしょう.

style属性

スタイルシートをタグの属性として書く方法です.例えば次のようにします.

<h1 style="color:red;">東大太郎の自己紹介</h1>

head要素やmeta要素のようにどう見てもスタイル指定の出来なさそうな要素を除いて,基本的にほとんど全ての要素に対してこの方法で指定することができます.

head要素内

head要素内にstyle要素を書く方法です.

<head>
<style>
<!--
h1{ color:red }
-->
</style>
</head>

<!--と-->で囲ったのは,CSS非対応ブラウザがこの部分を読まないようにするためです.

外部ファイル

CSSを記述したファイルをHTML文書の入ったファイルとは別に作成する方法です.この場合,HTML文書のhead要素内で,link要素を用いて外部ファイルの場所を次のように指定しなければいけません.例えばHTML文書と同じディレクトリにあるstyle.cssの中でCSSを記述した場合は

<link rel="stylesheet" href="style.css">

のようにします.rel属性は,style.cssにCSSが記述されることをブラウザに教えてあげるためのものです.hrefの部分はa要素と同じように,絶対パスでも相対パスでも構いません.

宣言の衝突について

複数の方法を使ってスタイルを指定すると,スタイルの指定が衝突することがありえます.例えば

<style>
<!--
  h1 { color:red; }
-->
</style>
(中略)
<h1 style="color:blue;">東大太郎の自己紹介</h1>

と書くと,h1の色の指定が衝突します.このような場合は

  1. style属性
  2. head要素内
  3. 外部ファイル

の順に優先されます.ですから今の場合は

<h1 style="color:blue;">東大太郎の自己紹介</h1>

とだけ書いたのと同じ意味になります.また,head要素や外部ファイルの中同士でスタイル指定の衝突があった場合は,後に書いたものが優先されます.