書き方の基本

　選択部 { 属性 : 値 }

選択部には、要素（タグ）・クラスセレクタ・IDセレクタが入ります。
属性には、文字の色を変える color など、スタイルシートで定義された属性を入れます。
値には、それぞれの属性で定義されている値やキーワードを入れます。


例えば文字の色を赤にする場合は次のようになります。


文字の色とサイズを指定する場合は、; で区切りスタイルシートを指定していきます。



タグに直接スタイルシートを指定する書き方は次のようになります。


タグに直接スタイルシートを取り込むので選択部は要無く、style 属性で取り込みます。

グループ化

違うタグに同じスタイルシートを定義する場合、グループ化する事が出来ます。



body と td を , で区切り並べた下（緑部分）は、上（青部分）と同じ事になります。
また宣言部も （font-size:14px と color:#000000） ; で区切り複数入れる事が出来ます。

クラスセレクタ

タグにスタイルシートを定義してしまうと、そのタグを使うとみんな同じ表示になってしまいますが、 それでは都合良くない場合が多いです。そのためクラスセレクタを使います。
クラスセレクタは名前の前に　. （ピリオド）が付きます。


上の場合は、<div> タグ内に書かれた文字は 14px の黒い文字になりますが、 <div> タグにクラスを指定する事で13pxの赤い文字になります。

<div class="red">13px の赤い文字</div>

これは div.red となっているため、<div> タグのみ class="red" を使えます。


上の場合は .red になっているので、<div> タグ以外にも適用できます。

<span class="red">13px の赤い文字</span>

今回の例は赤い文字だったのでクラスセレクタを red にしましたが、red はあくまで名前なので、 英数字なら何でも構いません。- や _ も初めの文字以外に使えます。 スタイルシートを使う上で クラス(class) は最も重要な使い方になります。

idセレクタ

id セレクタもクラスセレクタと似た感じですが、こちらは1度しか同じidを使えません。
またこの id はJavaスクリプトにも使われます。idセレクタは名前の前に # が付きます。


id の使い方の例として、クラスで文字のサイズ・色、要素のパディング・幅を決めた場合に、 ボーダーの色は別にしたい時は、上のように id でボーダーのみ指定したりします。

コンテキストセレクタ

グループ化している下の場合は、td も div も14px の黒い文字になりますが、
, を 半角スペースに変えると全く意味が異なってきます。


下の場合は、td の中にある div に対してだけ、14px の黒い文字になります。
つまりテーブルの中のdiv という事です。スタイルシートを効かす条件が増えたわけです。

コメント

スタイルシートの宣言を <!--　〜　--> で囲うのは、スタイルシートを認識しないブラウザへの一応の配慮です。

<!-- ここに書かれたテキストはブラウザで表示されない。 -->


またスタイルシートにコメントを入れる場合は /* 〜 */ です。