CSSの書式

いくつかのCSSを書いてきましたが、ここで書式についてまとめておきましょう。

１．基本形
　　セレクタ {プロパティ：値}
　　セレクタにはHTMLのタグやid名、class名を記述します。
　　プロパタィにはスタイルとして定義したいものを記述します。
　　値には定義したいスタイルをどう表示したいかを記述します。

h1 {font-size=20px}

２．スタイルの複数記述
　　セレクタ {プロパティ：値; プロパティ：値; プロパティ：値}
　　スタイルをいくつも書きたいときは；で区切って記述します。

h1 { 　　font-size: 20px; 　　font-width: bold }

３．セレクタの複数記述
　　セレクタ, セレクタ, セレクタ {プロパティ：値}
　　セレクタをいくつも書きたいときは，で区切って記述します。

h1, h2, h3 {text-algin: center}

４．タグの親子関係での記述
　　親タグ名 子タグ名 {プロパティ：値}
　　タグに親子関係があり、
　　それによってスタイルの範囲を指定するときは、タグ名をスペース区切りで羅列します。

table tr th { 　　background: green; 　　color: white }

５．id名やclass名での記述
　　#id名 タグ名.class名 {プロバティ：値}
　　id名を使う場合は頭に「＃」をつけて記述します。
　　class名を使う場合は頭に「．」をつけて記述します。
　　優先順位はid名の方がclass名より高く設定されています。

p.midasi { 　　background-color: block; 　　color: white }

<p class="midasi">小見出し</p>

７．疑似クラスでの記述
　　タグ名:疑似クラス {プロバティ：値}
　　タグ名などにより分類できない状態に対しての設定には頭に「：」をつけて記述します。

a:link {color:#0000ff} a:visited {color:#800080} a:hover {color:#ff0000} a:active {color:#ffff00} tbody tr:hover { 　　background: #996633; 　　color: #ffffff; }

　　なお、aタグの疑似クラスについてはこの順番に書く必要があります。
　　また、trタグに疑似クラスを設定し選択された行を際立たせる方法についてはIE6.0では動作しません。
　　対応についてはCSSでtableをデザインに書きました。

８．コメント行の記述
　　/* コメント */
　　コメント行は「/*」と「*/」を使って記述します。

a:link {color:#0000ff} /* 未訪問のとき 青色 */ a:visited {color:#800080} /* 訪問済みのとき 紫色 */ a:hover {color:#ff0000} /* カーソルが上にあるとき 赤色 */ a:active {color:#ffff00} /* クリックしたとき 黄色 */