CSS再勉強。参考サイトが助けになる。
CSSの基本－HTMLクイックリファレンス
http://www.htmq.com/csskihon/index.shtml
CSSを書く場所
- HTMLタグ中にstyle属性として書く
- ヘッダ中に<style>タグを使って書く
- 外部ファイルに書く <link ref=”stylesheet” href=”default.css”>
CSSの書き方
|
1 2 3 |
セレクタ { プロパティ: 値; } |
例
|
1 2 3 4 |
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要素であるものだけ指定
例
|
1 2 3 4 5 6 |
h3 + p { ... } <h3>見出し</h3> <p>テキスト</p> ←これ <p>テキスト</p> <p>テキスト</p> |
例
|
1 2 3 4 5 |
p.note { ... } <p>テキスト</p> <p>テキスト</p> <p class="note">テキスト</p> ←これ |
スタイル指定の優先度
- 後から書いた方が優先
- インラインで書いた方が優先
- 詳細度の高い方が優先 (#(id)100ポイント、.(class)10ポイント、タグ 1ポイント)
- !important指定が最優先
|
1 2 3 4 |
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