css3代碼和css的不同點(diǎn)是什么

這篇文章將為大家詳細(xì)講解有關(guān)css3代碼和css的不同點(diǎn)是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，行業(yè)涉及成都廣告設(shè)計(jì)等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

不同：css3是css技術(shù)的升級版本，css3中添加了一些新屬性和選擇器，可以更好更方便的進(jìn)行網(wǎng)站的開發(fā)，例如圓角、陰影、漸變、媒體查詢、“:root”選擇器等。css3有兼容問題，有些屬性需要添加針對瀏覽器的前綴以便支持，例“-ms-”。

CSS3是CSS（層疊樣式表）技術(shù)的升級版本，于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的語法是建立在CSS原先版本基礎(chǔ)上的，它允許使用者在標(biāo)簽中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。CSS選擇器中的大部分并不是在CSS3中新添加的，只是在之前的版本中沒有得到廣泛的應(yīng)用。如果想嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級的標(biāo)簽以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級選擇器是非常有用的，它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便地維護(hù)樣式表。

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

選擇符類型	表達(dá)式	描述
子串匹配的屬性選擇符	E[att^="val"]	匹配具有att屬性、且值以val開頭的E元素
	E[att$="val"]	匹配具有att屬性、且值以val結(jié)尾的E元素
	E[att*="val"]	匹配具有att屬性、且值中含有val的E元素
結(jié)構(gòu)性偽類	E:root	匹配文檔的根元素。在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）中，根元素永遠(yuǎn)是HTML
	E:nth-child(n)	匹配父元素中的第n個(gè)子元素E
	E:nth-last-child(n)	匹配父元素中的倒數(shù)第n個(gè)結(jié)構(gòu)子元素E
	E:nth-of-type(n)	匹配同類型中的第n個(gè)同級兄弟元素E
	E:nth-last-of-type(n)	匹配同類型中的倒數(shù)第n個(gè)同級兄弟元素E
	E:last-child	匹配父元素中最后一個(gè)E元素
	E:first-of-type	匹配同級兄弟元素中的第一個(gè)E元素
	E:only-child	匹配屬于父元素中唯一子元素的E
	E:only-of-type	匹配屬于同類型中唯一兄弟元素的E
	E:empty	匹配沒有任何子元素（包括text節(jié)點(diǎn)）的元素E
目標(biāo)偽類	E:target	匹配相關(guān)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新增了很多特性，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、多欄布局、媒體查詢等。

兼容問題

瀏覽器廠商以前就一直在實(shí)施CSS3，雖然它還未成為真正的標(biāo)準(zhǔn)，但卻提供了針對瀏覽器的前綴：

• Chrome（谷歌瀏覽器）：-webkit-

• Safari（蘋果瀏覽器）：-webkit-

• Firefox（火狐瀏覽器）：-moz-

• lE（IE瀏覽器）：-ms-

• Opera（歐朋瀏覽器）：-0-

例如，CSS3漸變樣式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient，而Safari使用-webkit-gradient，這兩種語法都使用了廠商類型的前綴。

需要注意的是，在使用有廠商前綴的樣式時(shí)，也應(yīng)該使用無前綴的。這樣可以保證當(dāng)瀏覽器移除了前綴，使用標(biāo)準(zhǔn)CSS3規(guī)范時(shí)，樣式仍然有效。例如：

#example{
  -webkit-box-shadow：0 3px 5px#FFF;
  -moz-box-shadow：0 3px 5px#FFF;
  -o-box-shadow：0 3px 5px#FFF;
  box-shadow：0 3px 5px#FFF;/*無前綴的樣式*/
}

CSS3瀏覽器兼容情況：

關(guān)于“css3代碼和css的不同點(diǎn)是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

分享標(biāo)題：css3代碼和css的不同點(diǎn)是什么
文章源于：http://muchs.cn/article30/jpddpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、標(biāo)簽優(yōu)化、軟件開發(fā)、品牌網(wǎng)站建設(shè)、定制開發(fā)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)