首頁 > web前端 > 前端問答 > css3的意思是什麼

css3的意思是什麼

青灯夜游
發布: 2021-07-14 14:03:12
原創
2355 人瀏覽過

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

css3的意思是什麼

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板