CSS3是什么意思？詳解CSS3新增選擇器、新特性及瀏覽器兼容情況

2023-09-07 09:38:18

CSS3是什么意思

一、CSS3是什么意思

CSS3是CSS（層疊樣式表, Cascading Style Sheets）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節(jié)奏快速創(chuàng)新，因此通過采用模塊方法，CSS3規(guī)范里的元素能以不同速度向前發(fā)展，因為不同的瀏覽器廠商只支持給定特性。但不同瀏覽器在不同時間支持不同特性，這也讓跨瀏覽器開發(fā)變得復雜。

二、CSS3新增選擇器

新增的選擇器如下表所示：

選擇符類型	表達式	描述
子串匹配的屬性選擇符	E[att^="val"]	匹配具有att屬性、且值以val開頭的E元
	E[att$="val"]	匹配具有att屬性、且值以val結尾的E元
	E[att*="val"]	匹配具有att屬性、且值中含有val的E元
結構性偽類	E:root	匹配文檔的根元素。在Html（標準通用標記語言下的一個應用）中，根元素永遠是HTML
	E:nth-child(n)	匹配父元素中的第n個子元素E
	E:nth-last-child(n)	匹配父元素中的倒數(shù)第n個結構子元素E
	E:nth-of-type(n)	匹配同類型中的第n個同級兄弟元素E
	E:nth-last-of-type(n)	匹配同類型中的倒數(shù)第n個同級兄弟元素E
	E:last-child	匹配父元素中最后一個E元
	E:first-of-type	匹配同級兄弟元素中的第一個E元
	E:only-child	匹配屬于父元素中唯一子元素的E
	E:only-of-type	匹配屬于同類型中唯一兄弟元素的E
	E:empty	匹配沒有任何子元素（包括text節(jié)點）的元素E
目標偽類	E:target	匹配相關URL指向的E元
UI元素狀態(tài)偽類	E:enabled	匹配所有用戶界面（form表單）中處于可用狀態(tài)的E元
	E:disabled	匹配所有用戶界面（form表單）中處于不可用狀態(tài)的E元
	E:checked	匹配所有用戶界面（form表單）中處于選中狀態(tài)的元素E
	E::selection	匹配E元素中被用戶選中或處于高亮狀態(tài)的部分
否定偽類	E:not(s)	匹配所有不匹配簡單選擇符s的元素E
通用兄弟元素選擇器	E ~ F	匹配E元素之后的F元

三、CSS3新特性

CSS3 規(guī)范并不是完全另起爐灶，它集成了 CSS2.1 的部分內容，但在其基礎上進行了很多的增補與修訂。與 CSS1、CSS2 相比，CSS3 進行了革命性的升級，而不僅限于局部功能的修訂和完善，盡管瀏覽器對 CSS3 諸多新特性的支持還不是很完善，但是它依然讓用戶看到了未來網(wǎng)頁樣式的發(fā)展方向和使命。

CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄布局、媒體查詢等。這里簡單列舉被瀏覽器廣泛支持的實用特性。

1、完善選擇器

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

如果希望設計干凈、輕量級的網(wǎng)頁標簽，希望結構與表現(xiàn)更好地分離，高級選擇器是非常有用的。他可以減少在標簽中增加大量 class 和 id 屬性的數(shù)量，并讓設計師更方便地維護樣式表。

2、完善視覺效果

網(wǎng)頁中最常見的效果包括圓角、陰影、漸變背景、半透明、圖片邊框等。而這樣的視覺效果在 CSS 中都是依賴于設計師制作圖片或者 JavaScript 腳本來實現(xiàn)的。

CSS3 的一些新特性可以用來創(chuàng)建一些特殊的視覺效果，后面的章節(jié)將為大家展現(xiàn)這些新特性是如何實現(xiàn)這些視覺效果的。

3、完善背景效果

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

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

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

4、完善盒模型

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

例如，CSS3 中的彈性盒子，這個屬性將給大家引入一種全新的布局概念，能輕而易舉地實現(xiàn)各種布局，特別是在移動端的布局，它的功能更是強大。

5、增強背景功能

CSS3 允許背景屬性設置多個屬性值，如 background-image、background-repeat、background-size、 background-position、background-origin、background-clip 等，這樣就可以在一個元素上添加多層背景圖片。如果要設計復雜的網(wǎng)頁效果（如圓角、背景重疊等），就不用為 HTML 文檔添加多個無用的標簽，以優(yōu)化網(wǎng)頁文檔結構。

