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

広告

関連コンテンツ