css3包含的模組有：1、列表模組，用於為HTML列表添加樣式；2、多列佈局，它擴展塊佈局模式，以便更容易定義多列文本；3、顏色模組，提供多種定義顏色的方式，例顏色名稱、rgb()、hsl()等；4、媒體查詢，讓CSS可以作用於不同的裝置。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS3是CSS（層疊樣式表）技術的升級版本，於1999年開始訂訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模組、超連結方式、語言模組、背景和邊框、文字特效、多欄佈局等模組
CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模組。
早在2001年W3C就完成了CSS3的草案規範。 CSS3規範的一個新特點是被分成若干個相互獨立的模組。
一方面分成若干較小的模組較利於規範及時更新和發布，及時調整模組的內容，這些模組獨立實現和發布，也為日後CSS的擴展奠定了基礎。
另外一方面，由於受支援設備和瀏覽器廠商的限制，設備或廠商可以有選擇的支援一部分模組，支援CSS3的子集，這樣有利於CSS3的推廣。
以下為截至2021年1月，CSS3各模組的規格情況：
時間 |
名稱 |
最後狀態 |
|
|---|---|---|---|
| 1999.01.27 - 2019.08.13 | #文字修飾模組 | ##候選推薦 | |
| #css-text-decor-3 | 1999.06.22 - 2018.10.18 | #分頁媒體模組 | 工作草稿 |
| 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######媒體查詢#### | 推薦 |
css3-mediaqueries |
|
2001.05.17 - 2020.12.22 |
文字模組 |
候選推薦 |
css-text-3 |
#2001.07.13 - 2021.02.11 |
##級聯與繼承 | #推薦 | 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 | #行內佈局模組 | 工作草稿 |
| #css-inline-3 | 2002.08.02 - 2018.06.21 | 基本使用者介面模組 | |
| #css-ui-3 | #2003.05.14 - 2019.08.02 | ##產生內容模組 | 工作草稿############css-content-3### |
2003.08.13 - 2019.07.16 |
##語法模組 | #候選推薦 | css-syntax-3 |
| 2004.02.24 - 2014.10.14 | #超連結顯示模組 | 工作群組筆記 | #css3-hyperlinks |
| 2005.12.15 - 2015.03.26 | 範本佈局模組 | 工作群組筆記 | #css-template-3 |
| 2006.06.12 - 2014.05.13 | #分頁媒體模組產生內容 | 工作草稿 | css-gcpm-3 |
| #Marquee模組 | 工作群組筆記 | css3 -marquee | |
| 圖片模組 | #候選推薦 | css-images-3 | |
| 書寫模式 | #推薦 | #css-writing-modes-3 | |
| 條件規則模組 | ##css3-conditionalr | ||
| 定位佈局模組 | 工作草案 | css-position-3 | |
| #片段模組 | 候選推薦 | #css- break-3 | |
| 盒子排列模組 | #工作草稿 | css-align-3 |
|
#2012.09.27 - 2020.12.18 |
#寬高大小模組 |
工作草稿 |
#css-sizing-3 |
| ##2012.10.09 - 2017.12.14 | 計數器樣式 | 候選推薦 | |
| # #css-counter-styles-3 | 2013.04.18 - 2020.06.03 | ||
| #溢位模組 |
工作草稿 | css-overflow-3 | #2014.02.20 - 2020.12.18 |
候選推薦
##css-display-3CSS3支援的色彩表示方法
以顏色英文名稱表示。英文名稱代表一種顏色，但表示很有限且不易記憶和查詢。
以十六進位的顏色表示。色光三原色原理，可以查表。
以 rgb (r, g, b) 表示。色光三原色原理，紅色 綠色 藍色。
以 hsl (Hue, Saturation, Lightness) 表示。色調 飽和度 亮度。
以 rgba (r, g, b, a) 表示。色光三原色原理，紅色、綠色、藍色 透明。 a ∈ [0, 1]，0代表完全透明。
以 hsla (Hue, Saturation, Lightness, alpha) 表示。色調、飽和度、亮度 透明度。 alpha ∈ [0, 1]，0代表完全透明。
CSS3多列佈局CSS多列佈局 擴充區塊佈局模式，以便更容易定義多列文字。如果一行太長，人們閱讀文字很麻煩; 如果眼睛從一行的終點移動到下一個行的開始需要太長時間，它們就會丟失它們所在的行。因此，為了最大限度地利用大螢幕，作者應該將寬度不等的文字列並排放置，就像報紙一樣。
css3 媒體查詢#########隨著行動裝置的快速普及，使用者不再只是透過傳統的電腦係來瀏覽Web 內容，越來越多的使用者開始使用各種尺寸的智慧型手機、平板電腦或其它設備來瀏覽Web 內容，為了確保使用不同裝置的使用者都能擁有不錯的體驗就需要用到媒體查詢。 ######媒體查詢是CSS 樣式表最重要的功能之一，所謂媒體查詢指的就是根據不同的媒體類型（裝置類型）和條件來區分各種裝置（例如：電腦、手機、平板電腦、點字設備等），並為它們分別定義不同的CSS 樣式。媒體查詢能讓 CSS 可以更精確的作用於不同的裝置或相同裝置的不同條件，讓所有使用者都能得到很好的使用者體驗。 ###
/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}以上是css3包含哪些模組的詳細內容。更多資訊請關注PHP中文網其他相關文章！
