スタイルシートの設定（別ファイルを読み込む場合<link>）

■動作ブラウザ　【 IE:3.0　 NN:4.0　 Safari:1.0】　■CSSバージョン【1】

	3.0x	4.0x	4.5	5.0x	5.5	6.0	2.0x	3.0x	4.0x	4.x	6.0	7.0	7.x	2.x	1.x
	Internet Explorer						Netscape Navigator						Opera	iCab	Safari
Windows	○	○	-	○	○	○	×	×	○	○	○	○	○	-	-
Macintosh	×	○	○	○	-	-	×	×	○	○	○	○	○	×	○
UNIX	-	-	-	-	-	-	×	×	○	○	○	○	○	-	-

ポイント

説　　明

別ファイルにあるスタイルシートは<link>タグのhref属性を使ってファイルへのパスを指定します。
スタイルシートファイルが複数ある場合には読み込む数だけ<link>タグで指定します。media属性を使って、どのデバイスに出力（対応）するスタイルシートかを指定することができます。ただし、Netscape 4ではmedia="screen"以外を指定するとファイルを読み込みません。

mediaで指定する値	内　　容
all	全て
screen	画面（デフォルト）
tty	テレタイプ（タイプライタ等、文字が固定ピッチ幅）
tv	テレビ
projection	プロジェクタ
handheld	携帯用端末（ハンドヘルドコンピュータ）
print	プリンタ
braille	点字ディスプレイ
embossed	点字プリンタ
aural	音声出力

サンプル

<html>
<head>
<title>スタイルシートの設定</title>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body>
<h1>スタイルシートの設定</h1>
<div class="mainBody">
　スタイルシートを使ってページの見た目（装飾）を設定します。
</div>
</body>
</html>

補足説明

common.cssファイルの内容は以下のようになっています。

h1 { font-size:14pt;
color:red;
background-color:#e0e0ff;
width:320px;
}
.mainBody {
background-color:#eef;
border:1px solid gray;
width:320px;
}

■サンプルを実行する　>>実行
■各ブラウザでの動作結果を見る　>>View!