css3 に含まれるモジュールは次のとおりです: 1. HTML リストにスタイルを追加するために使用されるリスト モジュール; 2. ブロック レイアウト モードを拡張して複數(shù)列テキストを定義しやすくする複數(shù)列レイアウト。 3. カラー モジュール、色名、rgb()、hsl() などの色を定義するさまざまな方法を提供します; 4. メディア クエリ、CSS がさまざまなデバイスで動(dòng)作できるようにします。

このチュートリアルの動(dòng)作環(huán)境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS3 は、CSS (Cascading Style Sheets) テクノロジーのアップグレード バージョンです。1999 年に策定されました。2001 年 5 月 23 日に、W3C は主にボックス モデル、リスト モジュール、ハイパーリンクを含む CSS3 の作業(yè)草案を完成させました。メソッド、言語(yǔ)モジュール、背景と枠線、テキスト効果、複數(shù)列レイアウト、その他のモジュール

#CSS の進(jìn)化における大きな変化は、CSS3 を一連のモジュールに分割するという W3C の決定です。

W3C は 2001 年の初めに CSS3 の仕様草案を完成させました。 CSS3 仕様の新しい特徴は、CSS3 仕様が複數(shù)の獨(dú)立したモジュールに分割されていることです。

• 一方で、いくつかの小さなモジュールに分割すると、仕様のタイムリーな更新と公開(kāi)、およびモジュールの內(nèi)容のタイムリーな調(diào)整が容易になります。これらのモジュールは、獨(dú)立して実裝およびリリースできます。これは、CSS の將來(lái)の拡張の基礎(chǔ)にもなります。

• 一方で、サポートされているデバイスやブラウザのメーカーの制限により、デバイスやメーカーは一部のモジュールや CSS3 のサブセットを選択的にサポートすることができ、これは CSS3 の推進(jìn)に有益です。

#2021 年 1 月現(xiàn)在の CSS3 の各モジュールの仕様は次のとおりです。

#Time名前最終ステータスモジュール1999.01.27 - 2019.08.13テキスト変更モジュール推奨事項(xiàng)の候補(bǔ)css-text-decor-3##1999.06.22 - 2018.10.181999.06. 23 - 2019.10.15##1999.06.22 - 2018.06.19名前空間モジュール推奨css-namespaces-3#セレクター#2001.04.04 - 2012.06.19メディアに関するお問(wèn)い合わせ##css3-mediaqueries##2001.05.17 - 2020.12.22 ##2001.07.13 - 2021.02.11フォント モジュール推奨css-fonts-3背景と枠線モジュール ##作業(yè)草案##2002.05.15 - 2020.08.27##css-inline-3 #css-ui -3##2003.05.14 - 2019.08.02 コンテンツ モジュールの生成作業(yè)草案css-content-3#css-syntax-3##2004.02.24 - 2014.10.142005.12.15 - 2015.03.26畫像モジュール推奨候補(bǔ)css-images-3書き込みモード條件ルール モジュール配置レイアウト モジュールフラグメント モジュール2012.06.12 - 2020.04.21##作業(yè)草案 #css-counter-styles-3#2013.04.18 - 2020.06.032014.02.20 - 2020.12。 18例:

ページネーション メディア モジュール	作業(yè)草案	css-page-3
複數(shù)列レイアウト	作業(yè)草案	css-multicol- 1
カラー モジュール	#推奨	css-color-3	#1999.06.25 - 2014.03.20
			1999.08.03 - 2018.11.06
推奨	セレクター-3
#推奨
テキスト モジュール	推奨事項(xiàng)の候補(bǔ)	css-text-3
カスケードと継承	推奨	css-cascade-3	##2001.07.13 - 2019.06.06
値とユニットモジュール	推奨事項(xiàng)の候補(bǔ)	css-values-3	2001.07.26 - 2020.12.22
基本ボックス モデル	推奨候補(bǔ)	css -box-3	##2001.07.31 - 2018.09.20
			##2001.09.24 - 2020.12.22
##推奨事項(xiàng)の候補(bǔ)	##css-backgrounds- 3	##2002.02.20 - 2020.11.17	リスト モジュール
css-lists-3		#インライン レイアウトmodule	作業(yè)草案
	2002.08 .02 - 2018.06.21	基本ユーザー インターフェイス モジュール	推奨
