css3 学習ノート_html/css_WEB-ITnose

初心者や CSS3 を一度も見たことがない人が CSS3 の主な内容をすぐに理解するのに適しています。

1.opacity ----------------------- 0 ～ 1 の値。要素全体とそのすべてのサブオブジェクトの透明度レベルを設定します。要素

2.css セレクター---------------------- http://www.w3school.com.cn/cssref/ css_selectors.asp

ここで、li:nth-child(2n+1) は選択の基本番号を表します (類推により推定できます) input:not([type="submit"]) は否定的な選択 3 を行うことができます。 html5 互換ブラウジング 古いバージョンのブラウザはタグ

<!--[if Lt IE 9 ] [removed] [removed]

4. : 1px 1px 1px 白; 右オフセット、左オフセット、ぼかしレベル (1 PX は輪郭に相当)、色

5. 余分なテキストの表示と非表示 overflow:hidden; text-overflow:ellipsis;クラスプラスオーバーフロー: 非表示; テキストオーバーフロー: 省略記号; テキストオーバーフロー: 継承;

6. 丸みを帯びた境界線の半径: 10px 10px 10px 10px (左上、右上、左下、右)下）1つの値を書くこともでき、すべての角が統一されるか、左上、右上とその対角を表す2つの値を書くこともでき、または10px/50pxを基準に角度を記述することもできます。 x 軸と y 軸のオフセットに弧を描きます

7. Shadow box-shadow:0 0 10px #666; 最初の値は x オフセット (右側を示す) です。 2 番目の値は y オフセット (上側を示す負の値にすることもできます)、3 番目の値はブラーの長さ、4 番目の値は影の色です。

8. 勾配 Linear-gradient(to right,#ff0000 50%,#007700 50%); 最初の値は、右へ、右上へ、およびその他の線形値にすることができます。後者はグラデーション カラーで、複数の値を指定できます。手動でパーセンテージを追加したり、自動的にグラデーションにすることもできます。

repeat-linear-gradient は、繰り返しグラデーションradial-gradient(50% 50%, 60% 60%,rab(75,75,255),rgb(0,0,0) );最初の値はグラデーションの原点であり、2 番目の値はグラデーションのサイズと位置です。グラデーションには rgba カラー値を使用できます

9. 複数の背景の背景画像: url(bg_flower.gif)、url(bg_flower_2.gif) 複数の URL と画像を追加できます

background -size :63px 100px; ピクセルまたは比率でサイズを制御します

background-origin:content-box; 境界線画像 border-image:url( border.png) ) 30 30 30 30 ラウンド; 数値は、境界線のスライスに切り取られる画像の幅を表します

アニメーション---------------------- -------------------------------------------------- -----------

11.2D 変換transform

transform:translate(-50%,-50%); 移動、現在の要素は左に移動します。要素の幅の半分と高さの半分を上に移動します。値は正または負の値で、ピクセルまたはパーセンテージを指定できます (値を指定する場合、デフォルトは x です)。 、現在の要素 時計回りに回転する角度。 (デフォルトは中心点を押すことです)

Attachment:transform-orgin:top left; 変換の中心点を設定します。px、rem、em、cm など、またはパーセンテージを指定できます。

transform:scale(1.25,0.8); 値の場合、デフォルトの x と y はこの比率に従います。設定、scaleX、scaleY

transform:skew(10deg,13deg); は、座標軸に沿った傾きの度合いです。 、skewY

12.3 D 変換

transform:translate3D (100px, 100px, 100px); X、Y、Z 移動

transform: 回転 X(15deg); >

transform:rotate3D(1, 0, 1, 15deg); 3D 回転、最初の 3 つは 3 次元平面のベクトル値を表し、次にその平面に沿って回転します

transfrom:パースペクティブの値は、何かが表示される角度であるピクセル値に基づきます。perspective-orgin:center; この値は、変形中心と同じ値メソッドを持ちます。 > transfrom-style:preserver-3d ; 複数の要素が 3D 変形される場合、情報の損失や隠蔽は発生しません。

backface-visibility:hidden; 要素が背面を向いているときは表示されないことを意味します

13. 過度の遷移

transition-property:width;値は高さ、幅、または変換でも構いません-----必須属性

transition-duration: 0.5 秒、デフォルトは 0 --必須属性

transition-timing-function: 嘘つき; 過剰な速度、デフォルトは簡単; リニア (同じ速度)、イーズ (徐々に遅く)、イーズイン (加速)、イーズアウト (減速)、 in-out (加速してから減速)

