@charset "文字コード"
プロパティは親子要素間で継承の有無がある
https://www.w3.org/
CSSプロパティのInherited を確認
font-family : 記載準が優先、系統で指定も可能
color : 色名、16進数、hsl(色相、彩度、明度)
opacity : 透明度 0 ~ 1
list-style : 一括指定可能 (type, position, image)
line-height : px,em,単位指定なし(line-height - font-size /2 = 上下余白)
Vertical-align : top,midle,px等（baselineから見た、imgの位置調整）
■Cssで管理するボックスモデルの仕組み
・margin
・border
・padding
・width,height
■セレクタ詳細度(降順)
・!important : h1{ color:red !important; }
・style属性 ：h1 style="color:skyblue"
・id
・class,属性,擬似クラス
・要素,擬似要素
セラクタの詳細度は優先度の高いセレクタが複数指定されているもの
が優先される
優先度が同一であった場合は、cssの記載が後からのものが適応
■セレクタ
・クラス名 > 要素名 (クラス直下の要素)
・クラス名 要素名（クラス内の全ての要素）
・クラス名 , 要素名（クラス,要素の両者を個別指定）
■セレクタの種別
[要素名] 要素セレクタ
[#] IDセレクタ
[.]クラスセレクタ
[要素名.]要素のクラスセレクタ
[*]全称セレクタ
■属性セレクタ
属性の一致を指定するセレクタ
・a[href="#"] (完全一致)
・a[href^="#"] (前方一致)
・a[href$="#"] (後方一致)
・a[href*="#"] (一部一致)
■擬似クラス-要素の状態に基づいてスタイリング
・:hover 等
■擬似要素-要素の特定の部分をスタイリング
・要素の前後を装飾できる
h1::before{
content:'-';
}
h1::after{
content:'-';
}
・data属性と併用する場合
・h1 data-subtitle = "- maintitle"
h1::after{
content: attr(data-subtitle);
}
■複数の要素からカウント
・nth-child
子要素の中から指定できる
・nth-of-type
子要素の種別で指定
・3n
nは自然数なので3の倍率なども可能
・odd 奇数
・even 偶数
・first-child 一番上
・last-child 一番下
・not
・p:not(:last-child)
■Floatについて
要素を左右に寄せる
下の要素などに被ってしまう
clear
floatしている要素の方向と同じもの
両者のときは
clear:both;
clearはディスプレイブロック要素のみ
■ボックスモデルの種類
display : block
display : inline
display : inline-block
display : none;
左詰め
width,heightがある
左詰めだがサイズ指定可能
非表示
■px指定、％指定
％指定は親要素を参照して決まる
■overflow
overflowは中の要素がはみ出した時の処理方法
■margin
上下左右を指定できる
・左右余白を均等にする
margin-left: auto;
margin-right: auto;
※marginの相殺現象が起きる
垂直方向でmarginの重なりは
少ないほうが無かったことになる
■border
サイズ,種類,色
・border-radius
枠線の丸み
・指定
時計回り,上 左右 下,上下 左右
■border込みでboxサイズ調整
・box-sizing: border-box
■影
・box-shadow
引数
本体から横、縦の移動数
ぼかし具合
拡大px数
カラー
・text-shadow
拡大の引数がないので注意
■position
・relative
static時の位置から見た相対位置
・fixed
windowの左上からの相対位置
仕様上、windowが移動しても固定位置
fixedのobjectは上下要素の作用しなくなる(無視される)
・親子作用
親要素 static
子要素 absolute
ページの左上を起点に子要素が配置される
親要素 relative
子要素 absolute
親要素を起点に子要素が配置される
■複数のクラスを持つオブジェクト
・cssで後から記述されたものが優先(同プロパティ時の優先順位)
■Z数値
・初期値 0
・数値が多きものほど、後から描画される
■list-style-type
circle,lower-alpha,none
リスト時の表示方法
〇とかabcとか
・一括指定も可能、typeとimageの場合はimage優先
初期値はdisc outside none(無記入の場合)
個別設定後に一括設定をすると、同プロパティは
後から記載したものが優先されるので注意
list-style: circle, inside,url(../img/icon.png);
■Verticle-alignの仕組み
文中のimg画像は、小文字aに合わせた
baselineを下限として調整される
下限を元に画像位置を調整する為のプロパティ
top,bottom,middle
5px,-5px ベースラインからの差分を表す