CSSのセレクタと適用方法

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

セレクタの種類

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

.moji_red { color: #f00; }

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

#content { width: 600px; }

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

p { line-height: 1.5em; }

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

a:link { color: #0FF; }

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

* { color: #000; }

HTMLファイルへの適用方法

・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">

広告