「CSS3 最新版リファレンスマニュアル」は、CSS3 の公式オンラインリファレンス學(xué)習(xí)マニュアルです。この CSS3 オンライン開発マニュアルには、CSS3 のさまざまなプロパティ、構(gòu)文、定義、使用方法、操作例などが含まれており、Web フロントエンド學(xué)習(xí)者および開発者にとって不可欠です。マニュアル文書をオンラインで確認(rèn)してください!注: CSS3 は CSS テクノロジーのアップグレード バージョンです。CSS3 言語開発はモジュール化に向けて開発されています。これらのモジュールには、ボックス モデル、リスト モジュール、ハイパーリンク メソッド、言語モジュール、背景と境界線、テキスト効果、複數(shù)列レイアウトなどが含まれます。
CSS3 は、CSS (Cascading Style Sheet) 技術(shù)のアップグレード版で、1999 年に策定されました。2001 年 5 月 23 日に、W3C は、主にボックス モデル、リスト モジュール、ハイパーリンク メソッド、および言語モジュール、背景と枠線、テキスト効果、複數(shù)列レイアウト、その他のモジュール。
CSS の進(jìn)化における大きな変化の 1 つは、CSS3 を一連のモジュールに分割するという W3C の決定です。ブラウザ ベンダーは CSS のペースで急速に革新するため、モジュール アプローチを採用することで、CSS3 仕様の要素は異なる速度で前進(jìn)できます。これは、ブラウザ ベンダーが異なると特定の機(jī)能のみをサポートするためです。
しかし、ブラウザーごとにサポートされる機(jī)能が異なるため、クロスブラウザー開発も複雑になります。
ヒント: CSS3 の學(xué)習(xí)を続ける前に、CSS、HTML の知識(shí)の基本を理解する必要があります。
CSS は、Web ページのスタイルとレイアウトを制御するために使用されます。 CSS3 は最新の CSS 標(biāo)準(zhǔn)です。
CSS3 言語の基本
CSS3 の構(gòu)文は CSS のオリジナル バージョンに基づいており、ユーザーは冗長なクラスや ID を使用せずにタグ內(nèi)で特定の HTML 要素を指定できます。またはJavaScript。
CSS セレクターのほとんどは CSS3 で新たに追加されたものではありませんが、以前のバージョンでは広く使用されていませんでした。
クリーンで軽量なタグを?qū)g現(xiàn)し、構(gòu)造とパフォーマンスをより適切に分離したい場合は、高度なセレクターが非常に便利です。タグ內(nèi)のクラスの數(shù)と數(shù)を減らすことができます。 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>你好。這是一個(gè) div 元素。</div>
<div id="div2">你好。這是一個(gè) div 元素。</div>
</body>
</html>インスタンスを?qū)g行します>>[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
とてもシンプルで面白いですね! CSS3の原理はCSSと同じで、Webページ內(nèi)のスタイルシートのセレクターをカスタマイズし、Webページ內(nèi)でそのセレクターを大量に參照するというものです。
ヒント: CSS3 チュートリアルは、CSS3 の新機(jī)能と、複數(shù)の Web ページのスタイルとレイアウトを同時(shí)に制御する方法を段階的に學(xué)習(xí)するのに役立ちます。ご質(zhì)問がある場合は、PHP 中國語 Web サイト CSS3Community にアクセスして質(zhì)問してください。熱心なネチズンが答えてくれます。
CSS3 の利點(diǎn)
開発コストとメンテナンス コストの削減
CSS3 が登場する前、開発者は次のようなことを行っていました。角丸効果を完成させるには、多くの場合、追加の HTML タグを追加し、1 つ以上の畫像を使用する必要がありますが、CSS3 を使用すると、必要なタグは 1 つだけであり、CSS3 の border-radius プロパティを使用して完成させることができます。
このように、CSS3 テクノロジーは、畫像を描畫、切り取り、最適化する作業(yè)から人々を解放します。
後でフィレットの曲率や色を調(diào)整する必要がある場合、CSS2.1 を使用すると、畫像を最初から描畫して切り取る必要があります。CSS3 を使用すると、境界線を変更するだけで済みます。 radius 屬性値を使用して、変更をすばやく完了します。
CSS3 が提供するアニメーション機(jī)能により、開発者は一部の動(dòng)的ボタンや動(dòng)的ナビゲーションを?qū)g裝するときに JavaScript を使用しないことができるため、スクリプトの作成や適切なスクリプト プラグインの検索に多くの時(shí)間を費(fèi)やす必要がなくなります。いくつかの動(dòng)的ウェブサイト効果。
ページのパフォーマンスを向上させる
多くの CSS3 テクニックは、同じ視覚効果を提供することで畫像の「置き換え」になります。つまり、これにより、冗長なタグのネストと使用される畫像の數(shù)が減り、ユーザーがダウンロードする必要があるコンテンツが減り、ページの読み込みが速くなります。
さらに、畫像、スクリプト、Flash ファイルの數(shù)を減らすと、ユーザーが Web サイトにアクセスするときの HTTP リクエストの數(shù)を減らすことができます。これは、ページの読み込み速度を向上させる最良の方法の 1 つです。 CSS3 を使用してグラフィカル Web サイトを作成すると、畫像が不要になるため、HTTP リクエストの數(shù)が大幅に削減され、ページの読み込み速度が向上します。
たとえば、CSS3 アニメーション効果は JavaScript および Flash ファイルに対する HTTP リクエストを減らすことができますが、このアニメーション効果のレンダリングを完了するためにブラウザに多くの作業(yè)を?qū)g行させる必要があり、ブラウザの応答が遅くなる可能性があります。 . ユーザーの離脫。
したがって、複雑な特殊効果を使用する場合は、慎重に検討する必要があります。実際、多くの CSS3 テクノロジーは、どのような狀況でもページのパフォーマンスを大幅に向上させることができます。
CSS3 は完全な下位互換性があるため、引き続き動(dòng)作するために設(shè)計(jì)を変更する必要はありません。 Web ブラウザも引き続き CSS2 をサポートします。
この CSS3 チュートリアル マニュアルの內(nèi)容
この CSS3 チュートリアル マニュアルでは、角丸効果、グラフィック境界線、ブロック シャドウとテキスト シャドウ、RGBA を使用した実裝を含む、すべての新しい CSS3 機(jī)能について説明します。導(dǎo)入と実行例透明効果、グラデーション効果、@Font-Face を使用したカスタム フォント、複數(shù)の背景畫像、テキストまたは畫像の変形処理 (回転、拡大縮小、傾き、移動(dòng))、複數(shù)列レイアウト、メディア クエリなどの新機(jī)能。
#その他の CSS3 関連の學(xué)習(xí)參照リソースこのページの右側(cè)にある知識(shí)の拡張に加えて、次のリソースもすべての人向けに選択されていますヒント: このチュートリアルの各章には、多くの CSS3 サンプルが含まれています。[サンプルの実行] ボタンを直接クリックすると、実行結(jié)果をオンラインで表示できます。これらの例は、新しい CSS3 機(jī)能をよりよく理解し、使用するのに役立ちます。
最新章
- CSS3 多媒體查詢實(shí)例 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