CSSのメモ

CSSリファレンス(CSS入門)を読んで学んだ事をメモしておく。


・<span>と<div>の違い
<span>はインライン要素(前後で改行されない)、<div>はブロック要素(前後で改行される)を囲む一般的なタグとして使用される。


・基本
<h1>タグにstyle="color:red;"を指定する。

 h1 { color:red; }


・グルーピング
カンマを用いて各要素の属性を一度に指定。

h1, h2 { color:red; }


・クラス
各タグ名に応じたクラスを定義。

p.red { color:red; }
.bold { font-weight:bold; } /* タグ名に依存しないクラス名を指定 */ 

クラスは重複して指定可能。

<div class="red bold">赤い太字</div>


・定義済みクラス
a要素やp要素にはいくつかの定義済みクラスを指定することが可能。

a:link { color:green; }
P:first-line { color:red; }    /* 最初の1行 */


・ID属性
クラスの代わりにIDを指定する*1

#elm123 { color:red; }
h1#elm124 { color:green; }


・状況依存セレクタ
<h1>〜</h1>の中で使用される<em>要素のスタイルを指定。

h1 em { color:red; }


・コメント

h1 { color:red; }    /* Red Color */


・優先順位
タグでstyle="color:blue"と指定するよりも優先度を強くする。

h1 { color:red !important; }


・長さの単位
 em:文字の高さを基準とした1文字分の長さ
 ex:文字xの高さ
 px:ピクセル

*1:クラスとIDの違い
クラスはスタイルの集合につける名前で、複数のタグに同じクラス名を指定することが可能だが、ID はそれぞれの要素につける名前で、ひとつのドキュメント中に複数の要素が同じIDを持つことは許されない。