ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5+CSS3の新規コンテンツまとめ

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

零到壹度
零到壹度オリジナル
2018-03-24 10:02:561703ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。