【學(xué)習(xí)重點】

了解CSS基本概念

掌握CSS基本語法和用法

熟悉CSS基本屬性，屬性值和單位的用法

掌握CSS基本特性

2.1CSS3屬性

CSS3是CSS規(guī)范的最新版本，在CSS2.1的基礎(chǔ)上增加了很多強大的新功能，以幫助開發(fā)人員解決一些實際面臨的問題，并且不再需要非語義標(biāo)簽、復(fù)雜的JavaScript腳本以及圖片。例如，圓角、多背景、透明度、陰影等功能。

2.1.1 CSS的發(fā)展歷史

在20世紀(jì)90年代初，HTML語言誕生。HTML語言誕生，早期的HTML只含有少量的顯示屬性，用來設(shè)置網(wǎng)頁和字體效果，隨著互聯(lián)網(wǎng)的發(fā)展，為了滿足日益豐富的網(wǎng)頁設(shè)計需求，HTML不斷添加了各種顯示標(biāo)簽和樣式屬性，于是就帶來一個問題，網(wǎng)頁結(jié)構(gòu)和樣式混用讓網(wǎng)頁代碼變得混亂不堪，代碼冗余增加了帶寬負(fù)擔(dān)，代碼維護也變得苦不堪言。

1994年初，哈坤·利（Hakon Wium Lie）提出了CSS的最初建議，伯特·波斯（Bert Bos）當(dāng)時正在設(shè)計一款A(yù)rgo瀏覽器，于是他們一拍即合，決定共同開發(fā)css。

1994年底，哈坤在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當(dāng)時W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）組織剛成立，W3C對CSS的前途很感興趣，為此組織了一次討論會，哈坤、波斯是這個項目的主要技術(shù)負(fù)責(zé)人。

1996年底，CSS語言正式完成，同年12月CSS的第一版本被正式發(fā)布（http：//www.w3.org/TR/CSS1/)。

1997年初，W3C組織專門負(fù)責(zé)CSS的工作組，負(fù)責(zé)人是克里斯·里雷，于是該工作組開始討論第一個版本中沒有涉及到的話題。

1998年5月，CSS2版本正式發(fā)布（http://www.w3.org/TR/CSS2/)。

盡管CSS3的開發(fā)工作在2000年之前就開始了，但是距離最終的發(fā)布還有相當(dāng)長的路要走，為了提高開發(fā)速度，也為了方便各主流瀏覽器根據(jù)需要漸進式支持，CSS3按模塊化進行全新設(shè)計，這些模塊可以獨立發(fā)布和實現(xiàn)，這也為日后的擴展奠定了基礎(chǔ)。

考慮到從CSS2到CSS3的發(fā)布間隔時間會很長，2002年工作組啟動了CSS2.1的開發(fā)，這是CSS2的修訂版，它旨在糾正CSS2版本中的一些錯誤，并且更精確地描述CSS的瀏覽器實現(xiàn)，2004年CSS2.1正式發(fā)布，到2006年底得到完善。CSS2.1也成為了目前最流行、獲得瀏覽器支持最完整的版本，它更準(zhǔn)確地反映了CSS當(dāng)前的狀態(tài)。

2.1.2 CSS3新功能

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

CSS3新特性非常多，這里簡單列舉被瀏覽器支持的實用特性。

1、完善選擇器

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

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

2、完善視覺效果

網(wǎng)頁中最常見的效果包括圓角、陰影、漸變背景、半透明、圖片邊框等。而這樣的視覺效果在CSS中都是依賴于設(shè)計師制作圖片或者JavaScript腳本來實現(xiàn)的。CSS3的一些新特性可以用來創(chuàng)建一些特殊的視覺效果，后面的章節(jié)將為大家展現(xiàn)這些新特性是如何實現(xiàn)這些效果的。

3.完善盒模型

盒模型在CSS中是重中之重，CSS2中的盒模型只能實現(xiàn)一些基本的功能，對于一些特殊的功能需要基于JavaScript來實現(xiàn)，而在CSS3中這一點得到了很大的改善，設(shè)計師可以直接通過CSS3來實現(xiàn)。例如，CSS3中的彈性盒子，這個屬性將給大家引入一種全新的布局概念，能輕而易舉實現(xiàn)各種布局，特別是在移動端的布局，他的功能更是強大。

4.增強背景功能

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

5.增加陰影效果

