css3代碼和css的不同點是什么

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

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

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

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

CSS3的語法

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

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

css3新增特性

css3新增了很多特性，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。

兼容問題

瀏覽器廠商以前就一直在實施CSS3，雖然它還未成為真正的標準，但卻提供了針對瀏覽器的前綴：

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

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

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

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

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

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

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

#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的不同點是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。