css3的意思是什麼

CSS3是CSS（層疊樣式表）技術的升級版本，指的是“層疊樣式表3級”，在CSS2.1的基礎上增加了很多強大的新功能，以幫助開發人員解決一些實際面臨的問題，不再需要非語意標籤、複雜的JavaScript腳本以及圖片。

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

CSS3是CSS（層疊樣式表）技術的升級版本，指的是“層疊樣式表3級”，於1999年開始製訂，2001 年5 月23 日，W3C完成了CSS3 的工作草案，在草案中製定了CSS3 發展路線圖，路線圖詳細列出了所有模組，並計劃在未來將逐步進行規範。

CSS3 是CSS 規範的最新版本，在CSS2.1 的基礎上增加了許多強大的新功能，以幫助開發人員解決一些實際面臨的問題，並且不再需要非語義標籤、複雜的JavaScript 腳本以及圖片。例如，CSS3 支援圓角、多背景、透明度、陰影、動畫、圖表等功能。

CSS3 規範是分模組的

CSS1 和CSS2.1 都是單一的規範，其中CSS1 主要定義了網頁物件的基本樣式，如字體、顏色、背景、邊框等，CSS2 新增了進階概念，如浮動、定位、進階選擇器（如子選擇器、相鄰選擇器和通用選擇器等）。

CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模組。瀏覽器廠商按CSS節奏快速創新，因此透過採用模組方法，CSS3規範裡的元素能以不同速度向前發展，因為不同的瀏覽器廠商只支援給定特性。但不同瀏覽器在不同時間支援不同特性，也讓跨瀏覽器開發變得複雜。

CSS3 被分割成了多個模組，每個模組都有自己的規範，這樣做的好處是：

• 整個CSS3 的規範發布不會因為部分存在爭論而影響其他模組的推進。

• 對於瀏覽器來說，可以根據需要，決定哪些 CSS 功能被支援。

• 對於W3C 制定者而言，可以根據需要進行針對性的更新，從而使一個整體的規範更加靈活，並能夠及時修訂，這樣更容易擴展新的技術特定。

CSS3 新特性

CSS3 規格並不是完全另起爐灶，它整合了CSS2.1 的部分內容，但在其基礎上進行了許多的增補與修訂。

與CSS1、CSS2 相比，CSS3 進行了革命性的升級，而不僅限於局部功能的修訂和完善，儘管瀏覽器對CSS3 諸多新特性的支援還不是很完善，但是它依然讓使用者看到了未來網頁樣式的發展方向和使命。

CSS3 的新功能非常多，這裡簡單列舉被瀏覽器廣泛支援的實用特性。

1. 完善選擇器

CSS3 選擇器在CSS2.1 的基礎上進行了增強，它允許設計師在標籤中指定特定的HTML 元素，而不必使用多餘的類別、ID 或JavaScript 腳本。

如果希望設計乾淨、輕量級的網頁標籤，希望結構能與表現更好地分離，進階選擇器是非常有用的。他可以減少在標籤中增加大量 class 和 id 屬性的數量，並讓設計師更方便地維護樣式表。

2. 完善視覺效果

網頁中最常見的效果包括圓角、陰影、漸層背景、半透明、圖片邊框等。而這樣的視覺效果在 CSS 中都是依賴設計師製作圖片或 JavaScript 腳本來實現的。

CSS3 的一些新特性可以用來創造一些特殊的視覺效果，後面的章節將為大家展現這些新特性是如何實現這些視覺效果的。

3. 完善背景效果

如果說 CSS 中的背景帶給你太多的限制，那麼 CSS3 將帶來革命性的改變。

CSS3 不再侷限於背景色、背景影像的運用，新特性中加入了多個新的屬性值，如background-origin、background-clip、background-size；此外，還可以在一個元素上設定多個背景圖片。

這樣，如果要設計比較複雜的頁面效果，就不再需要使用一些多餘的標籤來輔助實作了。例如，要實現 CSS 中的滑動門效果，在 CSS 中基本上要添加 2、3 個額外的標籤來輔助實現，而 CSS3 中的這些新特性能夠在一個標籤中完成相同的效果。

4. 完善盒子模型

盒模型在CSS 中是重中之重，CSS2 中的盒子模型只能實現一些基本的功能，對於一些特殊的功能需要基於JavaScript 來實作。而在CSS3中，這一點得到了很大的改善，設計師可以直接透過 CSS3 來實現。

