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