CSS3 介紹

汪磊發表於2013-07-04

什麼是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)的實驗性佈局模組。