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>


Copyright(C) 2006-2011 CLAYPOT. All Rights Reserved.