HTML5+CSS3の新規コンテンツまとめ-htmlチュートリアル-php.cn

HTML5+CSS3の新規コンテンツまとめ

零到壹度

リリース： 2018-03-24 10:02:56

オリジナル

1730 人が閲覧しました

H5+C3と言えば色々ありすぎると思いませんか?今日はまとめてみました。

CSS3 セレクターとは何ですか?
属性セレクター、擬似クラスセレクター、擬似要素セレクター。

CSS3 の新機能は何ですか?
1. カラー: RGBA、HSLA モードを追加
2. テキストシャドウ (text-shadow、)
3. ボーダー: 角丸 (border-radius) ボーダーシャドウ: box-shadow
4.
5. 背景:background-size は背景画像のサイズを設定します。background-origin は背景画像の原点を設定します。
background-clip は背景画像のトリミング領域を設定します。「,」で区切って複数の背景を設定できますアダプティブレイアウト用
6. グラデーション: 線形グラデーション、放射状グラデーション
7. トランジション: アニメーションを実現できます
9. CSS3 で導入された唯一の疑似要素は :selection です。メディアクエリ、複数列レイアウト
11. 境界画像
12.2D 変換: 変換: 変換(x, y) 回転(x, y) 傾き(x, y) スケール(x, y)

CSS3 新しい疑似クラスとは何ですか?

:first-child は要素の最初の子要素を選択します; :last-child は要素の最後の子要素を選択します; :nth-child(n) は要素の子要素の 1 つ以上の特定の要素を選択します。例: p:nth-child(3): 3 番目の要素は p 要素でなければなりません。そうでない場合は無効になります

:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/ 
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数
:nth-child(n) //就是所有选择的元素
“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。

ログイン後にコピー

:nth-last-child() は、最後の子から数えて、要素の 1 つ以上の特定の子要素を選択しますこの要素の要素
:nth-of-type() は指定された要素を選択します
例: p:nth-of-child(3) は 3 番目の p 要素を選択します

:nth-last -of-type()最後の要素から数えて、指定された要素を選択します。
:first-of-type は、上位の要素の下にある最初の同様のサブ要素を選択します。
:last-of-type は、上位の要素を選択します。同じタイプの最後の子要素を選択します。 :only-child は、親要素の唯一の要素である要素を選択します。

:only-of-type は、親要素と同じ型の唯一の子要素である要素を選択します

: 要素にはコンテンツがありません。 selected by empty
:not() セレクターに一致しない要素は、フォームコントロールの無効状態を制御する特定の要素
:enabled、:disabled 以降を除くすべての要素です。
:チェックすると、ラジオボタンまたはチェックボックスが選択されます。
::first-line は要素の最初の行を選択します
::first-letter はテキストブロックの最初の文字を選択します
::before と ::after は主に要素の前後にコンテンツを挿入するために使用されます。最もよく使われるのは、フロートをクリアすることです。HTML5 の新機能と削除された要素は何ですか? HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?

新機能:

1. ドラッグアンドドロップ API

2. より優れたセマンティクスを備えたコンテンツタグ (ヘッダー、ナビゲーション、フッター、サイド、記事、セクション)

3. オーディオおよびビデオ API (オーディオ、ビデオ)

4キャンバス API

5. 地理位置情報 API
6. ローカルオフラインストレージ localStorage はデータを長期間保存します。ブラウザを閉じると、セッションストレージデータは自動的に削除されます。 8. フォームコントロール、カレンダー、日付、時刻、電子メール、URL、検索 9. 新しいテクノロジー Webworker、WebSocket、地理位置情報

HTML5 の新しいタグのサポート:

* ドキュメントによって生成されたタグによる IE8/IE7/IE6 のサポート。 createElement メソッド、
この機能を使用すると、これらのブラウザで HTML5 の新しいタグをサポートできるようになります。
ブラウザーが新しいタグをサポートしたら、タグのデフォルトのスタイルを追加する必要もあります:
* もちろん、最良の方法は、成熟したフレームワークを直接使用することです。最もよく使用されるフレームワークは html5shim フレームワークです
。

以上がHTML5+CSS3の新規コンテンツまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。