一、CSS3是什么意思

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

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

二、CSS3新增選擇器

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

三、CSS3新特性

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

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

1、完善選擇器

CSS3 選擇器在 CSS2.1 的基礎(chǔ)上進(jìn)行了增強(qiáng)，它允許設(shè)計(jì)師在標(biāo)簽中指定特定的 HTML 元素，而不必使用多余的類、ID 或者 Javascript 腳本。

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

2、完善視覺效果

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

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

3、完善背景效果

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

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

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

4、完善盒模型

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

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

5、增強(qiáng)背景功能

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

6、增加陰影效果

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

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

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

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

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

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

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

缺點(diǎn)是：這兩個(gè)模塊在一些瀏覽器中還不被支持，但隨著技術(shù)的發(fā)展，各主流瀏覽器會(huì)主動(dòng)支持的。

8、完善 Web 字體和 Web Font 圖標(biāo)

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

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

9、增強(qiáng)顏色和透明度功能

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

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

10、新增圓角與邊框功能

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

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

11、增加變形操作

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

12、增加動(dòng)畫和交互效果

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

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

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

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

四、CSS3的優(yōu)勢(shì)

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

1、節(jié)約成本

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

圓角切圖

2、提高性能

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

五、瀏覽器對(duì)CSS3的支持

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

瀏覽器對(duì)CSS3選擇器的支持

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

瀏覽器對(duì)CSS3屬性的支持

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

1、屬性

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

2、功能

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

3、語法

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

4、目的

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

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

1、Visual Studio Code

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

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

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

2、Notepad++

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

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

3、WebStorm

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

兼容性：Windows、macOS和Linux。特殊功能：能夠與諸如Stylelint、Grunt、Gulp、以及NPM等Web開發(fā)工具無縫集成。可被內(nèi)置于各種工具中，實(shí)現(xiàn)調(diào)試、跟蹤、以及智能化的自動(dòng)完成等功能。

4、Coda

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

兼容性：macOS。特殊功能：通過與TouchBar集成，提供實(shí)時(shí)的預(yù)覽、以及內(nèi)置的SFTP/FTP。

5、Atom

Atom是由Github構(gòu)建的免費(fèi)開源的編輯器。它不僅僅具有代碼編輯功能，還帶有一個(gè)嵌入式的Git Control，可與GitHub進(jìn)行無縫集成。您可以安裝多個(gè)CSS附加組件，以增強(qiáng)用戶對(duì)CSS編輯的體驗(yàn)。

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

6、Sublime Text

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

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

總結(jié)

優(yōu)化猩SEO：CSS3不僅可以設(shè)計(jì)炫酷美觀的網(wǎng)頁，還能提高網(wǎng)頁性能，在實(shí)際工作開發(fā)中，可以先運(yùn)用相對(duì)穩(wěn)定的 CSS3 特性，并確保不會(huì)對(duì)尚不支持這些特性的瀏覽器造成影響，做到明智的使用，而不是盲目地濫用 CSS3 新特性。

參考鏈接：

CSS3_百度百科

https://baike.baidu.com/item/CSS3/4059544

css3的含義是什么-前端問答-PHP中文網(wǎng)

https://www.php.cn/website-design-ask-479840.html

修改于2023-09-08