css3 は、CSS カスケード スタイル シート テクノロジのアップグレード バージョンであり、「カスケード スタイル シート 3 レベル」を意味します。css3 は、開発者が主にボックスを含むいくつかの実際的な問題を解決できるように、css2.1 に基づいて多くの機能を追加しています。モデル、リストモジュール、ハイパーリンクモード、言語モジュール、背景と境界線、テキスト効果、複数列レイアウト、その他のモジュール。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS3 は、CSS (Cascading Style Sheet) テクノロジーのアップグレード版であり、「Cascading Style Sheet Level 3」を指し、CSS2.1 に基づいて追加されています。開発者がいくつかの実際的な問題を解決するのに役立つ多くの強力な新機能があり、非セマンティック タグ、複雑な JavaScript スクリプト、画像はもう必要ありません。
CSS3 は、CSS (Cascading Style Sheets Level 3) テクノロジーのアップグレード バージョンであり、「Cascading Style Sheets Level 3」を指します。1999 年に策定されました。2001 年 5 月 23 日、W3C は CSS3 の作業草案を完成させました。 , このドラフトでは CSS3 開発ロードマップが策定されており、すべてのモジュールが詳細にリストされており、将来的には段階的に標準化される予定です。
CSS3 は CSS 仕様の最新バージョンです。CSS2.1 に基づいて多くの強力な新機能が追加され、開発者がいくつかの実際的な問題を解決できるようになり、非セマンティック タグや複雑なタグは必要なくなりました。JavaScript スクリプトとイメージ。たとえば、CSS3 は、丸い角、複数の背景、透明度、影、アニメーション、グラフなどをサポートしています。
CSS3 仕様はモジュールに分かれています
CSS1 と CSS2.1 はどちらも単一の仕様です。CSS1 は主に、フォント、色、背景、境界線などの Web ページ オブジェクトの基本スタイルを定義します。 CSS2 では、フローティング、位置決め、サブセレクター、隣接セレクター、ユニバーサル セレクターなどの高度なセレクターなどの高度な概念が追加されました。
CSS の進化における大きな変化の 1 つは、CSS3 を一連のモジュールに分割するという W3C の決定です。ブラウザ ベンダーは CSS のペースで急速に革新するため、モジュール型アプローチを採用することで、CSS3 仕様の要素は異なる速度で前進できます。これは、ブラウザ ベンダーが異なると特定の機能のみをサポートするためです。ただし、ブラウザーごとにサポートされる機能が異なるため、クロスブラウザー開発も複雑になります。
CSS3 は複数のモジュールに分割されており、各モジュールには独自の仕様があります。この利点は次のとおりです:
CSS3 仕様全体のリリースは、一部の部分での紛争により他の部分に影響を与えません。 . モジュールの進歩。
ブラウザの場合、必要に応じてサポートする CSS 機能を決定できます。
W3C 開発者にとって、必要に応じて対象を絞った更新を行うことができるため、全体の仕様がより柔軟になり、タイムリーに改訂できるようになり、新しいテクノロジー固有の仕様を拡張しやすくなります。
CSS3 仕様は完全に新しい仕様ではなく、CSS2.1 の内容の一部を統合していますが、それをベースに多くの追加と改訂が行われています。
CSS1 および CSS2 と比較すると、CSS3 は革命的なアップグレードを受けており、ローカル機能の改訂と改善に限定されません。CSS3 の多くの新機能に対するブラウザのサポートは完全ではありませんが、それでもユーザーは将来の Web ページ スタイルの開発の方向性と使命。
CSS3 には多くの新機能があります。ここでは、ブラウザーで広くサポートされている実用的な機能の簡単なリストを示します。
CSS3 セレクターは CSS2.1 に基づいて強化されており、デザイナーは冗長なクラスや ID、または JavaScript スクリプトを使用せずにタグ内の特定の HTML 要素を指定できます。
高度なセレクターは、クリーンで軽量な Web ページ タグを設計し、構造とパフォーマンスをより適切に分離したい場合に非常に役立ちます。これにより、タグに多数の class 属性と id 属性を追加する回数が減り、デザイナーがスタイル シートを保守しやすくなります。
Web ページで最も一般的な効果には、角丸、影、グラデーション背景、半透明、画像境界線などが含まれます。このような視覚効果は、デザイナーが画像または JavaScript スクリプトを作成することによって CSS で実現されます。
CSS3 のいくつかの新機能は、特別な視覚効果を作成するために使用できます。次の章では、これらの新機能がどのように視覚効果を実現するかを説明します。
CSS の背景に多くの制限がある場合、CSS3 は革命的な変化をもたらします。
CSS3 は背景色と背景画像の使用に限定されなくなり、background-origin、background-clip、background-size などのいくつかの新しい属性値が新機能に追加されました。さらに、要素に複数の背景画像を追加することもできます。
このようにして、より複雑なページ効果を設計する場合、実装を支援するために冗長なタグを使用する必要がなくなりました。たとえば、CSS で引き戸効果を実現するには、実装を支援するために基本的に 2 つまたは 3 つのタグを追加する必要がありますが、CSS3 のこれらの新機能は 1 つのタグで同じ効果を実現できます。
ボックス モデルは CSS の最優先事項です。CSS2 のボックス モデルは一部の基本機能のみを実装でき、一部の特別な機能は JavaScript に基づいて実装する必要があります。 CSS3 では、これが大幅に改善され、デザイナーは CSS3 を通じて直接これを実現できるようになりました。
たとえば、CSS3 のフレキシブル ボックス、この属性は、さまざまなレイアウト、特にモバイル端末上のレイアウトを簡単に実現できる新しいレイアウト概念を誰にでも導入するもので、その機能はさらに強力です。
CSS3 では、background 属性で、background-image、background-repeat、background-size、background-position、background-origin、background- などの複数の属性値を設定できるようになります。クリップなどを使用して、背景画像の複数のレイヤーを要素に追加できます。 Web ページの複雑な効果 (角の丸い、背景の重なりなど) をデザインする場合、Web ページのドキュメント構造を最適化するために HTML ドキュメントに複数の無駄なタグを追加する必要はありません。
テキスト シャドウは CSS にすでに存在しますが、あまり広く使用されていません。 CSS3 はこの機能を継承し、テキストをより目を引くようにするための新しいクロスブラウザー ソリューションを提供する新しい定義を提供します。
CSS2でのボックスシャドウの実装は少々悲惨で、このような効果を実現するには新たなタグや画像を追加する必要があり、必ずしも完璧な効果が得られるわけではありません。 CSS3 の box-shadow はこの状況を打破し、任意の要素にボックス シャドウを簡単に追加できるようにします。
CSS3 には、複数列レイアウトをより便利に作成するためのいくつかの新しいモジュールが導入されています。
複数列レイアウト モジュールでは、単純なブロックを新聞や雑誌のように複数の列に分割する方法について説明します。
フレキシブル ボックス レイアウト モジュールを使用すると、ブロックを水平および垂直に整列させることができ、CSS フローティング レイアウト、インライン ブロック レイアウト、および絶対位置を基準にして、ブロックを画面サイズに適応させることができます。より便利で柔軟なようです。
欠点は、これら 2 つのモジュールは一部のブラウザではサポートされていないことです。しかし、テクノロジーの発展に伴い、主流のブラウザはこれらを積極的にサポートするようになるでしょう。
ブラウザでは Web フォントに多くの制限があり、Web フォント アイコンはデザイナーにとってより贅沢なものです。 CSS3 では @font-face が再導入されており、これは間違いなくデザイナーにとって良いことです。
@font-face はサーバー上のフォントをリンクする方法です。これらの埋め込みフォントはブラウザにとって安全なフォントになります。これらのフォントがないとユーザーが適切に表示できないという問題を心配する必要はもうありません。さようなら、特殊なフォントではなく絵を使ったデザインの時代。
CSS3 カラー モジュールの導入により、ページ効果を作成する際に RGB モードと 16 進モードに制限されなくなりました。 CSS3 では、HSL、HSLA、RGBA といういくつかの新しいカラー モードが追加されています。 Web デザインでは、色を明るくしたり暗くしたりするのは簡単です。その中で、HSLA と RGBA には透明度チャンネルも追加されており、任意の要素の透明度を簡単に変更できます。
さらに、不透明度属性を使用して要素を透明にすることもできます。今後、透明度の作成は画像や JavaScript スクリプトに依存しなくなります。
角丸は CSS3 で最も一般的に使用されるプロパティです。理由は簡単です。角丸は直線よりも美しく、デザインと衝突しません。 CSS で角丸を作成する場合との違いは、CSS3 ではタグ要素や画像を追加する必要がなく、JavaScript スクリプトを借用する必要もなく、属性 1 つだけで実現できることです。
境界線の場合、CSS は境界線の線種、太さ、色の設定に制限されているため、特別な境界線効果が必要な場合は、背景画像を使用してそれを模倣するしかありません。 CSS3 の border-image プロパティは、要素の境界線のスタイルを強化します。また、このプロパティを使用して、背景のような効果、ねじれ、引き伸ばし、タイル状の境界線などを実現することもできます。
CSS2 の時代では、要素を変形させることは実現できなかったアイデアであり、このような効果を実現するには、大量の JavaScript コードを記述する必要がありました。 CSS3 では、回転、歪み、拡大縮小、移動など、2D または 3D 空間内の Web オブジェクトの位置と形状を操作できる変換プロパティが導入されています。
CSS3 トランジション (トランジション) 機能は、Web ページ制作でいくつかの単純なアニメーション効果を実現し、特定の効果をより効率的かつスムーズにします。
CSS3 アニメーション (アニメーション) 機能は、Flash や JavaScript スクリプト コードを使用せずに、より複雑なスタイルの変更やいくつかのインタラクティブな効果を実現できます。
CSS3 メディア特性はレスポンシブ (Responsive) レイアウトを実装できるため、レイアウトはユーザーの表示端末やデバイスの特性に応じて対応するスタイル ファイルを選択できます。したがって、異なるディスプレイ解像度やデバイス、特にモバイル端末で異なるレイアウト効果を実現することが理想的です。
(学習ビデオ共有: css ビデオ チュートリアル)
以上がcss3ってどういう意味ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
