「CSS3 最新版リファレンスマニュアル」は、CSS3 の公式オンラインリファレンス学習マニュアルです。この CSS3 オンライン開発マニュアルには、CSS3 のさまざまなプロパティ、構文、定義、使用方法、操作例などが含まれており、Web フロントエンド学習者および開発者にとって不可欠です。マニュアル文書をオンラインで確認してください!注: CSS3 は CSS テクノロジーのアップグレード バージョンです。CSS3 言語開発はモジュール化に向けて開発されています。これらのモジュールには、ボックス モデル、リスト モジュール、ハイパーリンク メソッド、言語モジュール、背景と境界線、テキスト効果、複数列レイアウトなどが含まれます。
CSS3 は、CSS (Cascading Style Sheet) 技術のアップグレード版で、1999 年に策定されました。2001 年 5 月 23 日に、W3C は、主にボックス モデル、リスト モジュール、ハイパーリンク メソッド、および言語モジュール、背景と枠線、テキスト効果、複数列レイアウト、その他のモジュール。
CSS の進化における大きな変化の 1 つは、CSS3 を一連のモジュールに分割するという W3C の決定です。ブラウザ ベンダーは CSS のペースで急速に革新するため、モジュール アプローチを採用することで、CSS3 仕様の要素は異なる速度で前進できます。これは、ブラウザ ベンダーが異なると特定の機能のみをサポートするためです。
しかし、ブラウザーごとにサポートされる機能が異なるため、クロスブラウザー開発も複雑になります。
CSS は、Web ページのスタイルとレイアウトを制御するために使用されます。 CSS3 は最新の CSS 標準です。
CSS3 言語の基本
CSS3 の構文は CSS のオリジナル バージョンに基づいており、ユーザーは冗長なクラスや ID を使用せずにタグ内で特定の HTML 要素を指定できます。またはJavaScript。
CSS セレクターのほとんどは CSS3 で新たに追加されたものではありませんが、以前のバージョンでは広く使用されていませんでした。
クリーンで軽量なタグを実現し、構造とパフォーマンスをより適切に分離したい場合は、高度なセレクターが非常に便利です。タグ内のクラスの数と数を減らすことができます。 ID の管理が容易になり、デザイナーがスタイル シートを管理しやすくなります。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>インスタンスを実行します>>[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
とてもシンプルで面白いですね! CSS3の原理はCSSと同じで、Webページ内のスタイルシートのセレクターをカスタマイズし、Webページ内でそのセレクターを大量に参照するというものです。
ヒント: CSS3 チュートリアルは、CSS3 の新機能と、複数の Web ページのスタイルとレイアウトを同時に制御する方法を段階的に学習するのに役立ちます。ご質問がある場合は、PHP 中国語 Web サイト CSS3Community にアクセスして質問してください。熱心なネチズンが答えてくれます。
CSS3 の利点
開発コストとメンテナンス コストの削減
CSS3 が登場する前、開発者は次のようなことを行っていました。角丸効果を完成させるには、多くの場合、追加の HTML タグを追加し、1 つ以上の画像を使用する必要がありますが、CSS3 を使用すると、必要なタグは 1 つだけであり、CSS3 の border-radius プロパティを使用して完成させることができます。
このように、CSS3 テクノロジーは、画像を描画、切り取り、最適化する作業から人々を解放します。
後でフィレットの曲率や色を調整する必要がある場合、CSS2.1 を使用すると、画像を最初から描画して切り取る必要があります。CSS3 を使用すると、境界線を変更するだけで済みます。 radius 属性値を使用して、変更をすばやく完了します。
CSS3 が提供するアニメーション機能により、開発者は一部の動的ボタンや動的ナビゲーションを実装するときに JavaScript を使用しないことができるため、スクリプトの作成や適切なスクリプト プラグインの検索に多くの時間を費やす必要がなくなります。いくつかの動的ウェブサイト効果。
ページのパフォーマンスを向上させる
多くの CSS3 テクニックは、同じ視覚効果を提供することで画像の「置き換え」になります。つまり、これにより、冗長なタグのネストと使用される画像の数が減り、ユーザーがダウンロードする必要があるコンテンツが減り、ページの読み込みが速くなります。
さらに、画像、スクリプト、Flash ファイルの数を減らすと、ユーザーが Web サイトにアクセスするときの HTTP リクエストの数を減らすことができます。これは、ページの読み込み速度を向上させる最良の方法の 1 つです。 CSS3 を使用してグラフィカル Web サイトを作成すると、画像が不要になるため、HTTP リクエストの数が大幅に削減され、ページの読み込み速度が向上します。
たとえば、CSS3 アニメーション効果は JavaScript および Flash ファイルに対する HTTP リクエストを減らすことができますが、このアニメーション効果のレンダリングを完了するためにブラウザに多くの作業を実行させる必要があり、ブラウザの応答が遅くなる可能性があります。 . ユーザーの離脱。
したがって、複雑な特殊効果を使用する場合は、慎重に検討する必要があります。実際、多くの CSS3 テクノロジーは、どのような状況でもページのパフォーマンスを大幅に向上させることができます。
CSS3 は完全な下位互換性があるため、引き続き動作するために設計を変更する必要はありません。 Web ブラウザも引き続き CSS2 をサポートします。
この CSS3 チュートリアル マニュアルの内容
この CSS3 チュートリアル マニュアルでは、角丸効果、グラフィック境界線、ブロック シャドウとテキスト シャドウ、RGBA を使用した実装を含む、すべての新しい CSS3 機能について説明します。導入と実行例透明効果、グラデーション効果、@Font-Face を使用したカスタム フォント、複数の背景画像、テキストまたは画像の変形処理 (回転、拡大縮小、傾き、移動)、複数列レイアウト、メディア クエリなどの新機能。
#その他の CSS3 関連の学習参照リソースこのページの右側にある知識の拡張に加えて、次のリソースもすべての人向けに選択されていますヒント: このチュートリアルの各章には、多くの CSS3 サンプルが含まれています。[サンプルの実行] ボタンを直接クリックすると、実行結果をオンラインで表示できます。これらの例は、新しい CSS3 機能をよりよく理解し、使用するのに役立ちます。
最新章
- CSS3 多媒体查询实例 2016-10-18
- CSS3 多媒体查询 2016-10-18
- CSS3 弹性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分页 2016-10-18
- CSS 按钮 2016-10-18
- CSS 图片 2016-10-18
- CSS3 用户界面 2016-10-18
関連コース
- Web フロントエンド開発の簡単な紹介 2021-12-10
- あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル] 2022-09-30
- Gulp 入門ビデオチュートリアル 2022-04-18
- Brothers in Arms Gao Luofeng CSS3 ビデオ チュートリアル 2022-04-20
- AngularJS 開発 Web アプリケーションの基本的なサンプル ビデオ チュートリアル 2022-04-18
- アヤックスのフルコンタクト 2022-04-13
- MUI フレームワークの基本的なビデオ チュートリアル 2022-04-13
- オンライントレーニングクラス体験クラス 2019-01-10