セレクタってこんなに種類あったのか
a, b { ; } /* aとb */
a b { ; } /* aの下にあるbすべて */
a > b { ; } /* aの直下のbのみ */
a + b { ; } /* aの次に来るbのみ */
ab { ; } /* aようそかつbセレクタのみ */
a#b { ; } /* idがb */
a.b { ; } /* classがb */
a[b] { ; } /* aタグのうちb要素があるもののみ */
a[b="c"] { ; } /* aタグのうちb属性の値がcのもの */
a[b~="c"] { ; } /* aタグのうちb属性の値にcが含まれるもの */
擬似クラス
擬似的なクラス（クラスに対して適用）
ul li:first-child { ; } /* ulの下の初めのli */
a:link { ; } /* 未訪問のリンク */
a:visited { ; } /* 訪問済みのリンク */
a:hover { ; } /* カーソルが乗ったとき */
a:active { ; } /* クリックしたとき */
/* 優先順位気をつける */
a:focus { ; } /* フォーカスがついたとき */
擬似要素
あるクラスの値を分解し部分的にスタイルを適用
p:first-line { ; } /* 1行目 */
p:first-lettr { ; } /* 初めの1文字 */
p:before {
content: "a";
} /* 要素の前に文字列aを追加 */
p:after {
content: "b";
} /* 要素の後に文字列bを追加 */
詳細度
詳細度が高いスタイルが優先される
詳細度は
1. style=""
2. id
3. 属性/擬似クラス
4. 要素/擬似要素
の値で決まる
詳細度が同じ場合は後から宣言されたほうが強い
!importantつけると最優先
p { color: skyblue !important; }
プロパティの値
- px ピクセル
- em 親要素のx倍
- % 親要素のx%
色の指定
p { color: blue; }
p { color: #00f; }
p { color: #0000FF; }
p { color: rgb(0, 0, 255); }
p { color: rgb(0%, 0%, 100%); }
width と height
body, html{ height: 100% } /* これあるといい */
div {
height: 50%; /* heightは親要素の高さが明示的でなくてはならない */
}
padding margin
- paddingはborderの中
- marginはborderの外
初期値でbodyにmargingがある．初期化する場合
body { margin: 0; }
marginの相殺
上下でmarginが設定された場合
小さい方は無視される
listのスタイル
/*
- list-style-type: disc/circle/squire/decimal/lower-alph
- list-style-image: url('./url.png')
- list-style-position: inside/outside マーカの位置
*/
ul { list-style: disc; } /* 省略可能 */
cursor
.help { cursor: help; }
.gragme { cursor: move; }
.clickme { cursor: pointer; }
.smile {cursor: url('url.png'), auto; }
/* 画像がないときはautoにする */
backgroud
body {
backgroud-attachment: scroll; /* ついてこない */
backgroud-attachment: fixed; /* ついてくる */
backgroud: url('url.png') no-repeat; /* 省略形 */
}
disply
- 下に並ぶ要素 ブロックボックス ブロックレベル要素
- 右に並ぶ要素 インラインボックス インラインレベル要素
/*
dislplay
- block
- inline
- list-item
- inline-block
- none
*/
インラインにすると，幅と高さの指定が無効になる
inline-blockは両立できる
position
/*
position
- static 初期値 左上合わせ
- relative
- fixed スクロールしてもついてくる windowの左上から
- absolute 親要素がstaticのとき window左上から それ以外のときは親要素左上から
*/
div.item {
position: relative;
top: 10px;
left: 10px;
}
z-index
大きいほうが上
overflow
/*
overflow
- visible
- hidden
- scroll
*/
line-height､vertical-align
float
要素の配置の流れから指定した要素を外す
imageにfloat: rightをつけると 右に寄り，それ以外の要素はimageが無い様に振る舞う
floatを付けた要素には幅を指定しなければならない（推奨）
float rightした次の要素を左に回りこませない場合
clear rightする