背景と文字色

文字色
color:色;
文字色は性格には前景色(foreground color)と言い、背景に対して前景に表示されるテキストの事で、要素の文字色をcolorプロパティで指定します。
多くのブラウザでは初期値は黒を適用しています。
body{color:orange;}
body{color:#ffa500;}
上の場合、body要素にcolorプロパティが適用され、子孫要素にも値が継承され、文書全体の文字色がオレンジ色になります。
一般的に色の値はorangeのようなカラーネームと#ffa500のようなRGB値で指定します。
色についてはWEB COLORを参照
背景色
background-color:色;
要素の背景には色と画像の指定ができます。
背景は要素が生成するボックスの内容領域、パディング領域、」ボーダー領域に適用されます。
マージン領域は常に透過されていて親ボックスの背景が見えています。
背景の初期値は透過されていて親ボックスの背景が透けて見える。
body{background-color:orange;}
body{background-color:#ffa500;}
上の場合、body要素にbackground-colorプロパティが適用されてます。子孫要素には値が継承されてないが規定値は透明なので文書全体の背景色はオレンジ色になります。
各子孫要素にbackground-colorプロパティが指定されている場合は、その要素はその値が背景色となります。
コントラスト
文字色と背景色のコントラストに注意が必要です。 文字色と背景色が似た色の場合、テキストが読みにくいページになってしまいます。


TOPへ おタグるーむ