例如，CSS3 中的彈性盒子，這個屬性將為大家引入一種全新的佈局概念，能輕易地實現各種佈局，特別是在行動端的佈局，它的功能更是強大。

5. 增強背景功能

CSS3 允許背景屬性設定多個屬性值，如background-image、background-repeat、background-size、 background-position、 background-origin、background-clip 等，這樣就可以在一個元素上加入多層背景圖片。如果要設計複雜的網頁效果（如圓角、背景重疊等），就不用為 HTML 文件新增多個無用的標籤，以最佳化網頁文件結構。

6. 增加陰影效果

陰影主要分為兩種：文字陰影（text-shadow）和盒子陰影（box-shadow）。

文字陰影在 CSS 中己經存在，但沒有被廣泛運用。 CSS3 延續了這個特性，並進行了新的定義，該屬性提供了一種新的跨瀏覽器方案，使文字看起來更醒目。

盒子陰影的實現在 CSS2 中就有點苦不堪言，為了實現這樣的效果，需要新增標籤、圖片，而且效果還不一定完美。 CSS3 的 box-shadow 將打破這種局面，可以輕易地為任何元素添加盒子陰影。

7. 增加多列佈局與彈性盒模型佈局

CSS3 引入了幾個新的模組，用於更方便地建立多列佈局。

多列佈局（Multi-column Layout）模組描述如何像報紙、雜誌一樣，把一個簡單的區塊拆分成多列。

彈性盒模型佈局（Flexible Box Layout）模組能讓區塊在水平、垂直方向對齊，能讓區塊自適應螢幕大小，相對於CSS 的浮動佈局、inline-block 佈局、絕對定位佈局來說，它看起來更方便與靈活。

缺點是：這兩個模組在某些瀏覽器中還不被支持，但隨著技術的發展，各主流瀏覽器會主動支持的。

8. 完善 Web 字體和 Web Font 圖示

#瀏覽器對 Web 字體有許多限制，Web Font 圖示對設計師來說更奢華。 CSS3 重新引入 @font-face，對設計師來說無疑是件好事。

@font-face 是連結伺服器上的字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體，不再擔心用戶沒有這些字體而無法正常顯示的問題，從此告別用圖片取代特殊字體的設計時代。

9. 增強顏色和透明度功能

CSS3 顏色模組的引入，實現了製作頁面效果時不再局限於RGB 和十六進制兩種模式。 CSS3 增加了 HSL、HSLA、RGBA 幾種新的色彩模式。在網頁設計中，能輕鬆實現使某個顏色變得再亮一點或再暗一點。其中 HSLA 和 RGBA 也增加了透明通道，可輕鬆改變任何一個元素的透明度。

另外，還可以使用 opacity 屬性來製作元素的透明度。從此製作透明度不再依賴圖片或 JavaScript 腳本了。

10. 新增圓角與邊框功能

圓角是CSS3 中使用最多的屬性，原因很簡單：圓角比直線更美觀，而且不會與設計產生任何衝突。與 CSS 製作圓角不同之處是，CSS3 無須添加任何標籤元素與圖片，也不需借用任何 JavaScript 腳本，一個屬性就能搞定。

對於邊框，在 CSS 中僅限於對邊框的線型、粗細、顏色的設置，如果需要特殊的邊框效果，只能使用背景圖片來模仿。 CSS3 的 border-image 屬性使元素邊框的樣式變得豐富起來，還可以使用該屬性實現類似 background 的效果，對邊框進行扭曲、拉伸和平舖等。

11. 增加變形操作

在CSS2 時代，讓某個元素變形是一個可望而不可即的想法，為了實現這樣的效果，需要寫大量的JavaScript 程式碼。 CSS3 引進了一個變形屬性，可以在 2D 或 3D 空間操作網頁物件的位置和形狀，例如旋轉、扭曲、縮放或移位。

12. 增加動畫和互動效果

CSS3 過渡（transition）特性能在網頁製作中實現一些簡單的動畫效果，讓某些效果變得更具流線性、平滑性。

而 CSS3 動畫（animation）特性能夠實現更複雜的樣式變化，以及一些互動效果，而不需要使用任何 Flash 或 JavaScript 腳本程式碼。

13. 完善媒體特性與Responsive 佈局

CSS3 媒體特性可以實現一種響應式（Responsive）佈局，使佈局可以根據用戶的顯示終端或設備特徵選擇對應的樣式文件，從而在不同的顯示解析度或裝置下具有不同的佈局效果，特別是在行動端上的實作更是一種理想的做法。

（學習影片分享：css影片教學）

以上是css3的意思是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！