CSS 與 XSL
網頁上的樣式表

1999 年 4 月 2 日
張錦堂

簡介

樣式表 (Style Sheet) 是用於控制文件內容在顯示時的版面風格,例如文件內容在頁面上的左右邊距;各式標題及文字的字體種類,大小及顏色,置中或靠右等等。使用樣式表的主要目的是將資料的內容與版面風格分開,因此一份文件只要使用不同的樣式表就可以很方便的呈現不同的風格。

傳統上,樣式表使用在文件編輯軟體中,例如 WordPro 或 Word 等。在全球資訊網 (WWW) 上設計 HTML 網頁時更是需要類似的機制來協助設計及運作。例如在設計一個網站時,所有的網頁都引用同一個樣式表時,整個網站就很容易的呈現出同一個風貌了,而且每隔一段時間要更新風格時,只要修改樣式表,整個網站就立刻更新為新的風格,而不用一個個的修改各個網頁了,而且隨著瀏覽器功能的增加,也可以只修改樣式表,就可以運用新的功能。更進一步,使用者可能使用不的的設備讀取 WWW 上的網頁,例如傳統的個人
電腦的螢幕上顯示;將網頁由印表機印出,或是使用網路電視 (Set Top Box),個人電子助理 (PDA),甚至是供視障或聽障人士使用的語音合成或點字設備來讀取網頁。樣式表可以針對不同的對象設定版面風格,使您的網站以最佳的狀況呈現。

目前由『全球資訊網標準製定組織』 (W3C) 所製定與樣式表有關的規格有 CSS 及 XSL。本文將略述其進度,功能及用途,並比較兩者的異同及合併使用的概念. CCS 可運用在 HTML 及 XML 檔,而 XSL 主要是針對
XML 檔使用。XML 是「可擴展標示語言」(eXtensible Markup Language)。本文中所使用的『標示』(tag) 一詞,在 XML 的正確名稱是『元素』(element)。

CSS

層級式樣式表 (Cascading Style Sheet, CCS) 分為 Level 1 及 Level 2,分別簡稱為 CCS1 及 CCS2。CCS1 是在 1996 年 12 月完成製定,並在1999 年 1 月增修。在 Netscape 的 Navigator 4.0 版及微軟的 IE 3.0 版
瀏覽器都開始支援 CSS1,不同的版本所支援的程度也不同。CCS2 的規格在 1998 年 5 月完成製定,目前瀏覽器只支援其中的少許功能。

樣式表是提供網頁的編寫人員可以針對 HTML 文件設定在顯示時的版面格式及樣式,例如使用何種字體及其顏色,大小及字距等。層級式 (Cascading) 是表示外部的樣式表,內建的樣式表及行內的樣式表,這三種樣式設定的採用的優先順序是以行內最高,接著是內建,外部設定的優先順序最低。例如:

<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css">
<style type="text/css"><!--
p { font-weight: bold; color: blue }
--></style>
</head>
<body>
<h1>CSS 範例</h1>
<p>第一段</p>
<p style="color: red">第二段</p>
</body>
</html>


第 3 行是表示引用外部的 my.css 檔,其檔案內容如下:

p { font-size: 12pt; color: black }


表示 <p> 標示的字體大小為 12pt,顏色為黑色。

第 5 到 7 行是內建的樣式表設定,表示 <p> 標示的字體為 bold,顏色為藍色。倒數第 3 行是行內的樣式設定,表示字體顏色為紅色。因為層級式的優先順序規則,所以顯示時的結果為:『第二段』字體為紅色,因為行內的樣式設定有最高的採用順序;『第一段』字體為粗體藍色;而這兩段的字體大小為 12 pt,因為外部的 my.css 檔如是設定。

傳統上,瀏覽器對每個 HTML 的標示都有其內定的樣式,網頁編寫者無法進行較為細緻的版面控制,因此採用圖片及 <TABLE> 標示等等變通方法來安排版面,因此造成不易編排及維護網頁。通常在 HTML 中使用 <FONT> 標示的 FACE,COLOR 及 SIZE屬性來改變字體,顏色及大小,在採用 CCS 的方式後,您就不要再用這個標示了,因為您可以很容易的使用外部或內建的樣式表,將同一類的內容設定為某種顯示樣式,也很方便修改。
而且可以對版面的 margin, padding, border, 背景及文字內容的字體種類,大小,形態,字距,行距,對齊方式等屬性有更精細的控制了。

CCS2 是建構在 CCS1 的基礎上,除了 CCS1 的功能外還提供了與輸出媒體有關的樣式表。例如可以使用 CCS2 使文件可以針對不同的顯示式瀏覽器,語音輸出設備,列表機,盲胞用點字設備或掌上型設備等,進行特殊的設定。CCS2 更提供了更精準的內容定位,可下載字型,表格格式,國際化及一些與使用者介面有關的設定。

