CSS3 キーの概要_html/css_WEB-ITnose

CSS3重点总结
(1)兄弟选择器：2种：+、 ~
1.相邻兄弟选择器（+）：选择器1+选择器2
选择"选择器1"相邻的后一个兄弟"选择器2"
强调：选中的是自己相邻的下一个元素，不是自己

2.通用兄弟选择器（~）：选择器1~选择器2
选择"选择器1"之后的所有兄弟"选择器2"
+ 和~的区别：
（1）+只选相邻一个，~选之后所有
（2）+要求必须相邻，如果相邻元素不满足+后选择器要求则不选
（3）~跳过之后所有不满足选择器条件的元素。

何时使用兄弟选择器：只要选兄弟元素，就用兄弟选择器

(2)属性选择器：根据元素现有的属性和属性值特征，选择元素
何时使用属性选择器：如果现有属性已经可以区分元素
语法：只要使用属性选择器，必须用[]
1.元素[属性] : 匹配具备 属性的 指定元素
例如： p[id] : 匹配具备id属性的p元素

2.元素[属性1][属性2] :
p[id][class] : 匹配出所有即具备id属性，又具备class属性的p元素

3.元素[属性=值] :
input[type="text"] : 匹配type的值为text的input元素

4.元素[属性~=值] :选择属性名中包含指定单词的元素
input[class ~= second] :
选中

~= : 包含指定的数据（独立）
= : 只有指定的数据

5.[属性名^="关键字"]：选择以"关键字"开头的属性值

6.[属性名*="关键字"]：选择包含"关键字"的属性值

7.[属性名$="关键字"]：选择以"关键字"结尾的属性值

(3)伪类选择器：
(1)元素状态伪类(多数应用在表单元素上):主要匹配元素的禁用、启用、选中状态
:disabled 匹配每个被禁用的元素
:enabled 匹配每个已启用的元素
:checked 匹配每个被选中的元素(只用于单选按钮和复选框)

(2)目标伪类:突出显示活动的HTML锚，用于选取当前活动的目标元素
:target
何时使用:需要跳转到的锚点位置元素发生样式变化

(3)结构伪类:主要从元素的结构(层级结构)上来进行划分的
:first-child 匹配属于其父元素的首个子元素
:last-child 匹配属于其父元素的最后一个子元素
:empty 匹配没有子元素(包含文本、换行、空格)的元素

这是一个段落

非empty

empty
:only-child は、その親要素に属する唯一の子要素と一致します
:nth-child(n) セレクターは、その親要素に属する n 番目の子要素と一致します

(4) 否定疑似クラス: すべて選択要素を満たさない条件
:not(selecotr)

(5) 擬似要素セレクター: 主に要素内のテキスト内容を照合するために使用されます (通常、植字、最初の文字の強調表示などに使用されます)
:first-letter : 指定されたセレクターを選択
の最初の文字 :first-line: 指定されたセレクターの 1 行目を選択
::selection: ユーザーが選択した部分と一致

(4) コンテンツ生成: コンテンツの一部をCSS による要素の前または後ろ
:before :Current 要素コンテンツの開始位置の前
:after: 現在の要素コンテンツの終了位置の後

使用方法 (2 ステップ):
1. 最初の使用: before または :after でコンテンツを生成する位置を選択します
2. content 属性を使用して選択します 場所がコンテンツを生成した後
、content 属性の後に 3 種類のコンテンツを続けることができます: テキスト、画像、カウンター
通常text: content: "prompt"
Picture: content: url (path)
Counter: content: counter (counter name)
例:
セレクター: before{content:content} - 元のコンテンツの先頭に生成されます
セレクター: after{content:content} - 元のコンテンツの最後に生成
セレクター: before/after{content:counter(カウンター名)}

(5) Counter: ルールに従ってシリアル番号を生成できる属性
方法使用方法 (3 ステップ):
1. カウンタ属性を作成します: カウンタ範囲を使用して親要素上で
親要素 {counter-reset: カウンタ名}
2. カウンタの設定ステップ: カウンタを使用して要素上で
現在の要素 {counter-increment: カウンタ名ステップ番号}
3. カウンタを使用してシリアル番号を生成します:
セレクター: before/after {content: counter (カウンタ名)}

カウンタの実行: デフォルトでは 0 から開始します。ステップを追加し、その数値を取得します

ベンダー プレフィックス: 特定のブラウザ メーカーによって特定の属性に追加された、このメーカーに対応するプレフィックス。
-moz- Firefox
-webkit- Chrome Safari
-ms- IE

