CSS 的英文全稱Cascading Style Sheets，中文意思是級聯(lián)樣式表,通過設(shè)立樣式表，可以統(tǒng)一地控制HMTL中各DOM元素的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。

CSS的W3官方網(wǎng)址是:www.w3.org/TR/CSS/,在這個《CSS3實踐之路》中這官方資料是我主要參考資料，此外W3School的CSS3學(xué)習(xí)網(wǎng)址也是我這個系列的主要資料來源，也會有人問既然網(wǎng)站上有這么多學(xué)習(xí)資料，為什么我還出這么一個CSS的學(xué)習(xí)系列，因為一些好的學(xué)習(xí)HTML5和CSS3的網(wǎng)站都國外網(wǎng)站，雖然國內(nèi)也有相關(guān)的學(xué)習(xí)網(wǎng)站，但上面的資源大多是一個一個的特效，并沒有比較系統(tǒng)的學(xué)習(xí)資料，為了提高國內(nèi)網(wǎng)頁設(shè)計水平、拉近與國際網(wǎng)頁設(shè)計水平的距離這一崇高理想，本人不才，特準(zhǔn)備這一CSS3的學(xué)習(xí)系列以饗網(wǎng)友，不足之處還望廣大網(wǎng)友海涵，多多支持。

接下來概括下這個系列要講的內(nèi)容：

1. 盒子模型（Box Model）

2. 顏色（Color）

3. 背景與邊框（Backgrouds and Borders）

4. 文本特效（Text Effects）

5. 2D和3D轉(zhuǎn)換（2D/3D Transformations）

6. 動畫（Animations）

7. 多列布局（Multiple Column Layout）

8. 用戶界面（User Interface）

9. 選擇器（Selectors）

每講一個功能屬性，我都會附上比較好的示例，來加深對CSS3的理解。上面列出的內(nèi)容只是本人目前想到必須要講的內(nèi)容，以后隨著本系列的深入可能會講更多的內(nèi)容，本人在學(xué)習(xí)CSS3某些新效果（2D/3D Transformations? && Gradient）時，更像是定義富媒體（flash&&Sliverlight）外觀，此外在講CSS3的同時，會講些CSS以前版本的內(nèi)容。

雖然CSS3還未正式發(fā)布，但其規(guī)則制定地非常詳細(xì)了，發(fā)布只是個時間問題，由于各瀏覽器對它的支持不盡統(tǒng)一，而我們要設(shè)計的網(wǎng)頁必須要兼容瀏覽器，參考這個網(wǎng)址（http://www.w3schools.com/cssref/css3_browsersupport.asp）來查看目前各瀏覽器對CSS3的支持情況。

下面表格顯示各種瀏覽器前綴

瀏覽器	前綴
Internet Explorer	-ms-
Firefox	-moz-
Google Chrome	-webkit-
Safari	-webkit-
Opera	-o- -xv-（-xv-用于voice相關(guān)的）

?

如果是開發(fā)簡體中文網(wǎng)頁,瀏覽器的兼容性更不好做，因為國內(nèi)有很多”套子瀏覽器”(就是那些用別人瀏覽器的內(nèi)核,而只是換了一些外表),而這些瀏覽器基本上都是使用IE內(nèi)核,而文檔渲染模式(至少默認(rèn)的)為IE7，可能還有一些更古板的國內(nèi)瀏覽器還是IE6模式，這些情況對國內(nèi)的前端設(shè)計者來說真是悲劇，所以我敢說國內(nèi)網(wǎng)站從技術(shù)運用上來說要比國外的網(wǎng)站慢很多年，在IT業(yè)的其它方面也是一樣的，很多IT新技術(shù)、新創(chuàng)意都是在國外火了，才拿到國內(nèi)來應(yīng)用的，比如說團購網(wǎng)站，哎，中國人一直在模仿。。。

說了這么多，接下來展示一個CSS3按鈕的示例，來更大的激發(fā)網(wǎng)友們對CSS3的興趣：

這些是運用CSS3的border-radius、box-shadow和gradient（只有moz和webkit支持）制作出來的效果，當(dāng)然這在支持CSS3的瀏覽器中觀看，本人測試過在以下瀏覽可以看到效果：

IE9 、Firefox4以上、Google Chrome 10以上、Safari5以上 、Opera10.5以上。

下一章我將詳細(xì)講解盒子模型（Box Model）和邊框。

轉(zhuǎn)載于:https://www.cnblogs.com/Wenwang/archive/2011/11/01/2231076.html

總結(jié)

以上是生活随笔為你收集整理的CSS3实践之路(一):CSS3之我观的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。