transition-delay: 1s; 遅延時間

は、transition: opactity 3s eas-in 1s、opactity 3s eas-in 1s と省略できます。属性 ',' 別に、属性の順序は、属性値、遷移時間、レート、遅延時間、

14. アニメーション アニメーション

アニメーション名:cc; >animation-duration :1.5s; アニメーション期間

animation-iteration-count:infinite; 再生回数、デフォルトは 1、無限ループは無限です。遅延時間 ;

アニメーション タイミング関数: リニア、リニア (同じ速度)、イーズ (徐々に遅く)、イーズイン (加速)、イーズアウト (減速)、イーズイン アウト (加速してから減速)-- -- 属性は、transition

animation-direction:alternate; と同じです。再生終了後のループ再生の順序です。デフォルトは、先頭からループします。 %-----0 % 最初から最後まで、最後から最初まで。

animation-fill-mode:none; この属性は、アニメーションの再生前または再生後にアニメーション効果が表示されるかどうかを指定します。アニメーションが完了すると、最後の属性値 (最後のキーフレームで定義されたもの) が保持されます。 ）。

backwards: アニメーションがアニメーション遅延で指定された期間表示される前に、開始プロパティ値 (最初のキーフレームで定義) を適用します。 Both: 前方フィル モードと後方フィル モードの両方が適用されます。

アニメーション:cc 1.5 秒イーズイン 3 秒 25 と省略できます。複数のアニメーションがある場合は、それらを分離します。

レイアウト----------- -------------------------------------------------- ------------------------

15. 複数列レイアウトの列

列数:3 ; 指定された要素 分割する列の数。

column-width:200px; 要素がこの幅に従って列に分割されることを指定します。

column-gap:10px;; 列間の距離

column-rule:3px Solid #666; 列間の線は、border と同じ属性を持ちます。 -fill:balance; 充填方法、デフォルトは自動で、左から右に一度充填されます。バランスは各列の基本コンテンツがほぼ充填されることを意味します。

column-span:3;列に要素を設定できます。

16. 流体レイアウト フレックスボックス

display:flex; レイアウト モデルは

flex- に設定されます。フロー:行ワープ配置モード、行は水平、列は垂直です。ワープは自動ラインラッピングです。

order:1; サブ要素の順序を制御します (属性はサブ項目に記述されます)

justify-content:center; はい、フレックス。 -start, flex -end,center,space-between,space-around,

algin-items:center; 現在の方向の側軸に沿って子を配置します。値は次のとおりです。 flex-start、flex-end、center、baseline、stretch (algin-self はサブ項目属性です。サブ項目に使用すると、algin-items の値が書き換えられます)

flex:1 1 200px; (属性は子の上に記述されます) 最初のパラメータは親要素の残りの割合を比例配分し、2 番目のパラメータは要素がオーバーフローしたときに生成される値を比例配分します。次に、子はその値を減算します。 3 番目は要素の値です。

17. グリッドレイアウト Grid

display:grid; レイアウトモデルを Grid

grid-columns:10rem 40rem 30rem に設定します。 10rem 40rem 30rem;

grid-rows:1fr 1fr 1fr 1fr; は 4 行に設定され、コピーの合計数はすべての値の合計になります。 >サブ要素の属性

grid-column:1; 子要素はどの列を選択します。

grid-column-span:2;スパンする列;

Grid-row:2; 子要素が選択する行の数、および現在の行の開始;

18.wrap-flow:both をクリアします。

auto のデフォルト値が使用されると、周囲のテキストは除外領域を囲みません。まるで除外が存在しないかのように、除外要素が低くなります。

start は、コンテンツが除外領域の開始側を囲みますが、除外領域の終了側には空のコンテンツが残ることを意味します。

end は、コンテンツが除外領域の終了側に回り込むことを意味しますが、除外領域の開始側には空のコンテンツが残ります。

両方は、コンテンツが除外の先頭と末尾の周囲 (つまり、周囲) にラップされることを意味します。

maxinum を指定すると、除外された項目が最も多く入る側にコンテンツが折り返されます。

clear は、コンテンツが除外領域の上部と下部の辺のみを回り込むことができ、除外領域の左側と右側 (開始と終了) が空のままであることを意味します。

warp-margin:10px; 他の残りのコンテンツと除外要素との間のマージンを指定します。

warp-padding:10px; 他の残りのコンテンツと除外要素の間のパディングを指定します。

19. メディアクエリ

@media all and(min-width:400px)