css3の意味は何ですか

CSS3 は、CSS (Cascading Style Sheet) テクノロジーのアップグレード バージョンであり、「Cascading Style Sheet Level 3」を指します。CSS2.1 に基づいて多くの強力な新機能が追加され、開発者が現実世界のいくつかの問題を解決するのに役立ちます。問題がなくなり、非セマンティックなタグ、複雑な JavaScript スクリプト、画像も不要になります。

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

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 の新機能

CSS3 仕様は完全に新しい分野ではなく、コンテンツの一部が統合されています。 CSS2.1 に準拠していますが、これをベースに多くの追加や修正が行われています。

CSS1 および CSS2 と比較すると、CSS3 は革命的なアップグレードを受けており、ローカル機能の改訂と改善に限定されません。CSS3 の多くの新機能に対するブラウザのサポートは完全ではありませんが、それでもユーザーは将来の Web ページ スタイルの開発の方向性と使命。

CSS3 には多くの新機能があります。ここでは、ブラウザーで広くサポートされている実用的な機能の簡単なリストを示します。

1. セレクターの改善

CSS3 セレクターは CSS2.1 に基づいて強化されており、デザイナーはタグ内で特定の HTML 要素を指定できます。冗長なクラスを使用する必要はありません。 、ID または JavaScript スクリプト。

高度なセレクターは、クリーンで軽量な Web ページ タグを設計し、構造とパフォーマンスをより適切に分離したい場合に非常に役立ちます。これにより、タグに多数の class 属性と id 属性を追加する回数が減り、デザイナーがスタイル シートを保守しやすくなります。

2. 視覚効果の改善

Web ページで最も一般的な効果には、角丸、影、グラデーション背景、半透明、画像境界線などが含まれます。このような視覚効果は、デザイナーが画像または JavaScript スクリプトを作成することによって CSS で実現されます。

CSS3 のいくつかの新機能は、特別な視覚効果を作成するために使用できます。次の章では、これらの新機能がどのように視覚効果を実現するかを説明します。

3. 背景効果を改善する

CSS の背景に多くの制限がある場合、CSS3 は革命的な変化をもたらします。

CSS3 は背景色と背景画像の使用に限定されなくなり、background-origin、background-clip、background-size などのいくつかの新しい属性値が新機能に追加されました。さらに、要素に複数の背景画像を追加することもできます。

このようにして、より複雑なページ効果を設計する場合、実装を支援するために冗長なタグを使用する必要がなくなりました。たとえば、CSS で引き戸効果を実現するには、実装を支援するために基本的に 2 つまたは 3 つのタグを追加する必要がありますが、CSS3 のこれらの新機能は 1 つのタグで同じ効果を実現できます。

4. ボックス モデルの改善

ボックス モデルは CSS の最優先事項です。CSS2 のボックス モデルはいくつかの基本的な機能しか実装できません。関数は JavaScript に基づいて実装する必要があります。 CSS3 では、これが大幅に改善され、デザイナーは CSS3 を通じて直接これを実現できるようになりました。

たとえば、CSS3 のフレキシブル ボックス、この属性は、さまざまなレイアウト、特にモバイル端末上のレイアウトを簡単に実現できる新しいレイアウト概念を誰にでも導入するもので、その機能はさらに強力です。

5. 背景機能の強化

CSS3 では、background 属性で、background-image、background-repeat、background-size、background などの複数の属性値を設定できるようになります。 -position、background-origin、background-clip などを使用して、背景画像の複数のレイヤーを要素に追加できます。 Web ページの複雑な効果 (角の丸い、背景の重なりなど) をデザインする場合、Web ページのドキュメント構造を最適化するために HTML ドキュメントに複数の無駄なタグを追加する必要はありません。

6. 影効果を追加する

影は主にテキストシャドウ(text-shadow)とボックスシャドウ(box-shadow)の2種類に分かれます。

テキスト シャドウは CSS にすでに存在しますが、あまり広く使用されていません。 CSS3 はこの機能を継承し、テキストをより目を引くようにするための新しいクロスブラウザー ソリューションを提供する新しい定義を提供します。

