CSSの基本

セレクタ

セレクタ { プロパティ:値; }

ひとつのセレクタに複数のスタイル宣言をする

コード

p {
    color: red;
    font-weight: bold;
}

複数のセレクタに同じスタイル宣言をする

コード

p, h1 {
    color: red;
    font-weight: bold;
}

子要素を指定してスタイル宣言をする

親要素子要素セレクタ { プロパティ: 値; }

コード

header p {
    color: red;
}

上記の例は<header>要素の中の<p>要素だけに対してスタイルが適用される。

クラス属性にCSSを指定する

要素名.クラス名（要素名は省略可能）

sampleclassに対して赤色を設定

HTML
<p class="sampleclass">サンプル</p>

CSS
.sampleclass { /* 要素名を省略しないなら p.sampleclass */
    color: red;
}

複数のクラス属性を一度に指定した場合

半角スペースを開けていると、親要素の中の子要素を指す。

コード

<div class="board">
	<p class="title">タイトル</p>
</div>

.board .title {
	color: red;
}

半角スペースを開けずに連結すると、クラス名"abc", "xyz", 両方を持つ要素だけが反応する。

コード

<p class="abc xyz">タイトル</p>

.abc.xyz {
	color: red;
}

id属性にCSSを指定する

要素名#id名（要素名は省略可能）

sampleidに対して赤色を設定

HTML
<p id="sampleid">サンプル</p>

CSS
#sampleid {    /* 要素名を省略しないなら p#sampleid */
    color: red;
}

CSSの３つの記述方法

1.インライン
HTMLタグの中に直接style属性を記述する
一時的なテスト以外で使用してはいけない。

インライン

<h1 style="color:#ff0000;">見出し</h1>
<p style="color:red; font-style:italic">こんにちは</p>

2.内部参照
HTML文書のhead要素の中にstyle要素を設定しCSSを記述する
一時的なテストか、例外的にそのページ限定で使いたいスタイル指定を記述する。

内部参照

<head>
<style>
    h1{color: #ff0000;}
</style>
</head>

3.外部参照

外部参照

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

または

<head>
    <style>
        @import url(style.css);
    </style>
</head>

基本、CSSは全て外部参照にすべき。
文書構造はHTML、装飾はCSS、と完全に分離させる。
インラインや内部参照はあくまでも一時的なテストとして利用する。

CSSの優先順位

スタイルの記述が被った場合、以下の優先順位によってスタイルが決定される。

優先度が高い

インライン
内部参照、外部参照

優先度が低い

内部参照、外部参照による優先度に差はない。
ただし、<head>内部での読み込み、記述位置による後勝ちルールの影響は残る。

優先順位が同じ状態でスタイルが被っている場合(style.cssの２箇所で指定がされている場合など）
セレクタが同じ場合は後勝ちになる。
p { color: red; }
p { color: blue; }
上記は、後から書かれた青色が反映される。

セレクタが違う場合は、セレクタ毎に持つ点数によって、最も高いものが優先される
基本はタグの指定が、最も深いものが優先されると理解すれば良い。