自分用の備忘録
基本の形
@charset "UTF-8";
セレクタ{
プロパティ:値
}
セレクタ別指定の仕方
要素名{}
.class名{}
# id名{}
セレクタ1 > セレクタ2{} /*子セレクタ*/
セレクタ1 セレクタ2{} /*子孫セレクタ*/
セレクタ1, セレクタ2{}/*複数の要素に*/
セレクタの優先順位
1:!important
2:タグのstyle属性
3:idセレクタ
4:classセレクタ
5:要素セレクタ
6:全称セレクタ *{}ってやつ
7:ブラウザ初期値
設定
-
backgroud:背景 - 例
backgroud:url(../img.jpg) no-repeat center center/cover -
background-color:背景色 -
border-bottom:下線 -
color:文字色 -
display:表示形式 - block
-
font-family:字体 -
font-size:文字サイズ - rem
- px
-
font-weight:文字の重さ -
left:左の位置 -
line-height:行の高さ。1.0とか2.0とか margin-
margin-bottom:下の外余白 -
max-width:最大幅の指定。 -
padding:内余白 -
position:要素の位置 -
static:初期指定。特に位置指定なし。 -
relative:staticを指定したときの位置が基準位置。 -
absolute:親要素がstatic以外の時に親要素の左上が基準になる。 -
fixed:基本はabsoluteと同じだけど。スクロールしても固定される。 -
text-align:文字揃え -
top: 上の位置 -
transform:要素の位置を移動。 -
translate(0,-50%):元の位置から要素の高さ50%分上に移動 -
width:幅 - px
- %
-
z-index:要素を重ねて表示する際の優先順位を指定。数字大きい方が上。