1982 年 Tim Berners-Lee 為使世界各地的物理學(xué)家能夠方便的進行合作研究以及信息共享，創(chuàng)造了 HTML(HyperText Markup Language) 超文本置標(biāo)語言。1990 年他發(fā)明了世界上第一個瀏覽器 WorldWideWeb。在 1991 年 3 月，他把這發(fā)明介紹給了給他在 CERN 工作的朋友，當(dāng)時網(wǎng)頁瀏覽器被其世界各地的成員用來瀏覽 CERN 龐大的電話薄。1993 年 NCSA 推出了 Mosaic 瀏覽器并迅速爆紅，成為世界上第一個廣泛應(yīng)用的瀏覽器，推動著互聯(lián)網(wǎng)迅猛發(fā)展。在隨后的 5 年里 Netscape 和 MicroSoft 兩個軟件巨頭掀起了一場互聯(lián)網(wǎng)瀏覽器大戰(zhàn)。這場戰(zhàn)爭最后以 MicroSoft 的 Internet Explorer 全勝告終，但它極大的推動了互聯(lián)網(wǎng)的發(fā)展，把網(wǎng)絡(luò)帶到了千千萬萬一般 PC 用戶面前。從 1993 年互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布，到 1999 年 W3C HTML4.01 標(biāo)準(zhǔn)的發(fā)布，HTML 共經(jīng)歷過 5 個版本。如今的 HTML 不僅成為 Web 上最主要的文檔格式，而且在個人及商業(yè)應(yīng)用中都發(fā)揮著它的作用。盡管他還有不足，但是它將成為應(yīng)用最廣泛的格式化文檔。
就在 HTML 迅猛發(fā)展的 90 年代，CSS (Cascading Style Sheet) 也以各種形式應(yīng)運而生。不同的瀏覽器結(jié)合各自 HTML 語法結(jié)構(gòu)實現(xiàn)了很多不同樣式語言支持，讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的顯示方式。最初的 HTML 版本只含有很少的顯示屬性，讀者可以自己來決定網(wǎng)頁應(yīng)該怎樣被顯示。但隨著 HTML 的成長，為了滿足設(shè)計師的要求，HTML 增加了很多顯示功能，隨著這些功能的增加，外來定義樣式的語言越來越?jīng)]有意義了。
1994 年 Håkon Wium Lie 為 HTML 樣式提出了 CSS 的最初建議。Bert Bos 當(dāng)時正在設(shè)計一個叫做 Argo 的瀏覽器，他們決定一起合作設(shè)計 CSS，于是形成了 CSS 的最初版本。1994 年 HHåkon Wium Lie 在芝加哥的一次會議上第一次正式提出了 CSS 的建議，1995 年他與 Bert Bos 一起再次展示這個建議。當(dāng)時 W3C 剛剛建立，W3C 對 CSS 的發(fā)展很感興趣，它為此專門組織了一次討論會。1996 年 12 月 W3C 終于推出了 CSS 規(guī)范的第一版本。這一規(guī)范立即引起了各方的積極響應(yīng)，隨即 MicroSoft 公司和 Netscape 公司紛紛表示自己的瀏覽器能夠支持 CSS1.0，從此 CSS 技術(shù)的發(fā)展幾乎一馬平川。1998 年 W3C 發(fā)布了 CSS 的第二個版本，這也是至今流行最廣目前主流瀏覽器都采用的標(biāo)準(zhǔn)。然而 CSS2.1 的發(fā)布至今已有 12 年歷史。然而在這 12 年中，計算機軟件、硬件、互聯(lián)網(wǎng)已經(jīng)有日新月異的發(fā)展。用戶對視覺用戶體驗提出了更高的要求，開發(fā)人員對如何快速提供高性能、高用戶體驗的 Web 應(yīng)用也提出更高的要求。2005 年 12 月 W3C 開始 CSS3 標(biāo)準(zhǔn)的制定，到目前為止該標(biāo)準(zhǔn)還沒有最終定稿。
在 1997 年 W3C 頒布 HTML4 標(biāo)準(zhǔn)的同時也發(fā)布了有關(guān)樣式單的第一個標(biāo)準(zhǔn) CSS1.0。CSS1.0 較為全面的規(guī)定了文檔的顯示樣式，其大致可分為選擇器、樣式屬性、偽類 / 對象幾個大的部分。選擇器大致分為派生選擇器、ID 選擇器和類選擇器幾種，用來定義你希望應(yīng)用樣式的 HTML 元素或者標(biāo)簽。樣式屬性主要包括 Font 字體、Text 文本、Background 背景、Position 定位、Dimensions 尺寸、Layout 布局、Margins 外邊框、Border 邊框、Padding 內(nèi)邊框、List 列表、Table 表格、Scrollbar 滾動條等等，用來定義你希望改變的樣式。每個屬性都有一個值，屬性和值被冒號分開并由花括號包圍，這樣就組成了一個完整的樣式聲明。通常情況下樣式的應(yīng)用都需要指定你希望應(yīng)用樣式的 HTML 節(jié)點，然而很多時候我們希望動態(tài)的指定節(jié)點，也就是說節(jié)點的樣式需要動態(tài)變化，這就需要偽類來完成。在 CSS1.0 中主要定義了針對錨對象 a 的 link、hover、active、visited 和針對節(jié)點的 first-letter、first-child、first-line 幾個偽類屬性。
CSS1.0 是對 HTML 語法的一次重大革新。以前的 HTML 版本中，各種樣式功能的實現(xiàn)是通過標(biāo)記元素實現(xiàn)的，比如要在一段文字中把一部分文字變成紅色，HTML3.2 中應(yīng)該是這樣的：<p><font color="red">HelloWorld</font></p>。而在 CSS 把這些標(biāo)記屬性化了，利用 CSS 上面的例子變成：<p style="color:red">HelloWorld</p>。CSS 的引入使得文檔的可讀性被大大加強、文檔的結(jié)構(gòu)設(shè)計也更加靈活、HTML 的編寫者可以自己決定文檔的顯示結(jié)構(gòu)和樣式、同時文檔的結(jié)構(gòu)也相應(yīng)的被簡化了。之前由于各個 瀏覽器廠商為了在競爭中取得更多的市場份額，在瀏覽器實現(xiàn)中都加入了很多各自相互不兼容的樣式標(biāo)記，這使得同一個 HTML 文檔很難在多個瀏覽器中兼容。CSS 的出現(xiàn)從一定程度上解決了 HTML 跨瀏覽器通用性的問題。另外，隨著后來 DHTML 的出現(xiàn)，開發(fā)人員可以使用一些 script 語言來動態(tài)修改 HTML 節(jié)點的樣式。這極大的增強了 CSS 的表現(xiàn)力，凸顯出了 CSS 的真正的魅力。
1998 年 W3C 發(fā)布了 CSS 的第二個版本，目前市面上主流的瀏覽器都已經(jīng)支持了 CSS2.1 中 99.9% 的功能。CSS2 規(guī)范是基于 CSS1 設(shè)計的，其包含了 CSS1 所有的功能，并擴充和改進了很多更加強大的屬性。
選擇器
CSS2 提供了更多強大的選擇器來定位 HTML 節(jié)點或者標(biāo)簽。"*"用來匹配任何標(biāo)簽，例如 * {color:red}。大于號">"用于指定父子節(jié)點關(guān)系，例如 AAA > CCC > DDD {color:red} 匹配父節(jié)點分別為 CCC 和 AAA 的節(jié)點 DDD 節(jié)點。空格用來匹配在某一層有某個父節(jié)點的節(jié)點，例如 AAA CCC DDD {color:blue} 匹配包含父節(jié)點 CCC 的父節(jié)點 AAA 的節(jié)點 DDD。加號"+"用于表示在同一個級別節(jié)點之間的關(guān)系，例如 AAA + BBB {color:red} 表示，有一個兄弟節(jié)點 AAA 的節(jié)點 BBB。另外，還可以選擇包含特殊屬性值的節(jié)點，例如：BBB[text="xyz"] {color:blue} 表示包含 text 屬性值為"xyz"的 BBB 標(biāo)簽。
位置模型
最然 CSS1 中已經(jīng)定義了一些關(guān)于位置 Positioning 的屬性，CSS2 進一步增強了這部分功能，增加了 relative、absolute、fixed 幾個值。relative 值：元素框相對父節(jié)點偏移某個距離，元素仍保持其未定位前的形狀，它原本所占的空間仍保留。absolute 值：元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素 原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。fixed 值：元素框的表現(xiàn)類似于 absolute 值，不過其包含塊是視窗本身。在 CSS2 中還有另外一個非常有用的新屬性 z-index，用來指定相互重疊的元素的疊放順序，數(shù)值較大的元素會疊放在數(shù)值較小的元素前面。新的定位模型提供的這些屬性使我們可以更加容易的建立列式及復(fù)雜布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。
布局、表格樣式
display 屬性用來規(guī)定元素應(yīng)該生成的框的類型，但在 CSS1 中只有少數(shù)幾個屬性。CSS2 對該屬性進行了許多擴充，你可以用該屬性指定元素是否會顯示以及如何顯示，也可以使用該屬性配合位置和浮動進行頁面的布局，另外還可以將一個非表格的結(jié)構(gòu)化文檔顯示為一個表格樣式。這是一個非常有用而且重要的功能，可惜例如表格的諸多樣式在 IE 中都不被支持。
媒體類型
很多時候我們設(shè)計 CSS 的時候希望為特定的媒體設(shè)定特定樣式，例如用于屏幕和打印的兩個媒介，在屏幕顯示時字體應(yīng)比打印時稍大一些，屏幕上無襯線字體要容易閱讀一些，而在紙面上有襯線的字體要容易閱讀一些。因此我們有必要對不用媒體聲明不同的樣式。CSS2 引入了媒介類型，用于對不同的媒介類型定義不同的樣式。可用的媒介類型有：aural 用于語音和音頻合成器，braille 用于盲人用點字法觸覺回饋設(shè)備，embossed 用于分頁的盲人用點字法打印，handheld 用于小的手持的設(shè)備，print 用于打印機，projection 用于方案展示如幻燈片，screen 用于電腦顯示器。
偽類
在 CSS2 中不但增加了 :focus、:first-child、:lang 等幾個新的偽類，同時還擴充了偽類的使用范圍。使得偽類不但可以和原來一樣應(yīng)用于 a 錨標(biāo)簽，還可以應(yīng)用到一個類和標(biāo)簽上，例如 : link:hover、myClass:hover。
光標(biāo)樣式
CSS2 的另一大亮點就是增加了 cursor 屬性，這一屬性指定了指定設(shè)備應(yīng)該顯示怎樣的光標(biāo)類型。光標(biāo)的可選類型有：auto 基于上下文自動決定顯示光標(biāo)、 crosshair 十字線、default 基于平臺的缺省光標(biāo)、pointer、指針光標(biāo)、 move 表示移動、e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize 表示正在移動某個邊、text 表示可以選擇文本、wait 表示程序正忙、 help 表示幫助。
CSS2 規(guī)范中還有一些屬性和增強，這里我們就不一一列出了。這些新功能極大的增強了 CSS 和 HTML 的表現(xiàn)能力，使得 Web 應(yīng)用擁有和本地應(yīng)用程序一樣的表現(xiàn)力，甚至是更好的用戶體驗。雖然 CSS 規(guī)范有如此之多的優(yōu)點，但其推廣和采用卻一直很艱難。首先 CSS1 于 1996 年發(fā)布同年 Internet Explorer3 宣稱部分支持 CSS1，然而直到 3 年后大部分的瀏覽器才全部支持 CSS1。之后瀏覽器大多都宣稱部分支持 CSS2，然而是直到 2009 年 3 月 Internet Explorer8 才全部支持 CSS2.1。其次瀏覽器的支持也是五花八門，各種各樣的 Bug 和詭異的行為，都使得設(shè)計開發(fā)一個跨平臺且表現(xiàn)一致的 web 應(yīng)用變得非常困難。瀏覽器支持的現(xiàn)狀和各種問題使得 W3C 不得不在 2007 年最終修訂 CSS2 為 CSS2.1，刪除和修改一些屬性和行為，使其更接近當(dāng)前瀏覽器支持和實現(xiàn)。
CSS2 可以說是 CSS 發(fā)展歷史上的一個里程碑，它對 Web 應(yīng)用的發(fā)展有不可磨滅的作用。然而使得全部瀏覽器支持該標(biāo)準(zhǔn)卻花費了數(shù)十年的時間。在這十幾年間，計算機軟硬件和網(wǎng)絡(luò)技術(shù)已經(jīng)有了長足的發(fā)展，用戶對視覺體驗提出了更高的要求，開發(fā)人員對如何快速提供高性能、高用戶體驗的 web 應(yīng)用也提出更高的要求。面對更高用戶體驗、更強交互性需求時，CSS2 顯得有些力不從心。
CSS3 的新特性
早在 2001 年 5 月，W3C 就著手開始準(zhǔn)備開發(fā) CSS 第三版規(guī)范。CSS3 規(guī)范一個新的特點是規(guī)范被分為若干個相互獨立的模塊。一方面分成若干較小的模塊較利于規(guī)范及時更新和發(fā)布，及時調(diào)整模塊的內(nèi)容。另外一方面，由于受支持設(shè)備和瀏覽器廠商的限制，設(shè)備或者廠商可以有選擇的支持一部分模塊，支持 CSS3 的一個子集。這樣將有利于 CSS3 的推廣。相信這對以前 CSS 支持混亂的局面將會有所改觀。
下圖是 W3C 關(guān)于 CSS3 規(guī)范新模塊的一個開發(fā)進度表，綠色背景表示將成為 CSS3 規(guī)范的核心模塊。HTML Basic、CSS3 和 SVG 三列表示各個模塊和他們之間的相關(guān)度，沒有涉及到的模塊未來可能會被從規(guī)范中移除。黃色背景表示該模塊未來很可能會被從規(guī)范中移除。
CSS3 規(guī)范的全面推廣和支持看起來還遙遙無期，但是目前主流瀏覽器都已迫不及待的開始支持 CSS3 部分特性了。雖然這部分特性還相對較少，但是這些以前很難使用 Javascript 和圖片實現(xiàn)的效果依然令程序要興奮不已。下面就簡單介紹一下主流瀏覽器實現(xiàn)的一些 CSS3 新特性。
屬性選擇器
在 CSS3 中新添加了三個屬性選擇器 [att^="value"] [att$="value"] [att*="value"] 用來匹配屬性中間包含某些特定的值。例如：
a[title$="IBM BTT"] { //add your property here }
|
表示有 title 屬性并以字符"IBM BTT"結(jié)尾的錨節(jié)點。
CSS3 中唯一新引入的連字符是通用的兄弟選擇器（同級）。它針對一個元素的有同一個父級節(jié)點的所有兄弟級別元素。比如，給某個特定的 div 的同級的圖片添加一個灰色的邊框 (div 和圖片應(yīng)該有同一個父級節(jié)點 )，在樣式表中定義下面的樣式就足夠了：
div~img { //add your property here }
|
目前這幾個選擇器除了 IE6 外的其他主流瀏覽器都支持。
RBGA 透明度
RGBA 讓你可以不僅僅設(shè)定色彩，還能設(shè)定元素的透明度。例如：
background:rgba(254, 255, 200, 0.75); |
當(dāng)設(shè)定一個 RGBA 色彩的時候，參數(shù)依次設(shè)定為紅、藍(lán)、和綠色的顏色值，可以是 0-255 或百分?jǐn)?shù)。最后一個參數(shù)為透明值應(yīng)該在 0 到 1 之間，例如 0.5 代表 50% 的透明度。RGBA 和 Opacity 之間的不同點是前者只會應(yīng)用到指定的元素上，而后者會影響我們指定的元素及其子元素。
目前支持 RBGA 顏色的瀏覽器有 WebKit 核心系列瀏覽器、Firefox 3+ 和 Opera 9.5+，IE 全系列瀏覽器都不支持。
多欄布局
這是新的 CSS3 選擇器可以讓你不用使用多個 div 標(biāo)簽就能實現(xiàn)多欄布局。瀏覽器解釋這個屬性并生成多欄，讓文本實現(xiàn)一個仿報紙的多欄結(jié)構(gòu)。tweetCC在其首頁上將介紹文字顯示為四欄，這四欄并非浮動的 div 而是使用下面的 CSS3 多欄布局：
-moz-column-count : 4; -moz-column-gap : 20px; |
我們可以通過這個選擇器定義三件事情：欄數(shù) (column-coun)、欄寬 (column-width、例子中沒有用到 ) 和各欄之間的空白 / 間距 (column-gap)。 如果 column-count 未設(shè)定，瀏覽器會在允許的寬度內(nèi)容納盡可能多的欄目。為了在各欄時間添加一個數(shù)值的分隔，我們可以使用 column-rule 屬性，其功能和 border 屬性類似 :
column-rule: 1px solid #00000; |
目前多欄布局目前被 Webkit 核心系列瀏覽器和 Firefox 2+ 瀏覽器支持。
多背景圖
CSS3 允許你使用多個屬性比如 background-image、background-repeat,、background-size、 background-position、background-originand 和 background-clip 等在一個元素上添加多層背景圖片。在一個元素上添加多背景的最簡單的方法是使用簡寫代碼，你可以指定上面的所有屬性到一條聲明中，只是最常用的還是 image, position 和 repeat:
background: url(example.jpg) top left no-repeat, url(example2.jpg) bottom left no-repeat, url(example3.jpg) center center repeat-y; |
目前支持形變的瀏覽器有 Webkit 系列瀏覽器、FireFox3.5+、Opear10.5+。
Word Wrap
word-wrap 屬性用來防止太長的字符串溢出的。可以用兩個屬性值 normal 和 break-word。normal 值 ( 默認(rèn)的 ) 只在允許的斷點截斷文字，如連字符。如果使用了 break-word ，文字可以在任何需要的地方截斷以匹配分配的空間并防止溢出。
目前該屬性被 IE8、Webkit 核心瀏覽器、Firefox3.5+、Opear10+ 支持。
塊陰影與圓角陰影
盡管在 CSS2 中就已經(jīng)存在，box-shadow、text-shadow 是兩個未被廣泛應(yīng)用的 CSS 屬性。它們將在 CSS3 中被廣泛采用。這兩個屬性給設(shè)計師一個新的跨瀏覽器的工具來為設(shè)計添加一個維度以使文字和邊框更加醒目、具有立體感。從此你不再需要 Photoshop 去處理很多復(fù)雜零碎的圖片了。
box-shadow：10px 10px 25px #ccc; text-shadow：10px 10px 25px #ccc; |
前兩個屬性設(shè)置陰影的 X/Y 位移，這里分別是 10px，第 3 個屬性定義陰影的虛化程度，最后一個設(shè)置陰影的顏色。
目前這個屬性被 webkit 核心瀏覽器、FireFox3.1+、Opera9.5+ 支持。
圓角
CSS3 新功能中最常用的一項就是圓角效果，Border-radius 無需背景圖片就能給 HTML 元素添加圓角。不同于添加 Javascript 或多于的 HTML 標(biāo)簽，僅僅需要添加一些 CSS 屬性并從好的方面考慮。這個方案是清晰的和比較有效的，而且可以讓你免于花費幾個小時來尋找精巧的瀏覽器方案和基于 Javascript 圓角。
border-radius: 6px 6px 6px 6px; |
目前 IE9、webkit 核心瀏覽器、FireFox3+ 都支持該屬性。
邊框圖片
border-image 屬性允許你在元素的邊框上設(shè)定圖片，讓你從通常的 solid、 dotted 和其它邊框樣式中解放出來。該屬性給設(shè)計師一個更好的工具，用它可以方便的定義設(shè)計元素的邊框樣式，比 background-image 屬性 ( 對高級設(shè)計來說 ) 或枯燥的默認(rèn)邊框樣式更好用。我們也可以明確的定義一個邊框可以被如何縮放或平鋪。
border：5px solid #cccccc; border-image：url（/images/border-image.png）5 repeat; |
目前支持的瀏覽器有 Webkit 核心瀏覽器、FireFox3.1+。
形變
在過去在 web 中想要達(dá)到 rotate 旋轉(zhuǎn)、scale 伸縮、skew 傾斜這些效果，我們通常需要依賴于圖片或者 Flash。在 CSS3 通過 transform 實現(xiàn)一些形變的效果將變得非常簡單。
transform:rotate(2deg) scale(0.90,0.85) translate(0px,0px) skew(0deg,0deg); transform-origin:15% 25%; |
在變形屬性中，我們可以通過 transform-origin 指定變形的起始點（比如對象的中心或者右上角等）。還可以指定變形的類型（也稱為變形函 數(shù)），并在函數(shù)后面的括號中指定的變形的程度。比如，translate(10px, 20px) 將會把相應(yīng)的元素從原位置右移 10 個像素，下移 20 個像素。其他支持的變形函數(shù)還包括：旋轉(zhuǎn)（rotate）、伸縮（scale）、傾斜 （skew）。
目前支持形變的瀏覽器有 Webkit 系列瀏覽器、FireFox3.5+、Opear10.5+，IE 全系列不支持。
使用 CSS 沒有做不到的效果，只有你不敢想象的，前一陣我就驚訝的發(fā)現(xiàn)一個使用純 CSS 和 HTML 實現(xiàn)的多啦 A 夢卡通效果。CSS3 為我們帶來的驚喜不只是簡單功能性增強，更多的是一種對 Web UI 設(shè)計理念和方法的變革。CSS3 結(jié)合 HTML5 使得 Web 應(yīng)用可以提供和本地應(yīng)用程序一樣甚至更強大的功能，并且有更好的用戶體驗，同時也不需要額外安裝軟件，不必對軟件版本升級兼容性等麻煩問題擔(dān)憂。可以暢想，在未來的 PC 上我們已經(jīng)不需要操作系統(tǒng)以及任何其他應(yīng)用程序，開機只需要一個瀏覽器就可以解決所有問題。相信未來 CSS3 配合 HTML5 標(biāo)準(zhǔn)，將極大的引起一場 Web 應(yīng)用的變革，甚至是整個 Internet 產(chǎn)業(yè)的變革。