陰影主要為分兩種，文本陰影（text-shadow）和盒子陰影（box-shadow）。文本陰影在CSS中已經(jīng)存在，但沒有得到廣泛的運用。CSS3延續(xù)了這個特性，并進行了新的定義，該屬性提供了一種新的跨瀏覽器方案，是文本看起來更醒目。盒子陰影的實現(xiàn)在CSS2中就有點苦不堪言，為了實現(xiàn)這樣的效果，需要新增標(biāo)簽、圖片、而且效果還不一定完美。CSS3的box-shadow將打破這種局面，可以輕易地為任何元素添加盒子陰影。

6.增加多列布局與彈性盒模型布局

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

多列布局（Multi-column Layout）模塊描述如何像報紙、雜志那樣，把一個簡單的區(qū)塊拆分成多列。彈性盒模型布局（Flexible box layout）模塊能讓區(qū)塊在水平、垂直方向?qū)�齊，能讓區(qū)塊自適應(yīng)屏幕大小，相對于CSS的浮動布局，inline-block布局，絕對定位布局來說，它顯得更加方便與靈活，缺點是：這兩個模塊在一些瀏覽器中還不被支持，但隨著技術(shù)的發(fā)展，各主流瀏覽器會主動支持的。

7.完善Web字體盒Web Font圖標(biāo)

瀏覽器對Web字體有諸多限制，Web Font圖標(biāo)對于設(shè)計師來說更是奢侈。CSS3重新引入@font-face，對于設(shè)計師來說無疑是件好事，@font-face是鏈接布局服務(wù)器上字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體，不再擔(dān)心用戶沒有這些字體而無法正常顯示的問題，從此告別圖片代替特殊字體的設(shè)計時代。

8.增強顏色和透明度功能

CSS3顏色模塊的引入，使得用戶在制作網(wǎng)頁效果使不再局限于RGB和十六進制兩種模式。CSS3增加了HSL、HSLA、RGBA幾種新的顏色模式，在網(wǎng)頁設(shè)計中，能輕松實現(xiàn)某個顏色變得再亮一點或者再暗一點，其中HSLA和RGBA還增加了透明通道，能輕松地改變?nèi)魏我粋�元素的透明度，另外，還可以使用opacity屬性來制作元素的透明度，從此實現(xiàn)透明度效果不再依賴圖片或者JavaScript腳本了。

9.新增圓角與邊框功能

圓角是CSS3中使用最多的一個屬性，原因很簡單，圓角比直線更美觀，而且不會與設(shè)計產(chǎn)生任何沖突，與css制作圓角不同之處是，css3無需添加任何標(biāo)簽元素與圖片，也不需要借用任何javascript腳本，一個屬性就能搞定，對于邊框，在css中僅局限于邊框的線型、粗細(xì)、顏色的設(shè)置，如果需要特殊的邊框效果只能使用背景圖片來模仿。

css3的border-image屬性是元素邊框的樣式變得豐富起來，還可以使用該屬性實現(xiàn)類似background的效果，對于邊框進行扭曲，拉伸、平鋪等。

10.增加變形操作

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

11.增加動畫和交互效果

css3過度（transition）特性可以在網(wǎng)頁制作中實現(xiàn)一些簡單的動畫效果，讓某些效果變得更具流線性、平滑性。而css3動畫（animation）特性能夠?qū)崿F(xiàn)更復(fù)雜的樣式變化，以及一些交互效果，而不需要任何flash或javascript腳本代碼。

12.完善媒體特性與responsive布局

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

2.1.3 瀏覽器支持

css3帶來眾多全新的設(shè)計體驗，但有一個問題值得考慮，瀏覽器對css3特性的支持情況如何？因為頁面最終離不來瀏覽器的渲染，并不是所有瀏覽器都完全支持css3特性，有時候花時間寫的效果只能在特定瀏覽器下有效，這意味著只有部分用戶才能欣賞到，這樣的工作變得沒有什么意義，例如，使用css3制作背景僅在webkit內(nèi)核的瀏覽器下有效果，想知道用戶能夠體驗到哪些css3的新特性，必須了解當(dāng)前瀏覽器對css3特性的支持程度如何。

幸運的是，css3特性大部分都已經(jīng)有了很好的瀏覽器支持度，各主流瀏覽器對css3的支持越來越完善，曾經(jīng)讓多少前端開發(fā)人員心碎的IE也開始挺進css3標(biāo)準(zhǔn)行列，當(dāng)然，即使css3標(biāo)準(zhǔn)制定完成，現(xiàn)代瀏覽器要普及到大部分用戶也是一個相當(dāng)漫長的過程，如果現(xiàn)在就要使用css3來美化你的站點，有必要對各大主流瀏覽器對齊新技術(shù)的支持情況有一個全面的了解。

本節(jié)分別在Mac和windows兩個平臺介紹chrome、firefox、safari、opera和IE5大主流瀏覽器對CSS3新特性和CSS3選擇器的支持情況。