CSS2でのボックスシャドウの実装は少々悲惨で、このような効果を実現するには新たなタグや画像を追加する必要があり、必ずしも完璧な効果が得られるわけではありません。 CSS3 の box-shadow はこの状況を打破し、任意の要素にボックス シャドウを簡単に追加できるようにします。

7. 複数列レイアウトとフレキシブル ボックス モデル レイアウトの追加

CSS3 には、複数列レイアウトをより便利に作成するためのいくつかの新しいモジュールが導入されています。

複数列レイアウト モジュールでは、単純なブロックを新聞や雑誌のように複数の列に分割する方法について説明します。

フレキシブル ボックス レイアウト モジュールを使用すると、ブロックを水平および垂直に整列させることができ、CSS フローティング レイアウト、インライン ブロック レイアウト、および絶対位置を基準にして、ブロックを画面サイズに適応させることができます。より便利で柔軟なようです。

欠点は、これら 2 つのモジュールは一部のブラウザではサポートされていないことです。しかし、テクノロジーの発展に伴い、主流のブラウザはこれらを積極的にサポートするようになるでしょう。

8. Web フォントと Web フォント アイコンの改善

ブラウザには Web フォントに関する多くの制限があり、Web フォント アイコンはデザイナーにとってより贅沢なものです。 CSS3 では @font-face が再導入されており、これは間違いなくデザイナーにとって良いことです。

@font-face はサーバー上のフォントをリンクする方法です。これらの埋め込みフォントはブラウザにとって安全なフォントになります。これらのフォントがないとユーザーが適切に表示できないという問題を心配する必要はもうありません。さようなら、特殊なフォントではなく絵を使ったデザインの時代。

9. カラーおよび透明度機能の強化

CSS3 カラー モジュールの導入により、RGB および 16 進数モードに限定されないページ効果の作成が可能になります。 CSS3 では、HSL、HSLA、RGBA といういくつかの新しいカラー モードが追加されています。 Web デザインでは、色を明るくしたり暗くしたりするのは簡単です。その中で、HSLA と RGBA には透明度チャンネルも追加されており、任意の要素の透明度を簡単に変更できます。

さらに、不透明度属性を使用して要素を透明にすることもできます。今後、透明度の作成は画像や JavaScript スクリプトに依存しなくなります。

10. 角丸と枠線機能の追加

角丸は CSS3 で最も一般的に使用される属性です。理由は非常に単純です。角丸は直線よりも美しいからです。デザインに矛盾はありません。 CSS で角丸を作成する場合との違いは、CSS3 ではタグ要素や画像を追加する必要がなく、JavaScript スクリプトを借用する必要もなく、属性 1 つだけで実現できることです。

境界線の場合、CSS は境界線の線種、太さ、色の設定に制限されているため、特別な境界線効果が必要な場合は、背景画像を使用してそれを模倣するしかありません。 CSS3 の border-image プロパティは、要素の境界線のスタイルを強化します。また、このプロパティを使用して、背景のような効果、ねじれ、引き伸ばし、タイル状の境界線などを実現することもできます。

11. 変形操作の追加

CSS2 の時代では、要素を変形させるという発想は実現不可能でした。 JavaScript コードの。 CSS3 では、回転、歪み、拡大縮小、移動など、2D または 3D 空間内の Web オブジェクトの位置と形状を操作できる変換プロパティが導入されています。

12. アニメーションとインタラクティブ効果の追加

CSS3 トランジション (トランジション) 機能を使用すると、Web ページ制作でいくつかの単純なアニメーション効果を実現でき、一部の効果をより効率的でスムーズにすることができます。

CSS3 アニメーション (アニメーション) 機能は、Flash や JavaScript スクリプト コードを使用せずに、より複雑なスタイルの変更やいくつかのインタラクティブな効果を実現できます。

13. メディア特性とレスポンシブ レイアウトの改善

CSS3 メディア特性はレスポンシブ (Responsive) レイアウトを実装できるため、ユーザーの表示端末に基づいたレイアウトを実現できます。またはデバイス 機能の選択はスタイル ファイルに対応しているため、さまざまなディスプレイ解像度やデバイス、特にモバイル端末で異なるレイアウト効果が得られます。これは理想的なアプローチです。

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

以上がcss3の意味は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。