css3包含的模組有：1、列表模組，用於為HTML列表添加樣式；2、多列佈局，它擴(kuò)展塊佈局模式，以便更容易定義多列文本；3、顏色模組，提供多種定義顏色的方式，例顏色名稱(chēng)、rgb()、hsl()等；4、媒體查詢(xún)，讓CSS可以作用於不同的裝置。

本教學(xué)操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3是CSS（層疊樣式表）技術(shù)的升級(jí)版本，於1999年開(kāi)始訂訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模組、超連結(jié)方式、語(yǔ)言模組、背景和邊框、文字特效、多欄佈局等模組

CSS演進(jìn)的一個(gè)主要變化就是W3C決定將CSS3分成一系列模組。

早在2001年W3C就完成了CSS3的草案規(guī)範(fàn)。 CSS3規(guī)範(fàn)的一個(gè)新特點(diǎn)是被分成若干個(gè)相互獨(dú)立的模組。

• 一方面分成若干較小的模組較利於規(guī)範(fàn)及時(shí)更新和發(fā)布，及時(shí)調(diào)整模組的內(nèi)容，這些模組獨(dú)立實(shí)現(xiàn)和發(fā)布，也為日後CSS的擴(kuò)展奠定了基礎(chǔ)。

• 另外一方面，由於受支援設(shè)備和瀏覽器廠商的限制，設(shè)備或廠商可以有選擇的支援一部分模組，支援CSS3的子集，這樣有利於CSS3的推廣。

以下為截至2021年1月，CSS3各模組的規(guī)格情況：

1999.01.27 - 2019.08.13#文字修飾模組css-multicol- 1css-color-3#css-namespaces-3selectors-3##2001.07.26 - 2020.12.22 基本盒子模型# #2008.08.01 - 2014.10.14#Marquee模組工作群組筆記css3 -marquee2009.07.23 - 2020.12.17圖片模組#候選推薦css-images-32010.12.02 - 2019.12.10書(shū)寫(xiě)模式#推薦#css-writing-modes-32011.09.01 - 2020.12.08條件規(guī)則模組##css3-conditionalr#2012.02.07 - 2020.05.19定位佈局模組工作草案css-position-32012.02.28 - 2018.12.04#片段模組候選推薦#css- break-32012.06.12 - 2020.04.21盒子排列模組#工作草稿

時(shí)間	名稱(chēng)	最後狀態(tài)
			##候選推薦
#css-text-decor-3	1999.06.22 - 2018.10.18	#分頁(yè)媒體模組	工作草稿
css-page-3	1999.06. 23 - 2019.10.15	多列佈局	##工作草稿
	1999.06.22 - 2018.06.19	顏色模組	#推薦
	1999.06.25 - 2014.03.20	#命名空間模組	推薦
	1999.08.03 - 2018.11.06	選擇器	##推薦
	2001.04.04 - 2012.06.19 ######媒體查詢(xún)####	推薦	css3-mediaqueries
2001.05.17 - 2020.12.22	文字模組	候選推薦	css-text-3
#2001.07.13 - 2021.02.11	##級(jí)聯(lián)與繼承	#推薦	css-cascade-3
#2001.07.13 - 2019.06.06	#取值與單位模組	候選推薦	#css-values-3
	##候選推薦		候選推薦
css-box-3	2001.07.31 - 2018.09.20	#字體模組	推薦
css-fonts-3	#2001.09.24 - 2020.12.22	#背景與邊框模組	候選推薦
css-backgrounds- 3	2002.02.20 - 2020.11.17	清單模組	#工作草案
css-lists-3	#2002.05.15 - 2020.08.27	#行內(nèi)佈局模組	工作草稿
#css-inline-3?	2002.08.02 - 2018.06.21	基本使用者介面模組
#css-ui-3	#2003.05.14 - 2019.08.02	##產(chǎn)生內(nèi)容模組	工作草稿############css-content-3###
2003.08.13 - 2019.07.16	##語(yǔ)法模組	#候選推薦	css-syntax-3
2004.02.24 - 2014.10.14	#超連結(jié)顯示模組	工作群組筆記	#css3-hyperlinks
2005.12.15 - 2015.03.26	範(fàn)本佈局模組	工作群組筆記	#css-template-3
2006.06.12 - 2014.05.13	#分頁(yè)媒體模組產(chǎn)生內(nèi)容	工作草稿	css-gcpm-3
			css-align-3
#2012.09.27 - 2020.12.18	#寬高大小模組	工作草稿	#css-sizing-3
##2012.10.09 - 2017.12.14	計(jì)數(shù)器樣式	候選推薦
		# #css-counter-styles-3	2013.04.18 - 2020.06.03
#溢位模組	工作草稿	css-overflow-3	#2014.02.20 - 2020.12.18

顯示類(lèi)型模組

候選推薦

##css-display-3

• 例如：

• #css3?顏色模組

• CSS3支援的色彩表示方法

• 以顏色英文名稱(chēng)表示。英文名稱(chēng)代表一種顏色，但表示很有限且不易記憶和查詢(xún)。

• 以十六進(jìn)位的顏色表示。色光三原色原理，可以查表。

• 以 rgb (r, g, b) 表示。色光三原色原理，紅色 綠色 藍(lán)色。

以 hsl (Hue, Saturation, Lightness) 表示。色調(diào) 飽和度 亮度。

以 rgba (r, g, b, a) 表示。色光三原色原理，紅色、綠色、藍(lán)色 透明。 a ∈ [0, 1]，0代表完全透明。

以 hsla (Hue, Saturation, Lightness, alpha) 表示。色調(diào)、飽和度、亮度 透明度。 alpha ∈ [0, 1]，0代表完全透明。

CSS3多列佈局

CSS多列佈局 擴(kuò)充區(qū)塊佈局模式，以便更容易定義多列文字。如果一行太長(zhǎng)，人們閱讀文字很麻煩; 如果眼睛從一行的終點(diǎn)移動(dòng)到下一個(gè)行的開(kāi)始需要太長(zhǎng)時(shí)間，它們就會(huì)丟失它們所在的行。因此，為了最大限度地利用大螢?zāi)?，作者?yīng)該將寬度不等的文字列並排放置，就像報(bào)紙一樣。

css3?媒體查詢(xún)#########隨著行動(dòng)裝置的快速普及，使用者不再只是透過(guò)傳統(tǒng)的電腦係來(lái)瀏覽Web 內(nèi)容，越來(lái)越多的使用者開(kāi)始使用各種尺寸的智慧型手機(jī)、平板電腦或其它設(shè)備來(lái)瀏覽Web 內(nèi)容，為了確保使用不同裝置的使用者都能擁有不錯(cuò)的體驗(yàn)就需要用到媒體查詢(xún)。 ######媒體查詢(xún)是CSS 樣式表最重要的功能之一，所謂媒體查詢(xún)指的就是根據(jù)不同的媒體類(lèi)型（裝置類(lèi)型）和條件來(lái)區(qū)分各種裝置（例如：電腦、手機(jī)、平板電腦、點(diǎn)字設(shè)備等），並為它們分別定義不同的CSS 樣式。媒體查詢(xún)能讓 CSS 可以更精確的作用於不同的裝置或相同裝置的不同條件，讓所有使用者都能得到很好的使用者體驗(yàn)。 ###

/* 在小于或等于 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影片教學(xué)###、###web前端###）###

以上是css3包含哪些模組的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！