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

層疊樣式表

優點

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

速度

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

可維護性

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

可訪問性

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

定製

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

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

一致性

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

可移植性

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

目前的實用性缺點

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

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

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

相關條目

參考資料

Wikiwand in your browser!

Seamless Wikipedia browsing. On steroids.

Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.

Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.