什麼是CSS3

什麼是CSS3

　　CSS即層疊樣式表（Cascading Stylesheet）。 在網頁製作時採用CSS技術，可以有效地對頁面的佈局、字型、顏色、背景和其它效果實現更加精確的控制。 只要對相應的程式碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。

　　CSS3是CSS技術的一個升級版本，是由Adobe、Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems 等許多WEB界的巨頭聯合組織的一個名為 “CSS Working Group” 的組織共同協商策劃的。雖然目前很多細節還在討論之中，但它還是不斷地朝前發展著。2010年在HTML5成為IT界人士關注的焦點的同時，它也開始慢慢地普及開來。

CSS 3 新特性概覽

　　理所當然，大部分的CSS3規範都重複了CSS2.1的內容，但也在它的基礎上進行了很多增補和修訂。下面列出來的變更並不全面，全部列出也不太現實，因此我們只羅列了從CSS2.1到CSS3中那些支援度較好、更流行且更實用的變更。

　　不依賴圖片的視覺效果：CSS3包含了大量新特性，可以用來建立一些以前只能通過圖片（或指令碼）才實現的視覺效果，比如圓角、陰影、半透明背景、漸變以及圖片邊框等。在這些新特性之中，多數是屬於"背景和邊框"（Backgrounds and Borders）模組的，其餘的則屬於"色彩和影象"（Colors and Image Values）模組。

　　盒容器變形：CSS3中還有一類視覺效果，讓我們可以在2D或者3D空間裡操作盒容器的位置和形狀，比如旋轉、縮放或者移動。這些特效稱為變形，在"2D變形"（2D Transforms）和"3D變形"（3D Transforms）模組中都有涉及。

　　獨一無二的字型："字型"（Font）模組引入了@font-face規則，讓你能夠引入一個存放於伺服器的字型檔案，並使用該字型來顯示頁面中的文字，這就突破了以往只能使用使用者機器上的字型的限制，也使得頁面能呈現出更漂亮的頁面。

　　強大的選擇器：CSS3新增了十多個選擇器，大部分是偽類和屬性選擇器。你可用它們選取HTML結構中的特定片段而無需增加特定的ID或類，從而精簡程式碼並使之更加不易出錯。這些選擇器都描述在"選擇器"（Selectors）模組裡。

　　過渡與動畫：CSS3的過渡（transition）在其同名的模組裡描述。它是一種簡單的動畫特效，可以平緩地呈現一個元素的樣式變化。例如，當使用者將滑鼠懸停於按鈕之上時漸進且平滑地改變其顏色。更復雜的CSS3"動畫"（animation）特性也在其同名的模組裡有相應描述，它能夠實現更復雜的樣式變化和元素位移，而不需要用到Flash或JavaScript。我們會在第5章討論過渡與動畫。

　　媒體資訊查詢："媒體資訊查詢"（Media Queries）模組介紹瞭如何根據使用者的顯示終端或裝置特徵來提供樣式，這些特徵包括螢幕的可視區域寬度、解析度以及可顯示的色彩數等。媒體資訊查詢是一款非常棒的專門針對移動裝置來實現優化的工具。

　　多列布局：CSS3引入了幾個新模組來幫助我們更方便地建立多列布局。"多列布局"（Multi-column Layout）模組描述瞭如何像報紙佈局那樣把一個簡單的區塊拆分成多列，而"彈性盒容器佈局"（Flexible Box Layout）模組則能夠讓區塊在水平或垂直方向上保持對齊，相對於浮動佈局或絕對定位佈局來說它顯得更為靈活。此外還有"模板佈局"（Template Layout）和"網格定位"（Grid Positioning）的實驗性佈局模組。

相關文件：什麼是HTML5