CSS 雖然可以提供強大的版面編排功能,但是不同廠商及不同版本的瀏覽器所支援的功能及呈現出的效果都有差異,所以設計時,需要對不同的瀏覽器進行測試或是標明您的網頁需要用那一個瀏覽器來閱讀。

XSL

『可擴展式樣式表語言』 (eXtensible Style Language, XSL) 是個正在製定中的規格。在 1998 年 12 月 W3C 提出了 1.0 版的草案。筆者推測最後的正式規格會有許多的更改。XSL 是一個用來描述樣式表的語言。XSL 語言包含兩個部份:

1. 一個可以轉換 XML 文件的語言。
2. 一組排版指令 (formatting object) 的 XML 標示。

XSL 的格式本身也是符合 XML 的檔案。使用 XSL 樣式表可以將 XML 文件轉換為可顯示的格式,也可以將文件結構轉換為另一個結構。在此舉例說明 XSL 的基本處理機制。

例如有個 XML 文件內容如下:

<?xml version="1.0" ?>
<doc>
<chapter>
<title>第一章</title>
<p>第一段</p>
</chapter>
<chapter>
<title>第二章</title>
<p>第一段</p>
</chapter>
</doc>

可以用下列 XSL 樣式表,將其轉換為 HTML 檔:

<?xml version="1.0"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/TR/WD-xsl"
xmlns="http://www.w3.org/TR/REC-html40"
result-ns="">

<xsl:template match="/">
<html><body>
<xsl:apply-templates />
</body></html>
</xsl:template>

<xsl:template match="chapter">
<h1><xsl:value-of select="title"/></h1>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="p">
<p><xsl:value-of select="."/></p>
</xsl:template>
</xsl:stylesheet>

第 3 到 5 行為名稱領域 (namespace) 的宣告,因為在這份 XSL 樣式表中使用了 XSL 及 HTML 兩種不同的標示。為了區別,因此宣告只要是加 xsl: 的標示是屬於 XSL 的部份,其他的是屬於 HTML 的標示。執行 XSL 系統時,指定 XML 原始文件及 XSL 樣式表後,系統先將文件以樹狀結構建立『原始樹』(source tree)。XSL 主要是以『樣本』(template) 及其『比對模型』(match pattern) 構成轉換規則。在這個例子中的『比對模型』的值是標示名稱,也就是 match="chapter" 是比對文件中的 <chapter> 在原始樹中的節點 (node),而 match="/" 表示原始樹的的根部 (root)。比對是由根部開始進行的。當比對符合時,就依照 template 中所撰寫的樣本內容建立『結果樹』(result tree)。樣本內容中可以使用 XSL 的各種指令來選取原始樹中的任意節點的內容,例如 <xsl:value-of select="title"/> 就是選擇在 <chapter> 節點中的 <title> 節點的文字內容。也可以用 XSL 指令在『結果樹』中建立
任何的標示或屬性 (attribute),因此最後所產生的結果是完全與原始文件不同的結構。

經由 XSL 的處理機制,可運用的例子為:擷取原始文件中的章節標題產生『目錄』或將 XML 文件轉為HTML 檔,甚至自動產生程式碼。一個完整的 XSL 系統可以處理『排版指令』,因此可以將 XML 文件轉換為其他排版格式,例如 PDF,TeX,RTF 等。XSL 本身是遵循 XML 格式,而不是一種程式語言,所以也有許多的工作無法使用 XSL 來完成,這時可能需要使用 XML 剖析器,使用 DOM (Document Object Model) 程式介面來處理 XML 文件了。

CSS 與 XSL 的比較

CSS 使用簡單的比對,然後直接將設計者所設定的顯示屬性值使用在文字區塊上,因此完全沒有改變原始文件的結構及內容順序;而 XSL 提供了較複雜的機制,可以隨意的比對原始文件的結構及選擇其內容,建構出全新的文件。下表列出 CSS 及 XSL 幾項重要的異同點:

  CSS XSL
可以使用在 HTML 檔中嗎 ? 可以 不行
可以使用在 XML 檔中嗎 ? 可以 可以
是個轉換語言嗎 ? 不是 是的
語法格式 CSS XML

假如您使用 XSL 將 XML 原始文件轉換為 HTML 文件時,可在所產生的結果中加入 CSS 的設定,這樣 XSL 與 CSS 就可以合作無間了。

結語

CSS 規格已經製定完成而且軟體的使用環境也很成熟,所以您可以購買較新版的書籍以便深入瞭解;而 XSL 只在完成草案的階段,可以供測試的軟體中,每一種都與草案中的功能有所出入,而且經常更新,所以在網路上取得最新的訊息是最好的辦法,特別是拜訪 W3C 的網站:http://www.w3.org