CSS の履歴(No.4)

基本†

p  {color: red} → pがセレクタ、colorがプロパティでredが値

cssを外部ファイルに書かないで直接指定するやり方。昔よくやっていた。携帯ではいまだにこれ。

基本中の基本だが、classは複数OK（複数に対して指定したい場合）、IDはひとつだけ。IDは#で指定するこれはページ内のリンクから連想しよう！

   p.hot  {color: red}
   .cool  {color: blue}

   p#hot {color: red}
   #cool {color: blue}

<a>などはインライン要素。HTMLStrictではbodyにおけるのはブロックレベル要素なので<a>タグを書くときは<p>などのブロックレベル要素で囲わないとだめ。関連してスタイルのblockとinlineも同じようにblockだと文字の間に該当要素を挟むことができず、inlineだと文字の間に該当要素を挟むことができる。

大まかにmarginは外側の余白、paddingは内側の余白。borderはその両方に挟まれる壁のイメージで考える。

外部スタイルシート < STYLE要素 < インライン・スタイル

同じ優先度同士なら後ろのほうが優先度が高くなる。 !importantキーワードで、優先度を最高に指定出来る。

また指定はより詳細な方がマッチする。

.hoge { display:none; } div.big div.hoge { display:block; }

<div class="hoge>見えません</div>　→ 一般的な指定が効いてdisplay:none
<div class="big"><div class="hoge">見えます</div></div>　→下の詳細な指定が効いてdisplay:block

div#main h2 { color: #C13A72; }

三段組でも基本は二段組みと一緒。回り込みを解除しない限り横に並ぶので、回り込み解除専用のDIVを用意しておく。回り込み解除のdivは表示上影響を与えないのが好ましい。divはブロックレベル要素なので中にインライン要素を非表示でいれるというのが正しい。

* html p { color:#FF0000; }

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/test.css" media="screen" />
<![endif]-->