(6) 複数の列
1. 列を分ける: テキストを複数の列に分割します
列数: 要素が含まれる列の数を指定します2. 列ギャップ: 列間の距離を設定します
列ギャップ: 間隔
3. 列ルール: 列間のギャップ線を設定できます。 列ルールでは、ギャップ線のスタイル、色、太さを設定できます。 column-rule: サイズ スタイル カラー;
column-rule-width:
column-rule-style:
column-rule-color:
4. ブラウザーの互換性
1. IE10 および Opera ブラウザーは複数列属性をサポートします
2. FireFoxプレフィックス -moz-
-moz-column-count:
-moz-column-gap:
-moz-column-rule:
を使用する必要があります。 3. Chrome と Safari
-webkit-column-count:
-webkit- column -gap:
-webkit-column-rule:

(7) CSS ハック: さまざまなブラウザー用に書かれた CSS コード (ブラウザーの互換性によって引き起こされる問題)

ブラウザーには Web ページを解析する 2 つのモードがあります:

1. 標準モード: 厳密XHTML または HTML4.0 標準に従って Web ページを解析します
Web ページが標準に準拠している限り、表示効果は異なるブラウザでも一貫している必要があります。
2. 混合モード: ブラウザーのルールに従って Web ページを解析します
従うべき標準はなく、異なるブラウザーでの同じ Web ページの読み込み効果に一貫性がない可能性があります

ブラウザーが標準モードを使用することを指定する方法解析: DOCTYPE

ブラウザの互換性 問題

1. マージンとパディング

ie6 のデフォルトのマージンが大きすぎます
解決策: body{margin:0px;}
2. 中央揃えのレイアウト
ie6 以前のバージョンのブラウザ: text-align によって完了:center; 親要素の中央揃え
高バージョンのブラウザ (ie6、ie7+、chrome、firefox、opera、safari): 現在の要素のマージンを通じて実装されます。つまり、margin: 0 auto; 3. 要素の高さと内容
ie6: 要素の高さは少なくともコンテンツを含みます
その他: 要素の高さがコンテナを超えます
解決策: オーバーフロー属性
4. 子要素の上マージンを設定する場合
IE6: 通常表示
その他のバージョン: 子要素の上マージンは、親要素の上マージンと見なされます
解決策:
1. 親要素の境界線を設定します
2. 親要素のパディングトップを設定します

5. HTML ヘッダー参考ハック
HTMLの条件コメントで完成

IE6:


IE6 以降のバージョン:
< !--[if gt IE 6]>

1. Transform (transform): 急速な変化

2d

(1) Rotation: 基準原点 (transform-origin) を中心に、指定された角度を回転します。デフォルトは時計回りです

構文:transform:rotate(ndeg)
n が正の場合、時計回りに回転
n が負の場合、反時計回りに回転

基準原点: デフォルトは要素の中心点、座標 (幅/2、高さ/2) です
座標原点: 要素の左上隅要素の座標は (0,0) です

基準原点を変更します (3 つの方法):
1.transform-origin: x 座標 y 座標 (x は右を指す場合は正、y は下を指す場合は正です)

2.transform-origin:右下

3.transform-origin:100% 100%

注: 回転は要素を回転するだけでなく、描画座標系の方向も回転します。他の変形と組み合わせて実行する場合、回転が最初に来ると、座標軸に沿って他の変形に影響を与えます。
解決策: 変換と一緒に実行する場合は、最後の関数に回転を置くのが最善です
例:transform:translate (50px, 0px) robot (30deg);
Translation は影響を受けず、水平方向に移動します
transform:rotate ( 30deg) Translation(50px,0px);
Translation が影響を受け、回転した X 軸に沿って右下に 50px 移動します

(2) Displacement: 座標方向に沿って指定された距離を移動します
構文: Translation(x-軸の移動距離、y 軸の移動距離);
x: 正が右、負が左
y: 正が下、負が上

transform:translate(50px,50px);
注: ディスプレイスメントは、他の 2 つの要素の位置をカバーしますが、周囲の要素をカバーする可能性があります
他の 2 つの一方向変位:
translationY (距離);

(3) Scale: 指定された座標軸上の座標を指定された倍数でスケールします
構文:transform:scale (Multiple)—均等スケーリング
乗数: 0 ～ 1、ズームアウト > 1、ズームイン。
変換:スケール (x 軸のスケーリング倍数、y 軸のスケーリング倍数)
強調: スケーリングは参照原点の影響も受けます。
他の 2 つの一方向スケーリング: スケール軸の傾き
トランスフォーム:skew(ndeg,ndeg);—— x 軸に沿って、同時に y 軸が傾きます

x 軸方向: 正の角度が傾きます。左、負の角度は右に傾きます

y 軸方向: 正の角度は左上に傾きます 、負の角度の左側は下に傾きます

