Dreamweaverの使い方 » Blog Archive CSSのセレクタと適用方法

CSSのセレクタと適用方法

CSSのセレクタの種類とCSSの適用方法についてです。

・クラスセレクタ
任意の範囲にクラス名をつけてスタイルを指定する事ができます。
ID要素と似ていますがCSSファイル中にドットで指定する事と、HTMLファイル中で１ページに何度でも同じクラス名を指定できるのが違いです。
例

.moji_red { color: #f00; }

・IDセレクタ
HTMLファイル中１ページに１回だけしか使えません。
CSSファイルではID名に#をつけて指定します。
例

#content { width: 600px; }

・タグセレクタ
タグ名をキーにスタイルを設定します。
例

p { line-height: 1.5em; }

・複合セレクタ
タグの子供要素やリンク要素についてスタイルを設定できます。
例

a:link { color: #0FF; }

・ユニバーサルセレクタ
*をセレクタにしたもの。すべての要素にスタイルを適用できます。
例

* { color: #000; }

・style属性による埋め込み
HTMLタグの中にstyle属性を追加し、スタイルを個々に指定する方法です。
例

<span style="color:#f00;">赤文字</span>

・style要素でまとめる
HTMLファイルのHead要素内に、そのHTMLファイル中のスタイルをまとめて記述する方法です。
例

<style type="text/css">
* { color: #000; }
p { line-height: 1.5em; }
</style>

・外部スタイルシート
HTMLファイルとスタイルシートを別にし、HTMLファイルからリンクする方法です。
CSSといえば一般にこのケースが多いようです。仕様上最も推奨されています。
例

<link rel="stylesheet" href="style.css" type="text/css">