CSSの書式は、まずは適用先を示し、それに続く「{ ~~~ }」の中で具体的な記述をするという形式です。この適用先の部分を「
セレクタ」と呼んでいます。※下記図参照
body { 表示方法の指定 }
上記の指定は「body」要素を適用対象とした場合。
p { 表示方法の指定 }
これは「p」要素への適用。
p, h1, body { 表示方法の指定 }
複数の要素へ同じスタイルを適用させたいときはセレクタとセレクタの間に「,」(カンマ)で区切れば複数指定できます。
id属性の値が指定されている要素を適用対象として指定したい場合には、「#」(シャープ)記号を書き、さらにその後にid属性の値を書いて指定することが出来る。
#contents { 表示方法の指定 }
上記のように指定すると、「id="contents"」が指定された要素に適用される。
id属性と同様です。クラスの場合は「.」(ドット)記号を書きます。
.menu { 表示方法の指定 }
「class="menu"」が指定された要素に適用されます。
これは、「要素Aの中に含まれる要素B」と言う指定ができるようになります。
コレを使うことによって属性を無意味に増やすことなく適用先をきれいに指定できるというわけです。
#contents .menu h1 { 表示方法の指定 }
上記のようにセレクタを半角スペースで区切れば、「#contentsの中に含まれる.menuの中からのh1」と言う指定ができるわけです。
リンクの状態別にスタイルを適用できるようにするため、「
疑似クラス」という書式が用意されています。
a:link { 表示方法の指定 }
a:visited { 表示方法の指定 }
a:hover { 表示方法の指定 }
a:active { 表示方法の指定 }
「
a:link」はまだ訪れてないリンクを示す場合
「
a:visited」はすでに訪れたリンクを示す場合
「
a:hover」はマウスカーソルが上にある場合
「
a:active」はマウスボタンが押された状態
※これらを続けて指定する場合にはこの順番で書かなければ意図した状態にならない場合があるので注意してください。
簡単に説明しましたが、ほんの一部にしかすぎません…。CSSは難しいことはありません。基本さえ覚えればあとは応用で自分流の記述をすればいいと思います。