css3コードとcssの間に違いはありますか？

異なる点: css3 は css テクノロジーのアップグレードされたバージョンです。いくつかの新しい属性とセレクターが css3 に追加されており、角丸、影、グラデーション、メディア クエリなど、Web サイト開発をより良く、より便利にすることができます。 :root」セレクターなどCSS3 には互換性の問題があり、一部の属性には「-ms-」などのブラウザ固有のプレフィックスをサポートのために追加する必要があります。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

(学習ビデオ共有: css ビデオ チュートリアル )

CSS3 は、CSS (Cascading Style Sheet) テクノロジーのアップグレード版で、1999 年と 2001 年 5 月に策定されました。 W3Cは23日、主にボックスモデル、リストモジュール、ハイパーリンクメソッド、言語モジュール、背景と枠線、テキスト効果、複数列レイアウトなどのモジュールを含むCSS3のワーキングドラフトを完成させた。

CSS の進化における大きな変化の 1 つは、CSS3 を一連のモジュールに分割するという W3C の決定です。ブラウザ ベンダーは CSS のペースで急速に革新するため、モジュール式アプローチを採用することで、CSS3 仕様の要素は異なる速度で前進できます。これは、ブラウザ ベンダーが異なると特定の機能のみをサポートするためです。ただし、ブラウザーごとにサポートされる機能が異なるため、クロスブラウザー開発も複雑になります。

CSS3 構文

CSS3 構文は、CSS の元のバージョンに基づいており、ユーザーは冗長なクラス、ID、または JavaScript を使用せずにタグ内の特定の HTML 要素を指定できます。 CSS セレクターのほとんどは CSS3 では新しいものではありませんが、以前のバージョンでは広く使用されていませんでした。クリーンで軽量なタグを実現し、構造とパフォーマンスをより適切に分離したい場合は、高度なセレクターが非常に役立ちます。タグ内のクラスと ID の数を減らし、デザイナーの保守を容易にすることができます。スタイル シート。

新しいセレクターを次の表に示します。

## で終わる E 要素と一致します。 ## ドキュメントのルート要素と一致します。 HTML (Standard Universal Markup Language に基づくアプリケーション) では、ルート要素は常に HTML##E:nth-child(n)E:nth-last-child(n) と一致します。同じ型の下から n 番目の兄弟要素と一致します E最後の要素と一致します親要素内の E 要素兄弟間の最初の E 要素と一致する要素 内の唯一の子要素である E 唯一の兄弟要素である E# と一致します同じタイプの 子を持たない要素 E 関連する URL が指す E 要素と一致します。 すべてに一致利用可能な状態にあるユーザー インターフェイス (フォーム フォーム) E element E と一致します。すべてのユーザー インターフェイス (フォーム フォーム) で無効な状態です。 要素 は選択されたものと一致しますすべてのユーザー インターフェイス (フォーム フォーム) の要素 E E 要素の部分と一致しますユーザーによって選択または強調表示されたもの 単純セレクターに一致する要素以外のすべてに一致します。 E#ユニバーサル兄弟要素セレクター E ~ FE 要素の後に F 要素を一致させる

セレクターの種類	式式	##説明
部分文字列一致のための属性セレクター	E[att ^="val"]	att 属性を持ち、値が val
	で始まる E 要素と一致します。 E[att$="val"]	att 属性を持ち、値が val
	E[att*="val"]	att 属性および val を含む値を持つ E 要素と一致します
Structural pseudo-class	E:root
	# です。 ## n 番目の子要素 ​​E
	と一致します親要素の下から n 番目の構造子要素と一致します E	##E:nth-of-type(n)
	n 番目の兄弟要素 E	##E:nth-last-of-type(n)
		E:last-child
		#E:first-of-type
	E:only-child	E:only-child
	と一致します。親要素	#E:only-of-type
		##E:empty
	と一致します要素 (テキスト ノードを含む) ターゲット疑似クラス	E:target
	UI 要素ステータス疑似クラス	E:enabled
		E:disabled
		E:checked
		E::selection
	Negative pseudo-class	E:not(s)

css3 の新機能

css3 new 角丸、グラフィック境界線、ブロック シャドウ、テキスト シャドウなどの多くの機能があり、RGBA を使用して透明効果、グラデーション効果を実現し、@Font-Face を使用してカスタマイズされたフォントを実現します。複数の背景画像、テキストまたは画像の変形処理（回転、ズーム、傾き、移動）、複数列レイアウト、メディアクエリなど。 #互換性の問題

ブラウザのメーカーは以前から CSS3 を実装していました。CSS3 は真の標準にはなっていませんが、ブラウザ固有のプレフィックスを提供しています。

• Chrome (Google Chrome): -webkit-

• Safari (Safari): -webkit-

• Firefox (Firefox)ブラウザ): -moz-

• lE (IE ブラウザ): -ms-

• Opera (Opin ブラウザ): -0-

たとえば、CSS3 グラデーション スタイルは、Firefox と Safari では異なります。 Firefox は -moz-linear-gradient を使用し、Safari は -webkit-gradient を使用します。どちらもベンダー タイプ プレフィックスを使用します。

メーカーのプレフィックス付きのスタイルを使用する場合は、プレフィックスのないスタイルも使用する必要があることに注意してください。これにより、ブラウザーが接頭辞を削除して標準の CSS3 仕様を使用する場合でも、スタイルは引き続き有効になります。例:

#example{
  -webkit-box-shadow：0 3px 5px#FFF;
  -moz-box-shadow：0 3px 5px#FFF;
  -o-box-shadow：0 3px 5px#FFF;
  box-shadow：0 3px 5px#FFF;/*无前缀的样式*/
}

CSS3 ブラウザの互換性:

##プログラミング関連の知識の詳細については、次のサイトを参照してください: プログラミングビデオ! ！

以上がcss3コードとcssの間に違いはありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。