スタイルシートの指定方法

style属性を指定する

多くの要素はstyle属性でスタイルシートを指定できます.指定の仕方は プロパティ:値; です.例えば,div要素に属性を指定する場合は,

<div style="color:#000; background:inherit; font-size:larger;">

とします.

style要素を使用する

head要素内に記述します.

<style type="text/css"> <![CDATA[ div{color:#000; font-size:larger;} ]]> </style>

多くのUAで未対応のようです.

外部スタイルシートファイルを使用する

<link rel="stylesheet" type="text/css" href="hogehoge.css" />

hogehoge.cssを読み込んでXHTML文書に実装します.通常,ファイルの拡張子はcssにします.cssファイル中にはスタイルシートの指定文を直接書きます.

コメント

style要素やcssファイルにはコメントを書けます.コメントはスタイルシートの動作と一切関係しません.

/* ここにコメントを書きます. */ /* コメントは 複数行に渡って記述できます. */

単位

スタイルシートで指定できる単位は以下の通りです.

cmセンチメートル
mmミリメートル
inインチ
ptポイント(1pt=0.0139in)
pcパイカ(1pc=12pt)
emエム(文字 M の高さ)
exエックスハイト(文字 x の高さ)
pxピクセル

これらの内,cm mm in pt pcは絶対的な大きさが決まっています.em exは閲覧者の環境に対して相対的に決められます.pxは閲覧者の環境に依存します.多くの環境に対応させるなら,emやexの使用が推奨されます.

クラスによる識別

ある要素の特定部分だけスタイルシートを施したい場合は,style要素内や外部スタイルシートファイルで次のように書きます.

要素.クラス{適用するスタイル}

例えば,p要素にフォントを大きくするクラスbigを作りたい場合は, p.big{ font-size:larger; } と記述します.そして,適用する部分を <p class="big"> とすれば,その部分だけフォントが大きくなります.

なお, .big{ font-size:larger; } と記述した場合,どんな要素に対してもclass属性をbigと指定するだけで,フォントを大きくできます.

アンカ疑似クラス

リンクが施されている部分のスタイルシートは,style要素内や外部スタイルシートファイルで次のように書きます.

a:link{ color:#00f; background:inherit; } a:visited{ color:#00f; background:inherit; } a:hover{ color:#f09; background:inherit; } a:active{ color:#f00; background:inherit; }

上から,リンク部分の色・1回以上訪れたことのあるリンクの色(UAのキャッシュから訪問履歴が消えている場合を除く)・マウスカーソルが上にあるときの色・リンクが選択されているときの色です.順番はこの通りに指定するのが望ましいです.

植字疑似要素

1文字目や1行目だけフォントを変えるには,style要素内や外部スタイルシートファイルで次のように書きます.

p:first-letter{ font-size:larger; } p:first-line{ font-weight:bold; }

この例ではp要素について,最初の文字のfont-sizeプロパティをlargerにし,最初の行の文字のfont-weight要素をboldにしています.

継承とカスケーディング

<p style="color:#00f; background:inherit;">継承とは<span>このこと</span>です.</p>

出力結果は以下です.

継承とはこのことです.

p要素で文字色が青に指定されており,span要素の中も文字色が青になっています.これが継承です.

継承の考え方がないと,span要素内の文字色はブラウザの既定値になってしまい,要素が変わるたびに毎回同じ記述を繰り返さなければいけません.

<p style="color:#00f; background:inherit;">カスケーディングとは <span style="color:#000; background:inherit;">このこと</span>です.</p>

出力結果は以下です.

カスケーディングとはこのことです.

p要素で文字色が青に指定されていますが,span要素で文字色が黒に指定されているため,span要素内の文字は黒になります.これがカスケーディングです.同じプロパティで重複した指定がある場合,後に指定された値が優先されます.