Loose-Info.com

Last Update 2019/12/25


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 }