樣式表

層疊樣式表

• CSS動畫
• IE盒模型缺陷
• CSS filter
• 無表格網頁設計
• 響應式網頁設計
• 維基教科書

樣式表是一種將網頁的內容和表示分離的網頁設計形式，在網頁設計中網頁標記（HTML或XHTML）包含頁面的語義內容和結構，但沒有定義其可視化布局（風格）。相反，風格的定義是在一個外部的樣式表文件中，使用如CSS、XSLT樣式表語言。這種設計方法被認為是一種「分離」，因為它在很大程度上取代了以前風格和結構在一起的定義方法。 這種方法背後的哲學是一種關注點的分離。

優點

形式和內容分離有一些優點，但只有在主流web瀏覽器支持CSS的時候才行。

速度

總的來說，利用樣式表的網站的用戶體驗通常會更快，相比不使用該技術的網站。「整體」來講第一頁可能加載更慢—因為需要傳輸樣式表和內容。後續頁面加載速度會變快，因為沒有樣式信息需要下載——因為CSS文件已經在瀏覽器的緩存中了。

可維護性

將所有樣式保存在一個文件中可以減少維護的時間，減少錯誤的機會，從而提高表達的一致性。例如，網頁上某個級別的標題可能用一種特定的顏色表示，當要修改這些標題的顏色的時候，只需要改變CSS文件中的一個短短的字符串即可。而如果使用以前的方法將樣式嵌入在每個頁面，需要編輯每個文件，從而繁瑣，費時費力，而且容易出錯。

可訪問性

使用CSS的HTML或XHTML網站更容易調整，以適應不同的瀏覽器((Internet Explorer、火狐、Opera、Safari等等)。 在瀏覽器中使用「完全降低」（「degrade gracefully」）CSS的網站不能顯示圖形內容，如Lynx或那些很老的不支持CSS的瀏覽器。瀏覽器忽略它們不能解釋的CSS，比如CSS 3語句。這使得各種各樣的用戶代理都能夠訪問網站的內容，即使他們不能呈現樣式表或帶有圖形能力的設計。例如，一個使用可刷新點字顯示輸出的瀏覽器可以完全無視布局信息，並且用戶仍然可以訪問所有頁面內容。

定製

如果一個頁面的布局信息存儲在外部，用戶可以決定是否完全禁止布局信息，使網站的內容仍然保持一種可讀的形式。網站的作者也可以提供多個樣式表，可以在沒有改變它的任何內容的情況下，徹底改變網站的外觀。

大多數現代瀏覽器還允許用戶定義自己的樣式表，覆蓋原有的布局。例如，允許用戶加粗用戶訪問的每個頁面上的每個超連結。

一致性

因為語義文件只包含作者想要傳達的含義，文檔內容中各種元素的樣式是非常一致的。例如，標題、強調文本、列表和數學表達式都使用樣式表中定義的樣式屬性。在創建頁面的時候不需要關心樣式屬性的組合。這些表象細節可以推遲到呈現的時刻。

可移植性

表現的細節可以延遲到展示的時候才考慮，這意味著文檔可以很容易被重新編排，在一個完全不同的媒介上展示，只需要為新的表達媒介準備一個新的樣式表，同時符合語義文檔中元素或結構的詞彙。只要通過應用一個新的樣式表，精心撰寫的web頁面文檔便可以很容易地被印刷成裝訂卷，並含有完整的頁眉和頁腳，頁碼和生成的目錄。

目前的實用性缺點

目前規範（例如：XHTML、XSL、CSS）和實現這些規範的軟體工具只是達到早期成熟階段。所以試圖接受這種內容和形式分離的方法還面臨一些世紀性的問題。

沒有解析和生成工具導致應用範圍小

風格規範仍然相當成熟，軟體工具也已經逐漸適應。最主要的web開發工具大多數還是使用內容形式混合的網頁編寫方式。所以作者和設計者嘗試開發基於圖形界面的網頁編輯工具，但發現很難按照語義web方法開發基於GUI的工具。除了GUI工具，廣義樣式表共享庫可能會有助於這些方法的落地。

相關條目

• 層疊樣式表