- 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;のどれか