CSS 3知識点まとめ
3287 ワード
1.background-origin:背景画像の位置決め領域を規定する
値
説明
padding-box
バックグラウンドイメージの内側余白に対する配置(既定値)
border-box
背景画像の枠に対する位置決め【枠の左上隅を参照して位置設定を行う】
content-box
背景画像のコンテンツ領域に対する位置決め【コンテンツ領域左上隅を参照して位置設定を行う】
2.background-clip:背景を規定する描画領域
値
説明
border-box
背景を枠箱の位置にカットします(背景画像をコンテナ全体に表示します)(デフォルト)
padding-box
背景を内マージン領域にカットする【背景画像を内マージン領域(コンテンツ領域を含む)に表示する】
content-box
背景がコンテンツ領域にカットされる【背景画像をコンテンツ領域に表示する】
3.background-size:背景画像のサイズを指定
値
説明
cover
背景画像を十分に大きく拡張して、背景画像が背景領域を完全に覆うようにします.背景画像の一部が背景位置決め領域に表示されない場合があります.
contain
画像画像画像を最大サイズに拡張し、幅と高さがコンテンツ領域に完全に適応するようにします.
4.ボーダー、シャドウ
ツールバーの
説明
box-shadow
箱の影
border-image
外枠画像
text-shadow
テキストシャドウ
5.CSS 3新特性のセレクタ
1)属性セレクタ
セレクタ
説明
[属性名=値]
一致属性が値に等しい
[プロパティ名]
対応する属性の一致
[属性名^=値]
値で始まる
[属性名*=値]
値を含める
[属性名$=値]
値で終わる
2)構造擬似クラス選択器
セレクタ
説明
:first-child
親要素の最初のサブ要素を選択
:last-child
親エレメントの最後のサブエレメントを選択
:nth-child(n)
親要素の正のn番目のサブ要素を選択
:nth-last-child(n)
親エレメントの最後からn番目のサブエレメントを選択
備考:nの値が0 n以上の場合、あらかじめ定義された値odd[奇数の位置を選択した要素]even【偶数の位置を選択した要素】を設定できます.
nは式:an+bのフォーマットであってもよい
3)その他のセレクタ:
セレクタ
説明
:target
アンカーリンクが指し示すとセレクタがトリガーされます
::selection
マウスで選択したときのスタイル
::first-line
最初の行を選択
::first-letter
最初の文字を選択
6.グラデーション
値
説明
linear-gradient
せんけいランプ
radial-gradient
ラジアルランプ
注記:線形グラデーション:1.開始色と終了色2.グラデーションの方向3.グラデーションの範囲
background-image: linear-gradient( to right, red, blue ); 表示方向:1.to + right | top | bottom | left 2. 角度表示で一方向0 deg[下から上へグラデーション]90 deg【左から右へ】
/*ラジアルグラデーション*/background-image:radial-gradient(100 px at center,red,blue);
7.2 D変換、3 D変換transform
値
説明
translate
へんい
rotate
回転
scale
拡大・縮小
skew
けいしゃ
備考:perspective:パース、transform-style:preserve-3 d平面図形を立体図形に変換
8.遷移transition
ツールバーの
説明
transition-property
遷移アニメーションへの対応するアトリビュートの参加を設定する
transition-duration
遷移時間の設定
transition-delay
移行遅延実行時間の設定
transition-timing-function
遷移の速度タイプの設定
備考:参考https://www.cnblogs.com/afighter/p/5731293.html
9.アニメーションアニメーション
ツールバーの
説明
animation-name
@keyframesアニメーションの名前を設定
animation-duration
アニメーション時間の設定
animation-interation-count
アニメーションの実行回数を設定します.デフォルトは1
animation-timing-function
アニメーションの速度タイプを設定します.デフォルトはease
animation-direction
アニメーションが次のサイクルで逆方向に再生されるかどうか.デフォルトは「normal」
animation-fill-mode
オブジェクトのアニメーション時間以外の状態を設定する
animation-play-state
アニメーションが実行中または一時停止中かどうかを設定します.デフォルトは「running」
10.CSS 3新機能のWebレイアウト
ツールバーの
説明
flex-direction
伸縮ケースの主軸方向の設定
justify-content
主軸での要素の位置合わせの設定
align-items
要素の横軸の位置合わせを設定するには
flex-wrap
エレメントを改行表示するかどうかを設定
align-content
エレメントの改行後の位置合わせを設定
flex
親要素に対する子要素の割合の設定
値
説明
padding-box
バックグラウンドイメージの内側余白に対する配置(既定値)
border-box
背景画像の枠に対する位置決め【枠の左上隅を参照して位置設定を行う】
content-box
背景画像のコンテンツ領域に対する位置決め【コンテンツ領域左上隅を参照して位置設定を行う】
2.background-clip:背景を規定する描画領域
値
説明
border-box
背景を枠箱の位置にカットします(背景画像をコンテナ全体に表示します)(デフォルト)
padding-box
背景を内マージン領域にカットする【背景画像を内マージン領域(コンテンツ領域を含む)に表示する】
content-box
背景がコンテンツ領域にカットされる【背景画像をコンテンツ領域に表示する】
3.background-size:背景画像のサイズを指定
値
説明
cover
背景画像を十分に大きく拡張して、背景画像が背景領域を完全に覆うようにします.背景画像の一部が背景位置決め領域に表示されない場合があります.
contain
画像画像画像を最大サイズに拡張し、幅と高さがコンテンツ領域に完全に適応するようにします.
4.ボーダー、シャドウ
ツールバーの
説明
box-shadow
箱の影
border-image
外枠画像
text-shadow
テキストシャドウ
5.CSS 3新特性のセレクタ
1)属性セレクタ
セレクタ
説明
[属性名=値]
一致属性が値に等しい
[プロパティ名]
対応する属性の一致
[属性名^=値]
値で始まる
[属性名*=値]
値を含める
[属性名$=値]
値で終わる
2)構造擬似クラス選択器
セレクタ
説明
:first-child
親要素の最初のサブ要素を選択
:last-child
親エレメントの最後のサブエレメントを選択
:nth-child(n)
親要素の正のn番目のサブ要素を選択
:nth-last-child(n)
親エレメントの最後からn番目のサブエレメントを選択
備考:nの値が0 n以上の場合、あらかじめ定義された値odd[奇数の位置を選択した要素]even【偶数の位置を選択した要素】を設定できます.
nは式:an+bのフォーマットであってもよい
3)その他のセレクタ:
セレクタ
説明
:target
アンカーリンクが指し示すとセレクタがトリガーされます
::selection
マウスで選択したときのスタイル
::first-line
最初の行を選択
::first-letter
最初の文字を選択
6.グラデーション
値
説明
linear-gradient
せんけいランプ
radial-gradient
ラジアルランプ
注記:線形グラデーション:1.開始色と終了色2.グラデーションの方向3.グラデーションの範囲
background-image: linear-gradient( to right, red, blue ); 表示方向:1.to + right | top | bottom | left 2. 角度表示で一方向0 deg[下から上へグラデーション]90 deg【左から右へ】
/*ラジアルグラデーション*/background-image:radial-gradient(100 px at center,red,blue);
7.2 D変換、3 D変換transform
値
説明
translate
へんい
rotate
回転
scale
拡大・縮小
skew
けいしゃ
備考:perspective:パース、transform-style:preserve-3 d平面図形を立体図形に変換
8.遷移transition
ツールバーの
説明
transition-property
遷移アニメーションへの対応するアトリビュートの参加を設定する
transition-duration
遷移時間の設定
transition-delay
移行遅延実行時間の設定
transition-timing-function
遷移の速度タイプの設定
備考:参考https://www.cnblogs.com/afighter/p/5731293.html
9.アニメーションアニメーション
/* */
@keyframes rotate {
/* 0%*/
from {
transform: rotateZ(0deg);
}
/* 100%*/
to {
transform: rotateZ(360deg);
}
}ツールバーの
説明
animation-name
@keyframesアニメーションの名前を設定
animation-duration
アニメーション時間の設定
animation-interation-count
アニメーションの実行回数を設定します.デフォルトは1
animation-timing-function
アニメーションの速度タイプを設定します.デフォルトはease
animation-direction
アニメーションが次のサイクルで逆方向に再生されるかどうか.デフォルトは「normal」
animation-fill-mode
オブジェクトのアニメーション時間以外の状態を設定する
animation-play-state
アニメーションが実行中または一時停止中かどうかを設定します.デフォルトは「running」
10.CSS 3新機能のWebレイアウト
ツールバーの
説明
flex-direction
伸縮ケースの主軸方向の設定
justify-content
主軸での要素の位置合わせの設定
align-items
要素の横軸の位置合わせを設定するには
flex-wrap
エレメントを改行表示するかどうかを設定
align-content
エレメントの改行後の位置合わせを設定
flex
親要素に対する子要素の割合の設定