ブラウザへ何を見せるかという情報の構造を指定するものがHTMLで、
『HTMLタグ』と『見せたい文』の記述順番で表現します。
対して、このHTMLに色やサイズなどの飾りを指定する方法が、
CSS(Cascading Style Sheets:カスケーディング・スタイル・シート)です。
以後は、略してスタイルシートと呼びます。
スタイルシートの指定は、どのタグをどのように見せるかと言う見栄えの指定で、
HTMLのタグに対して指定します。
個々のHTMLタグには、もともと、どのように表示させるか?という属性があり、その属性の
内容を変更するイメージです。(注1)
例えば 背景色のスタイルシートにおける属性名は、background-colorになっており、ページ全体の背景であれば 次のように指定できます。
<body style="background-color: # ;">
上記のbackground-color: に続く表現は、光の三原色を意味する色のデータで、全ての光がない#000000の指定で黒になり、
全ての光を最大で指定する#FFFFFFの指定で白になります。
光の三原色の各 赤 緑 青 の16進数の値を下で変更できるようにしてあります。
red(赤):
green(緑):
blue(青):←クリックして選択し、上の背景色を#C8F8F8へ変更してください。
上記で各色を組み合わせ、全ての色を指定できます。いろいろ確かめてみましょう。
background-colorの部分は属性名やプロパティと呼ばれ、各タグに応じたさまざま設定が可能です。
#C8F8F8は
色を表現する場合の設定値で16進数2桁ごとで
赤、緑、青と
指定しますが、
名前が付いている色であれば、次のように色の名前で指定することもできます。
background-color: blue;
上記のようにプロパティ名の直後に: (半角のコロンと半角スペース)を書き、
続いて書いた設定値の直後に;(半角のセミコロン)を書く規則になっています。
この表現を、何回でも重ねるよう(cascading)に並べて書くことができます。
(同一プロパティ名に対する記述順番で、前方で最後に書いた設定値が有効です)
一つのプロパティ名とその値の設定は次のように指定します。
プロパティ名: 値; 例 background-color: #CCFFFF;
複数指定する場合は、この表現を次のように並べます。
プロパティ名1: 値1; プロパティ名2: 値2; プロパティ名3: 値3; 例 background-color: #CCFFFF; color: red; font-size: 32pt;
使っているHTMLタグのstyle属性に直接指定する。
この書き方は、下の2つの方法より優先して働きます。分かりやすいので例によく使いますが、HTMLの構造が煩雑に見えるので多用すべきものではありません。
bodyの中でなく、headの中に セレクタ呼ばれるタグ名などを指定し、そのファイル全体に反映させる書き方です。
headの中で、外部にあるスタイルシートのファイルでを指定する。
(同じスタイルシートのファイル使うと同じ飾りのページでき、この方法が、最も使われます。)
注1
補足:
例えば、<body> タグではbgcolorを指定して背景色を指定できます。
この属性に対応するスタイルシートの属性名がbackground-colorになっています。
つまり、background-colorの内容を変更することでも、背景の色が変わるという訳です。
body タグでは bgcolor の属性があるので、わざわざタイルシートのbackground-colorを使わなくても
背景色を指定できます。例です→<body bgcolor="#000000">
しかし、h1,h2,h3・・やpのタグではbgcolorを指定できません。
ですが、スタイルシートの属性名のbackground-colorを使えばh1などの背景色も指定できるのです。
歴史的にはスタイルシートが後から作られた規則です。
この時に、類似性のあるタグに対して、統一的な属性名が指定できるように考慮されました。
それがスタイルシートの属性名です。
そして現在、タグ自身の属性指定でなく、スタイルシートの属性指定を使う方がよい。
とされています。