以前学習したHtml+css3の復習ノートを整理します。

1. html5の新機能

一般的に使用されるセマンティックタグ: ナビフッターヘッダーセクションマーク

関数タグ video audio iframe Canvas (キャンバスと描画機能)

新しいタイプを入力: URL/数値/範囲/日付(日付、月、週、時刻など)/検索/色

2、css3

1 ボーダー

border-radius: 異なる割り当て方法;

box-shadow:10px 10px 5px red;

border-image: 課題の内容;

border-image-source ボーダーで使用される画像のパス。

border-image-slice 画像の境界線が内側にオフセットされます。

border-image-width 画像の境界線の幅。

border-image-outset 境界画像領域が境界を超える量。

境界線-画像-繰り返し

画像の境界線を繰り返すか、丸めるか、伸ばすか。

注: IE9+はborder-radiusとbox-shadowをサポートしています。

IE11、Firefox、Opera 15、Chrome、Safari 6 は、border-image 属性をサポートします。

2 テキスト

text-shadow:5px 5px 5px yellow (各位置の意味)

3フォント 他のフォントも紹介

@font-faceの使い方

@font-face{

フォントファミリー:"巴泽黑";

src: url(Chen Daiming Chalk Style デモ バージョン 2.otf);

}

4 つのアニメーション

transform:translate(px)/rotate(度)/scale(2)/skew()/matrix()

注: IE10、Firefox および Opera のサポート 変換 属性

Chrome と Safari にはプレフィックス -webkit- が必要ですInternet Explorer 9 にはプレフィックス -ms-

が必要です

5 アニメーション 3D

transform-origin を使用すると、変換される要素の位置を変更できます。 課題にはキーワードを習得する必要があります!

transform-origin：x軸y軸z軸。可能な値:

transform-style は、ネストされた要素が 3D 空間でどのように表示されるかを指定します。 視点!!!

backface-visibility は、画面に向かっていないときに要素が表示されるかどうかを定義します

背面の可視性: 非表示;

6 過剰なトランジション

備考:

IE10、Firefox、Chrome、Opera は、transition 属性をサポートしています。

Safari には接頭辞 -webkit- が必要です。

注: IE9 以前のバージョンは、transition 属性をサポートしていません。

トランジションの短縮属性。1 つの属性に 4 つのトランジション属性を設定するために使用されます。

transition-property は、トランジションを適用する CSS プロパティの名前を指定します。

トランジション期間は、トランジション効果にかかる時間を定義します。デフォルトは 0 です。

transition-timing-function は、トランジション効果の時間曲線を指定します。デフォルトは「簡単」です。

さまざまな属性値を知る必要があります。

トランジション遅延は、トランジション効果がいつ開始されるかを指定します。デフォルトは 0 です。

7フレームアニメーション

例:

@keyframesmyfirst

{

{背景: 赤;} から

から{背景: 黄色;}

}

8 フロー レイアウト メディア クエリ応答型

流動的なレイアウト: パーセンテージ レイアウト、すべてのサイズは親を参照、マージンとパディングは特殊です

幅を参照してください

メディアクエリ @media screen () および () レスポンシブ: ビューポート統合書き込みメソッド

インスタンスメモ:

テキストシャドウ

水平影、垂直影、ぼかし距離、影の色

テキストシャドウ: 5px 5px 5px #FF0000;

box-shadow プロパティはボックスシャドウに適用されます

box-shadow: h-shadow y-shadow ブラー スプレッド カラー インセット;

横の影の位置 縦の影の位置 ぼかし距離 影の大きさ 影の色 外側の影（最初）から内側の影を変更します

div{box-shadow: 10px 10px 5px #888888;}

transform-origin: x 軸 y 軸 z 軸 x 軸 X 軸上のビューの配置場所を定義します。

複数の列

列数:n;

列ギャップ:10px;

column-rule: 2px 実線の赤色

サイズ変更: なし|両方|水平|垂直;

horizo​​ntal ユーザーは要素の幅を調整できます。

垂直 ユーザーは要素の高さを調整できます。

div

{サイズ変更:両方;

オーバーフロー:自動;

}