CSS基本

- aタグは[]を使う

#属性セレクタ

- class~="search" クラスのにサーチがあるもの

#擬似クラス
- li:first-child {} リストの中で一番上にあるものを指定

##リンクに関するもの
- a:link　未訪問のリンク
- a:visited　訪問済みのリンク
- a:hover　カーソルが乗っているリンク
- a:active　クリックした時のリンク
    - この順序は守る！！！
- input:focus　　フォーカスが当たった時使う

#擬似要素
ある要素の一部を指定する時に使う

- p:first-lineでpタグの一行目に擬似要素
- p:first-letterでpタグの一文字目
- p:before { content: } p要素の前に加える
- p:after { content: }　p要素の後に加える

#セレクタの詳細度

- 1.style
- 2.id
- 3.属性/擬似クラス
- 4.要素/擬似要素

    - styleが一番優先度が高い
    - 詳細度が高いほど優先される
    - !importantをつけると、styleよりも優先される

#値プロパティの指定

- 長さ
    - px　ピクセル
    - em　親要素に対して相対的
    - %　親要素に対して相対的
- 色
    - 名前
    - 0-f, 00-ff, 0-255, 0-100% rgb（）で指定する

#ボックスモデル

- height　たて
    - 親要素を指定する必要がある
    - body, html {height: 100% }
- width　横
- padding　余白部分
- border　境界線
- margin　境界線の外側

##borderに関するプロパティ

- border-color: 
- border-width:
- border-style: solid / botted / dashed / double / inset / outset 　線の種類
- border-top,left,bottom,right　左右上下のみの指定

##paddingに関するプロパティ

- padding-top
- padding-right
- padding-bottom
- padding-left
- padding:一つの数字->all
- padding:二つの数字-> top/bottom right/left
- padding:三つの数字-> top right/left bottom
- padding:四つの数字-> top right bottom left　の順に決まる
    - ブラウザは初期設定でmarginを持ってるから、body { margin: 0;}にするとぴったりになる

##marginの相殺

- paddingと値の指定方法は同じ
- 二つのボックスの上下値は大きい方が反映される＝相殺
    - ボックス１のしたが３０pxでボックス２のうえが10pxの場合、30pxが優先される

##textに関するもの

- color:　色の指定
- font-size:　pxを使う
- font-family:... , ...;　フォントの指定
- font-weight: bold/normal　太字に指定
- text-align: right/center/left;　行揃えの指定
- text-decoration: underline/line-through/none　下線・打ち消し線

##list-styleに関するもの

- list-style-type: disc/circle/square/decimal/lower-alpha
    - ●/○/連番（１、２、３。。。）/アルファベット順
- list-style-image:　画像を使う。優先度高い
- list-style-position: inside/outside　マーカーが内か外か
- lisy-style:　一気に指定することができる

##cursorに関するもの
カーソルの形状を変えるもの

- help ?
- move 矢印マーク
- pointer　指のマーク
- url{(画像ファイルの名前),auto　;}
    - autoは設定しておく

#背景に関するもの

- background-color:
- background-image: url()
    - イメージは続く
- background-repeat: no-repeat
    - 続くイメージを続かなくする
- background-repeat: repeat-x(y)
- background-position: ...px,...px
- background-position: top center;
- background-attachment: scroll;スクロールするとついてくる
- background-attachment: fixed;　スクロールしても固定される
- background:で一気に指定可能

#displayに関するもの

- 下に積み重なっていくh、pタグ
- 　左に増えていくa、span タグ
- 　下 ブロックボックス、ブロックレベル要素
- 　左　インラインボックス、インラインレベル要素
- 　配置の方法を変えるのがdisplayプロパティ
    - 　display:
    - 　block
    - 　inline　幅と高さの指定は無効化　左に続く
    - 　list-item
    - 　inline-block　幅と高さが有効化
    - 　none　要素が非表示になる
- 　table
    - 　divがいる
    - 　display-table;
    - 　.box {display: table-cell; }
    - 　.row {display: table-row; }

##positionで位置の調整

- static 初期値
- relative; 初期値からズラす　top, leftを使う
- fixed; スクロールしても位置を固定する
- absolute; 親要素からどれくらいずれるか・・・？

##z-indexとoverflow

- z-index;　要素の重なり順を指定するために使う
    - 通常は後ろに書いたものが前に出てくる
    - position:static要素以外のみ有効
    - 値が大きいほど上にくる
- overflow; ブロック要素の中のコンテンツがその幅と高さを超えて表示される時に使う
    - visible　全部表示する
    - hidden　飛び出てる分は消える
    - scroll　スクロールできるようになる

##line-heightとvertical-align

- line-heightは行の高さを調節するもの
- vertical-alignは親要素のベースラインが初期　行ボックスの上かした、aの中央を通るライン

##floatとclear

- float　指定した要素を通常から切り離し、左右に寄せるもの　幅を指定するのが決まりwidth！
- clear　フロートを解除してある部分を切り離したい時に使う
    - clear: right; left; both;のどれか