CSS 的英文全稱Cascading Style Sheets,中文意思是級聯樣式表,通過設立樣式表,可以統一地控制HMTL中各DOM元素的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表,可以擴充精確指定網頁元素位置,外觀以及創建特殊效果的能力。
CSS的W3官方網址是:www.w3.org/TR/CSS/,在這個《CSS3實踐之路》中這官方資料是我主要參考資料,此外W3School的CSS3學習網址也是我這個系列的主要資料來源,也會有人問既然網站上有這么多學習資料,為什么我還出這么一個CSS的學習系列,因為一些好的學習HTML5和CSS3的網站都國外網站,雖然國內也有相關的學習網站,但上面的資源大多是一個一個的特效,并沒有比較系統的學習資料,為了提高國內網頁設計水平、拉近與國際網頁設計水平的距離這一崇高理想,本人不才,特準備這一CSS3的學習系列以饗網友,不足之處還望廣大網友海涵,多多支持。
接下來概括下這個系列要講的內容:
1. 盒子模型(Box Model)
2. 顏色(Color)
3. 背景與邊框(Backgrouds and Borders)
4. 文本特效(Text Effects)
5. 2D和3D轉換(2D/3D Transformations)
6. 動畫(Animations)
7. 多列布局(Multiple Column Layout)
8. 用戶界面(User Interface)
9. 選擇器(Selectors)
每講一個功能屬性,我都會附上比較好的示例,來加深對CSS3的理解。上面列出的內容只是本人目前想到必須要講的內容,以后隨著本系列的深入可能會講更多的內容,本人在學習CSS3某些新效果(2D/3D Transformations? && Gradient)時,更像是定義富媒體(flash&&Sliverlight)外觀,此外在講CSS3的同時,會講些CSS以前版本的內容。
雖然CSS3還未正式發布,但其規則制定地非常詳細了,發布只是個時間問題,由于各瀏覽器對它的支持不盡統一,而我們要設計的網頁必須要兼容瀏覽器,參考這個網址(http://www.w3schools.com/cssref/css3_browsersupport.asp)來查看目前各瀏覽器對CSS3的支持情況。
下面表格顯示各種瀏覽器前綴
瀏覽器 | 前綴 |
Internet Explorer | -ms- |
Firefox | -moz- |
Google Chrome | -webkit- |
Safari | -webkit- |
Opera | -o- -xv-(-xv-用于voice相關的) |
?
如果是開發簡體中文網頁,瀏覽器的兼容性更不好做,因為國內有很多”套子瀏覽器”(就是那些用別人瀏覽器的內核,而只是換了一些外表),而這些瀏覽器基本上都是使用IE內核,而文檔渲染模式(至少默認的)為IE7,可能還有一些更古板的國內瀏覽器還是IE6模式,這些情況對國內的前端設計者來說真是悲劇,所以我敢說國內網站從技術運用上來說要比國外的網站慢很多年,在IT業的其它方面也是一樣的,很多IT新技術、新創意都是在國外火了,才拿到國內來應用的,比如說團購網站,哎,中國人一直在模仿。。。
說了這么多,接下來展示一個CSS3按鈕的示例,來更大的激發網友們對CSS3的興趣:
這些是運用CSS3的border-radius、box-shadow和gradient(只有moz和webkit支持)制作出來的效果,當然這在支持CSS3的瀏覽器中觀看,本人測試過在以下瀏覽可以看到效果:
IE9 、Firefox4以上、Google Chrome 10以上、Safari5以上 、Opera10.5以上。
下一章我將詳細講解盒子模型(Box Model)和邊框。