じゃあまずは、セレクタの種類から覚えてしまいましょー。
これを覚えれば、
スタイルシートを適用する対象を、
しっかりと定義することができるると思います。
１．基本セレクタ
基本セレクタ名 {属性: 値}
これは、
<H1>とか
<b>とか
<strong>といった、いわゆる
HTMLタグにスタイルシートを、
適用するために使うセレクタのこと。
たとえば
H1 {color: #CC0000 }
で、
<H1>・</H1>で囲まれたテキストは赤くなります。
<strong>・</strong>で囲まれたテキストに、スタイルシートを適用させたなら、
上の「H1」のところを、「strong」に変更すればＯＫ。
２．CLASSセレクタ
.CLASSセレクタ名 {属性: 値}
このセレクタは、上の基本セレクタとはちがって、
自分で、名前を決めてスタイルシートを定義する方法です。
１番使い勝手がいいので、とりあえずこれさえわかってればいいかもしれません。
たとえば、
CLASS名を「.red」と自分で決めて、テキストが赤くなるように定義します。
.red { color: #000000}
そして、このままでは定義しただけなので、
これを適用したい場所に、マークをつけてあげます。
<H1 CLASS="red">
すると、<H1>・</H1>で囲まれたテキストが赤く表示されます。
基本セレクタとちがって、セレクタ名を自分で決めるので、
どこに適用するかも決めてあげなきゃいけないですね。
それから、
CLASSセレクタで定義する時は、セレクタ名の前に、「
. 」をわすれずにっ。
３．IDセレクタ
#IDセレクタ名 {属性: 値}
このセレクタは、上のCLASSセレクタと、ほぼ同じなんですけども、
マークのつけ方と、
１ページにつき１つしか同じIDがつかえないというところが違いますね。
あと、「
. 」じゃなくて「
# 」をつけるところですね。
それじゃあ、一応例を解説します。
たとえば、
ID名を「#red」と自分で決めて、テキストが赤くなるように定義します。
#red { color: #000000}
そして、このままでは定義しただけなので、
これを適用したい場所に、マークをつけてあげます。
<H1 ID="red">
すると、<H1>・</H1>で囲まれたテキストが赤く表示されます。
４．セレクタのグループ化
セレクタ , セレクタ {属性: 値}
この方法は、セレクタをまとめて定義するときにつかいます。
たとえば、<H1>と<H2>を両方とも赤いテキストにしたい場合。
H1,H2 {color: #CC0000}
こんなふうに、まとめて定義することもできます。
別に例でつかってる、基本セレクタ以外でもＯＫですので、
状況に応じて定義してあげてください。
５．子孫セレクタ
Div strong {属性: 値}
このように、セレクタ部分を定義すると、
<ＤＩＶ>の中にある、<strong>という要素が、赤色で表示されます 。
セレクタ部分に半角スペースを入れてあげて、区切ってるんですね。
<Div>
<strong>わたしはカフェオレが大好きですよっ</strong>
</Div>
このように、ＨＴＭＬで書かれている、箇所に対して、
スタイルシートが適用されます。
これは、複数設定できるんで、特定の場所をしぼって、
スタイルシートを適用させることができます。
左から順に、子→孫→・・・と定義していきます。
