Loose-Info.com

Last Update 2019/12/25


TOP - CSS1(Cascading Style Sheets, level 1) - スタイルの構文

スタイルシートの構文は基本的に次の形式となります。

[セレクタ] {[プロパティ]:[値]}

構文は下記の例のように応用することが可能です。

(1) [セレクタ]はコンマによって複数指定できます。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- H1, H3 {color: red} H2, H4 {color: blue} --> </STYLE> </HEAD> <BODY> <H1>ここは赤で表示されます</H1> <H2>ここは青で表示されます</H2> <H3>ここは赤で表示されます</H3> <H4>ここは青で表示されます</H4> </BODY> </HTML>

(2) [プロパティ]と[値]の組み合わせはセミコロンによる複数指定ができます。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- H1 {color: red; font-size: 16pt} H2 {color: blue; font-size: 12pt} --> </STYLE> </HEAD> <BODY> <H1>ここは赤・16ptで表示されます</H1> <H2>ここは青・12ptで表示されます</H2> </BODY> </HTML>

(3) [値]はスペースを間に入れることにより複数指定できます。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- H1 {font: normal 16pt monospace} H2 {font: italic 12pt sans-serif} --> </STYLE> </HEAD> <BODY> <H1>ここは(normal 16pt monospace)で表示されます</H1> <H2>ここは(italic 12pt sans-serif)で表示されます</H2> </BODY> </HTML>

(4) ある特定のタグの順序によって、適用するスタイルを指定することができます。
指定方法は、外側のタグから順に記述してスペースで区切ります。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- PRE A {color: red} P A {color: green} --> </STYLE> </HEAD> <BODY> <PRE> <A href="test.html">PREタグの内側にAタグがある場合は赤で表示されます</A> </PRE> <P><A href="test.html">Pタグの内側にAタグがある場合は緑で表示されます</A></P> </BODY> </HTML>