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

了解CSS基本概念

掌握CSS基本語(yǔ)法和用法

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

掌握CSS基本特性

2.1CSS3屬性

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

2.1.1 CSS的發(fā)展歷史

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

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

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

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

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

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

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

考慮到從CSS2到CSS3的發(fā)布間隔時(shí)間會(huì)很長(zhǎng)，2002年工作組啟動(dòng)了CSS2.1的開(kāi)發(fā)，這是CSS2的修訂版，它旨在糾正CSS2版本中的一些錯(cuò)誤，并且更精確地描述CSS的瀏覽器實(shí)現(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ǔ)上進(jìn)行了很多的增補(bǔ)和修改。與CSS1、CSS2比較，CSS3進(jìn)行了革命性升級(jí)，而不僅限于局部功能的修訂和完善，盡管瀏覽器對(duì)CSS3諸多新特性支持還不是很完善，但是它依然讓用戶(hù)看到了未來(lái)網(wǎng)頁(yè)樣式的發(fā)展方向和使命。

CSS3新特性非常多，這里簡(jiǎn)單列舉被瀏覽器支持的實(shí)用特性。

1、完善選擇器

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

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

2、完善視覺(jué)效果

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

3.完善盒模型

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

4.增強(qiáng)背景功能

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

5.增加陰影效果

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

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

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

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

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

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

8.增強(qiáng)顏色和透明度功能

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

9.新增圓角與邊框功能

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

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

10.增加變形操作

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

11.增加動(dòng)畫(huà)和交互效果

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

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

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

2.1.3 瀏覽器支持

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

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

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