2009年6月16日火曜日

セレクタとプロパティ

セレクタとは、div#footer などのようにスタイルを適用する「場所」をいい、pやh1などの要素名のセレクタ、idセレクタ、クラスセレクタなどがあります。
idセレクタは、 XHTMLに「 <div id=”footer”> 」と記述した場合、CSS側には次のように記します。「#」でidセレクタであることを示します。
ウェブ標準では、XHTMLとCSSの両ファイルに記述をおこなうので混同しないようにします。

div#footer {

font-size: 75%;

}

上で、font-sizeのように文字サイズ、色、余白など要素(div#footer)がもつ表現の特性をプロパティといいます。
プロパティはCSS2で130個ほどあります。75%の部分を「値」といいます。

@@ここに画像

なお前述のごとく、「*#footer」のように「*」(ユニバーサルセレクタ)で要素を限定しない場合は、「#footer」というふうに「*」が省略可能となります。
クラスセレクタにおいては、XHTMLに「 <div class=”nav”> 」と記述した場合、CSSには次のように指定します。「.」でクラスセレクタであることを示します。

div.nav {

font-size: 75%;

}

なお、「*.aaa」のように「*」(ユニバーサルセレクタ)で要素を限定しない場合は、「.aaa」というふうに「*」が省略可能です。

子孫セレクタは、「Aセレクタの中のBセレクタ」を指定するときに使います。
セレクタは半角スペースで区切り、「#p .nav ul li」などといくつでも指定できます。
ここでは半角スペースが「の中の」を示します。従って上は、「p」の中の「.nav」の中の「ul」の中の「li」ということになります。

子孫セレクタを使いこなすことが、idセレクタやクラスセレクタを無意味に増やさないこつです。