2003.08.13 - 2019.07.16	文法モジュール	推奨事項(xiàng)の候補(bǔ)
#ハイパーリンク表示モジュール	ワーキンググループノート	css3-hyperlinks
テンプレート レイアウト モジュール	ワーキング グループ ノート	css-template-3	##2006.06.12 - 2014.05.13
ページネーション メディア モジュール コンテンツの生成	作業(yè)草案	css-gcpm-3	2008.08.01 - 2014.10.14
マーキー モジュール	ワーキング グループのメモ	css3 -marquee	##2009.07.23 - 2020.12.17
			##2010.12.02 - 2019.12.10
推奨	css-writing-modes-3		2011.09.01 - 2020.12.08
推奨事項(xiàng)の候補(bǔ)	css3-conditionalr		2012.02.07 - 2020.05.19
作業(yè)草案	#css-position-3		2012.02.28 - 2018.12 .04
推奨事項(xiàng)の候補(bǔ)	css-break-3		##ボックス配置モジュール
	css-align-3
2012.09.27 - 2020.12.18	幅と高さのサイズ モジュール	作業(yè)草案	#css-sizing-3
##2012.10.09 - 2017.12.14	##カウンタースタイル	推奨候補(bǔ)
オーバーフロー モジュール	作業(yè)草案	css-overflow-3
表示タイプ モジュール	推奨事項(xiàng)の候補(bǔ)	css-display-3

css3 カラー モジュール

CSS3 でサポートされている色表現(xiàn)方法

色の英語(yǔ)名で表されます。英語(yǔ)の名前は色を表しますが、その表現(xiàn)は非常に限られており、覚えたり調(diào)べたりするのが困難です。

• は 16 進(jìn)數(shù)の色で表されます。色の三原色と光の原理を表で調(diào)べることができます。

• はrgb(r,g,b)で表されます。光の三原色、赤、緑、青の原理。

• hsl (色相、彩度、明度) で表されます。色相、彩度、明るさ。

• rgba (r、g、b、a) で表されます。光の三原色、赤、緑、青、透明の原理。 a ∈ [0, 1]、0 は完全な透明性を表します。

• hsla (色相、彩度、明度、アルファ) で表されます。色相、彩度、明度、透明度。 alpha ∈ [0, 1]、0 は完全な透明度を表します。
CSS3 複數(shù)列レイアウト

CSS 複數(shù)列レイアウト ブロック レイアウト モードを拡張して、複數(shù)列のテキストを簡(jiǎn)単に定義できるようにします。行が長(zhǎng)すぎると、テキストを読むのが困難になります。ある行の終わりから次の行の始まりに移動(dòng)するのに時(shí)間がかかりすぎると、今いる行を見(jiàn)失ってしまいます。したがって、大きな畫面を最大限に活用するには、作成者は新聞のようにさまざまな幅のテキストの列を並べて配置する必要があります。

css3 メディア クエリ

モバイル デバイスの急速な普及により、ユーザーは従來(lái)のコンピューター システムを通じて Web コンテンツを閲覧するだけでなく、ますます多くのユーザーがスマートフォンを使用し始めています。 、タブレット、またはその他のさまざまなサイズのデバイスで Web コンテンツを閲覧できます。さまざまなデバイスを使用するユーザーが快適に操作できるようにするには、メディア クエリが必要です。

メディア クエリは、CSS スタイル シートの最も重要な機(jī)能の 1 つです。いわゆるメディア クエリとは、さまざまなメディア タイプ (デバイス タイプ) に基づいてさまざまなデバイス (コンピュータ、攜帯電話、タブレットなど) を區(qū)別することを指します。および條件、點(diǎn)字デバイスなど) を定義し、それぞれに対して異なる CSS スタイルを定義します。メディア クエリを使用すると、CSS が異なるデバイスまたは同じデバイス上の異なる條件に対してより正確に動(dòng)作できるようになり、すべてのユーザーが良好なユーザー エクスペリエンスを得ることができます。

/* 在小于或等于 992 像素的屏幕上，將背景色設(shè)置為藍(lán)色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，將背景色設(shè)置為橄欖色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

(學(xué)習(xí)ビデオ共有:

css ビデオ チュートリアル

、

Web フロントエンド)

以上がcss3にはどのようなモジュールが含まれていますか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。