強調: 傾きは基準原点の影響を受けます。デフォルトの参照原点は要素の中心点です。
他の 2 つの一方向傾斜: skewX(ndeg)

skewY(ndeg)

3d

パースペクティブ属性: 想定される人間の目の位置から投影面までの距離を設定します

使用方法:親要素

参照 デバイスの互換性:

Chrom、Safari: -webkit-perspective

Firefox: -moz-perspective

座標軸: 3 x 軸、y 軸、z 軸
x 軸は右が正です、y軸は下向きが正です
z軸が観測者に近い方向を正とします
(1) 3D回転: 指定された*座標軸*を円の中心として指定された角度で回転させます
: 変換:回転X(ndeg)

変換:回転Y(ndeg)

変換:回転Z(ndeg)
nは正、時計回り、nは負、その後反時計回り

(2) 3D 変位: 特に Z に沿った移動を指します。軸
構文: 変換:translate3d (x, y, z) - 3 方向の変位
TranslationZ(z)——Z 変位に沿ったのみ

(3)3D スケーリング: 特に任意の座標軸に沿ったスケーリングを指します

構文: transform:scaleZ (multiple)——z 座標 x の倍数を指定します
強調:scale が他の変形と異なる場合 関数は一緒に使用されるため、最初に配置する必要があります。

x y z

正の右下前方
負の左上後方

2. トランジション: *開始スタイル*から、指定された *時間*後、ゆっくりと *終了スタイル*に移行します
トランジションの 4 つの要素

(1 ) 遷移する属性名を設定するために特に使用されます

構文:transition-property: 属性名 1, 属性名 2 ...;

(2) 期間を設定するために特に使用されます
構文:transition-duration:n1s,n2s ...;

(3) 速度変更タイプを設定するために特別に使用されます

構文:transition-timing-function:

代替値:ease: 最初に加速し、次に減速します (デフォルト値)
線形: 均一な変化

ease- in: 加速

easy-out: 減速
easy-in-out: 最初に加速し、次に減速

(4) 特に遅延開始時間の設定に使用されます
構文:transition-delay:n1s,n2s ...;

トランジションの簡易版では、複数の属性のトランジションを同時に設定することもできます

トランジション: 属性名 1 持続速度タイプ [遅延]、

属性名 2 持続速度タイプ [遅延]、
...

3. ) - キーフレーム アニメーション
キーフレーム: アニメーション実行中の特定の位置におけるオブジェクトの特別な状態
キーフレーム アニメーション: 連続キーフレームを使用して、オブジェクトの連続状態変化を制御します
キーフレーム アニメーションを使用する場合:

連続、通常のトランジション - トランジショントランジション

不規則な連続変化 - アニメーションアニメーション

実装方法: 2 ステップ:
1. キーフレームを定義:
@keyframes アニメーション名 {
from{start style}

n%{ アニメーションの進行状況が n% に達したときのスタイル}

。 ..
to{End style}
}
2. アニメーションのトリガー:
アニメーション: アニメーション名 継続時間 スピード タイプ

使用方法: 非疑似クラス選択ブラウザーで記述し、ページがロードされた後に自動的にトリガーされます
疑似クラス。疑似クラスがトリガーされた場合にのみ再生されます

ブラウザの互換性: @keyframes アニメーション Firefox IE

@-webkit-keyframes -webkit-animation Chrome Safari

@-o-keyframes -o-animation Opera

アニメーションのサブプロパティ:
1.animation-name: @keyframes (アニメーション) 名
2.animation-duration: アニメーションの継続時間
3.animation-timing-function: アニメーションの速度関数
4.animation-delay: アニメーションの遅延時間
5. anime-iteration-count: 再生回数
値:
1. 特定の値
2. 無限 (無制限の再生)
6. anime-direction: アニメーションの再生方向
値:
1. 通常の通常再生
2交互に再生します
奇数回: 順方向再生
偶数回: 逆方向再生
7. anime-fill-mode: アニメーション再生の前後に効果を与えます
代替値:
1. none: デフォルトを変更しません動作
2、前方: アニメーションが完了した後の最後の属性ステータスを確認します
3. 逆方向: アニメーションが再生される前に、開始属性値を表示します
4. 両方
8. anime-play-state: アニメーションの再生と一時停止を制御します
代替値:
1. 一時停止: アニメーションの一時停止
2. 実行中: アニメーションの再生
使用場面:
1. 疑似クラスセレクターで使用
2. Javascript で使用

アニメーション: アニメーション名 持続時間 アニメーションメソッド 遅延時間 繰り返し回数実行終了ステータスを交互にするかどうか

代替実行: 代替: 1 回の順方向実行、偶数回の逆方向リターン
終了ステータス: 順方向: アニメーションが完了したときに最後のフレームの状態を保持