6、增加陰影效果

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

文本陰影在 CSS 中己經(jīng)存在，但沒有得到廣泛運用。CSS3 延續(xù)了這個特性，并進行了新的定義，該屬性提供了一種新的跨瀏覽器方案，使文本看起來更醒目。

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

7、增加多列布局與彈性盒模型布局

CSS3 引入了幾個新的模塊，用于更方便地創(chuàng)建多列布局。

多列布局（Multi-column Layout）模塊描述如何像報紙、雜志那樣，把一個簡單的區(qū)塊拆分成多列。

彈性盒模型布局（Flexible Box Layout）模塊能讓區(qū)塊在水平、垂直方向對齊，能讓區(qū)塊自適應屏幕大小，相對于 CSS 的浮動布局、inline-block 布局、絕對定位布局來說，它顯得更加方便與靈活。

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

8、完善 Web 字體和 Web Font 圖標

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

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

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

CSS3 顏色模塊的引入，實現(xiàn)了制作頁面效果時不再局限于 RGB 和十六進制兩種模式。CSS3 增加了 HSL、HSLA、RGBA 幾種新的顏色模式。在網(wǎng)頁設計中，能輕松實現(xiàn)使某個顏色變得再亮一點或者再暗一點。其中 HSLA 和 RGBA 還增加了透明通道，能輕松地改變任何一個元素的透明度。

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

10、新增圓角與邊框功能

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

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

11、增加變形操作

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

12、增加動畫和交互效果

CSS3 過渡（transition）特性能在網(wǎng)頁制作中實現(xiàn)一些簡單的動畫效果，讓某些效果變得更具流線性、平滑性。

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

13、完善媒體特性與 Responsive 布局

CSS3 媒體特性可以實現(xiàn)一種響應式（Responsive）布局，使布局可以根據(jù)用戶的顯示終端或設備特征選擇對應的樣式文件，從而在不同的顯示分辨率或設備下具有不同的布局效果，特別是在移動端上的實現(xiàn)更是一種理想的做法。

四、CSS3的優(yōu)勢

CSS3是CSS規(guī)范的最新版本，在CSS2.1的基礎上增加了很多強大的新功能，以幫助開發(fā)人員解決一些實際面臨的問題。使用CSS3不僅可以設計炫酷美觀的網(wǎng)頁，還能提高網(wǎng)頁性能。

1、節(jié)約成本

CSS3提供了很多新特性，如圓角、多背景、透明度、陰影、動畫、圖表等功能。在老版本的CSS中，這些功能都需要大量的代碼或復雜的操作來完成，有些動畫功能還涉及Javascript腳本。但CSS3的新功能幫我們摒棄了冗余的代碼結構，遠離很多Javascript腳本或者Flash代碼。網(wǎng)頁設計者不再需要花大把時間去寫腳本，極大的節(jié)約了開發(fā)成本。例如，圖1所示是老版本CSS實現(xiàn)圓角的方法，設計者需要先將圓角裁切，然后通過HTML標簽進行拼接才能完成，但使用CSS3直接通過圓角屬性就能完成。

圓角切圖

2、提高性能

由于功能的加強，CSS3能夠用更少的圖片或腳本制作圖形化網(wǎng)站。在進行網(wǎng)頁設計時，減少標簽的嵌套和圖片的使用數(shù)量，網(wǎng)頁頁面加載也會更快。此外，減少圖片、腳本代碼，Web站點就會減少HTTP請求數(shù)，頁面加載速度和網(wǎng)站的性能就會得到提升。

五、瀏覽器對CSS3的支持

CSS3 選擇器支持情況如下圖所示。除了 IE 家族和 Firefox3，其他幾乎全部支持，Chrome、Safari、Firefox 3.6、Opera 10.5 最好。

瀏覽器對CSS3選擇器的支持

CSS3 屬性支持情況如下圖所示。可以看出，完全支持 CSS3 屬性的瀏覽器有 Chrome 和 Safari，而且不管是 Mac 平臺還是 Windows 平臺全支持。

瀏覽器對CSS3屬性的支持

六、CSS3和CSS的區(qū)別

1、屬性

