書式
要素名またはクラス名、ID名{プロパティネーム:プロパティバリュー}
html,body{background-color:#ccffff;color:#000000}
h1{text-align:center;background-color:#80ffff;color:#000080;font:bold}
.spc{text-align:right}
要素名を列挙するときは要素を「,」で区切ります。
クラス名を指定する場合は「.」で始めます(.の後ろにclass="~"で指定する「~」の部分を書きます)。
例えば「.cet」に「text-align:center」を指定したとします。
この場合「h1 class="cet"」「div class="cet"」の両方に「text-align:center」が反映されます。
また、例えば「h1要素に指定されるクラスであるcetに指定したい」という場合は「h1.cet」とします。
この指定をした場合、例えば「div class="cet"」と指定しても
このプロックに「h1.cet」で指定した値は反映されません。
指定の範囲を{}でくくり、プロパティ(プロパティネームとプロパティバリューのセット)の
区切りを「;」にします。
書式での例ではhtml要素とbody要素をまとめて背景色と文字色を指定しています。
次の行でh1要素に文字の配置(中央寄せ)、背景色と文字色、文字の太さ(太く)を指定し、
次の行でクラス名spcに文字の配置(右寄せ)を指定しています。
スペースや改行はプロパティネーム(background-colorやtext-alignなどのこと)や
プロパティバリュー(centerや#80ffffなどのこと)の間に入れなければ、任意の場所に入れることができます。
上記の例は以下のように書くことがあります。
html, body {
background-color: #ccffff;
color: #000000;
}
h1 {
text-align: center;
background-color: #80ffff;
color: #000080;
font:bold;
}
.spc {
text-align: right;
}
読みやすいように適当な空白を入れるとよいと思います。
また、「}」の前の「;」は省略しても大丈夫です。
「{」「}」は正しく組で使うようにしてください。
間違えると期待する表示が得られなくなってしまいます。