[CSS] 基本メモ: 書き方、セレクタ、優先度、色の指定

CSS再勉強。参考サイトが助けになる。

CSSの基本－HTMLクイックリファレンス
http://www.htmq.com/csskihon/index.shtml

CSSを書く場所

HTMLタグ中にstyle属性として書く
ヘッダ中に<style>タグを使って書く
外部ファイルに書く <link ref=”stylesheet” href=”default.css”>

CSSの書き方

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

セレクタ {

プロパティ: 値;

}

例

h3 {
    color: blue;
    font-size: 20px;
}

h3 {

color: blue;

font-size: 20px;

}

セレクタの種類

* – 全てのセレクタ
a, b – 複数のセレクタを指定 (aとb)
a b – a要素内のb要素を指定 (全ての子孫が対象)
a > b – a要素直下のb要素を指定 (子要素のみが対象)
a + b – a要素直後のb要素だけ指定
ab – a要素であって、かつ、b要素であるものだけ指定

例

h3 + p { ... }

<h3>見出し</h3>
<p>テキスト</p> ←これ
<p>テキスト</p>
<p>テキスト</p>

h3 + p { ... }

<p>テキスト</p> ←これ

例

p.note { ... }

<p>テキスト</p>
<p>テキスト</p>
<p class="note">テキスト</p> ←これ

p.note { ... }

<p class="note">テキスト</p> ←これ

スタイル指定の優先度

後から書いた方が優先
インラインで書いた方が優先
詳細度の高い方が優先 (#(id)100ポイント、.(class)10ポイント、タグ 1ポイント)
!important指定が最優先

h1 { color: green !important; } //最優先
section#main h1 { color: yellow; } //(1+100+1)ポイント
#main h1 { color: red; } //(100+1)ポイント
h1 { color: blue; } //1ポイント

h1 { color: green !important; } //最優先

section#main h1 { color: yellow; } //(1+100+1)ポイント

#main h1 { color: red; } //(100+1)ポイント

h1 { color: blue; } //1ポイント

CSSの優先順位～CSSテクニック～
http://www.stylish-style.com/csstec/base/order.html

色の指定

名前で指定する red, gree, blue
rgb値で指定する rgb(255,0,255)
16進数で指定する #00f, #ff0000

CSSを書く場所

CSSの書き方

セレクタの種類

スタイル指定の優先度

色の指定

関連記事