css3比css多了一些樣式而已，一般網(wǎng)站上的css樣式都是屬于css2.0屬性，而一些瀏覽器中的如果不兼容css3的話，就會以css樣式的方式顯示，最常見的方法就是圓弧角，

2、功能

css3的功能更為強大一些，很多瀏覽器都不支持css2.0，現(xiàn)在在css3中從新使用，并且能兼容css3樣式。

3、語法

css3和css一些基本的語法還是大致不變的，目前在css3中還是會繼續(xù)使用，方法也是一樣的。

4、目的

在網(wǎng)頁中，無論是使用css樣式還是css3樣式，都是讓網(wǎng)頁變的更加美觀，兩者的目的是一樣的。

七、CSS3編輯開發(fā)軟件（編輯器）

1、Visual Studio Code

和我們將要在下面介紹的其他代碼編輯器相比，Visual Studio Code是一個相對較新的代碼編輯器。不過，目前它已迅速成為了最受歡迎的代碼編輯器之一，尤其是在Web開發(fā)人員圈內。

Visual Studio Code具有針對多種語言的大量語法突出顯示功能，其中包括諸如：SCSS和LESS等CSS和CSS預處理器(Pre-processors)。與此同時，CSS IntelliSense、CSS Peek和CSS Modules等擴展模塊也會憑借著使用CSS，而變得更加強大。

兼容性：Windows、macOS和Linux。特殊功能：能夠方便開發(fā)人員快速地上手。它不但可與Gulp和Grunt等許多語言和工具一起使用，并且具有大量的擴展模塊。

2、Notepad++

作為一個免費的源代碼編輯器，Notepad++被認為是Windows"記事本"的替代品。它不但簡單、運行快速，并且支持CSS等多種語言。在編寫CSS時，它可以給開發(fā)者提供Word補全、函數(shù)補全、以及函數(shù)參數(shù)提示之類的服務，以提高整體的工作效率。

兼容性： Windows。特殊功能：語法突出顯示與折疊、宏記錄和回放、以及文檔結構圖。

3、WebStorm

WebStorm是Jetbrains公司旗下一款JavaScript開發(fā)工具。JetBrain的IDE可以對包括CSS在內的所有內容，實現(xiàn)正確的自動化完成功能，以方便您隨時獲悉有關CSS問題的提示。通過與Stylelint之類工具進行"開箱即用"式地集成，WebStorm也可以幫助您格式化、并保持CSS代碼的一致性。

兼容性：Windows、macOS和Linux。特殊功能：能夠與諸如Stylelint、Grunt、Gulp、以及NPM等Web開發(fā)工具無縫集成?？杀粌戎糜诟鞣N工具中，實現(xiàn)調試、跟蹤、以及智能化的自動完成等功能。

4、Coda

Coda是一種具有內置CSS編輯器的高級代碼編輯器。通過為您提供兩種CSS編輯模式，它可以為開發(fā)者提供更加靈活的設計體驗，并能夠在代碼被更改之后立即展示結果。值得一提的是，您還可以在編輯器的實時預覽(Live Preview)工具中覆蓋某個網(wǎng)站的CSS。

兼容性：macOS。特殊功能：通過與TouchBar集成，提供實時的預覽、以及內置的SFTP/FTP。

5、Atom

Atom是由Github構建的免費開源的編輯器。它不僅僅具有代碼編輯功能，還帶有一個嵌入式的Git Control，可與GitHub進行無縫集成。您可以安裝多個CSS附加組件，以增強用戶對CSS編輯的體驗。

兼容性：Windows、macOS和Linux。特殊功能：既可以通過各種API輕松地實現(xiàn)擴展和破解，又能夠與CSS、以及時下流行的CSS預處理器配合使用。

6、Sublime Text

Sublime Text是另一種流行的Web開發(fā)代碼編輯器。在提供跨平臺工作的前提下，它可以原生地支持包括CSS在內的多種語言和標記語言。同時，它也提供了許多擴展模塊，以改善用戶在使用編輯器時的CSS編輯體驗。另外，Sublime Text還引入了其他項功能，其中包括：多行選擇(Multiline selection)、"跳轉到任何地方(Go to Anywhere)"、以及能夠提高開發(fā)人員工作效率的Command Pallete。

兼容性：Windows、macOS和Linux。特殊功能：運行快速，且提供高級的代碼編輯功能。包括："跳轉到任何地方"和多行選擇，以及subl CLI。