img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

CSSの書式


CSSの書式

  ie6 nn7 op8

cssは以下のような書式で記述します

セレクタ {プロパティ:値;}

セレクタ(selector)は スタイルを適用する対象のことで、要素名.クラス名.id名など、アルファベットで始まり、アルファベット.数字.ハイフンのみで構成された名前を指定します。
通常 html/xhtml の要素(element)が該当します。(body や p、table、hr など)
プロパティ(property)は セレクタに付ける効果を指定するもので、プロパティごとに指定できる値が決まっています。
また、下記のようにセレクタやプロパティとその値を一度に複数記述することもできます。

セレクタ, セレクタ, セレクタ ... { プロパティ:値;}

セレクタ { プロパティ:値; プロパティ:値; ... }

セレクタ {
    プロパティ:値;
    プロパティ:値;
    プロパティ:値;
}



class属性値

セレクタにピリオド( . )とクラス名(任意の名前)をつけて識別します。ページ内で複数の内容にスタイルを指定するために使います。
また、セレクタ名を指定せず ピリオド( . )とクラス名だけを記述した場合や * が指定された時は、全要素に適用されます。

.クラス名 { プロパティ:値;}
要素名.クラス名 { プロパティ:値;}


例:
.note1 { color:red; }
p.note2 { font-style:italic; }

適用:
<p class="note1">

この範囲の色は赤になります。

</p>
<p class="note2">

この範囲の文字はイタリックになります。

</p>


id属性値

セレクタにシャープ(#)と id名(任意の名前)をつけて識別します。ページ内で唯一例外的なスタイルを適用したい場合などに使用します。

#id名 { プロパティ:値;}
要素名#id名 { プロパティ:値;}


例:
#note3 {text-decoration:line-through;}
p#note4{ font-weight:bold;}

適用:
<p id="note3">

この範囲の文字は取り消し線が付きます

</p>
<p id="note4">

この範囲の文字は太字になります

</p>