[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;
}

セレクタの種類

• * – 全てのセレクタ
• 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>

例

p.note { ... }

<p>テキスト</p>
<p>テキスト</p>
<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ポイント

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

色の指定

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