Last Update 2007/01/16
TOP - CSS1(Cascading Style Sheets, level 1) - スタイルシートの組み込み方法
(1) インラインスタイル
style属性を利用して、タグにスタイルシートを適用します。
(例)
<p style="color: red">この段落は赤で表示されます</p>
(2) ドキュメントレベル
<STYLE>タグを利用してドキュメントにスタイルシートを適用します。
(例)
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
H1
{
color: red
}
H2
{
color: blue
}
-->
</STYLE>
</HEAD>
<BODY>
<H1>ここは赤で表示されます</H1>
<H2>ここは青で表示されます</H2>
</BODY>
</HTML>
(3) 外部ファイル(インポート)
@import表記を利用して外部ファイルに記述されたスタイルシートをインポートします。
(例)
test.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
@import url(test.css);
-->
</STYLE>
</HEAD>
<BODY>
<H1>ここは赤で表示されます</H1>
<H2>ここは緑で表示されます</H2>
</BODY>
</HTML>
test.css
H1
{
color: red
}
H2
{
color: green
}
(4) 外部ファイル(リンク)
<LINK>タグを利用して外部ファイルに記述されたスタイルシートをロードします。
(例)
test.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<LINK rel="stylesheet" type="text/css" href="test.css">
</HEAD>
<BODY>
<H1>ここは赤で表示されます</H1>
<H2>ここは緑で表示されます</H2>
</BODY>
</HTML>
test.css
H1
{
color: red
}
H2
{
color: green
}