技巧: 使用 CSS2 顯示 XML 文檔::XSLT 的一種不太“昂貴”的替代方法

級(jí)別: 初級(jí)

David Mertz，博士, 審查者, Gnosis Software, Inc.

2001 年 12 月 01 日

沒 有定制編輯器和查看器，閱讀 XML 數(shù)據(jù)是相當(dāng)困難的。一種查看 XML 的輕量型方法就是：將級(jí)聯(lián)樣式表（cascading style sheet (CSS2)）附加到 XML 文檔上，然后使用最新的 Web 瀏覽器來查看這些 XML 文檔（Mozilla 非常棒，通常 IE 就足夠了）。developerWorks 專欄作家 David Mertz 在本技巧文章中討論了這一替代方法。

閱讀 XML 文檔對于人類來說并不容易。XML 文檔全是文本，但是各部分的可視安排未必很好地對應(yīng)于各部分之間概念上的連接。而且，在標(biāo)記當(dāng)中查找內(nèi)容使得略讀也很困難。當(dāng)然，XML 的主要目的并不是作為供人類直接查看的一種格式。通常，在 XML 源代碼能夠?yàn)槿藗兯斫馇埃? 將其轉(zhuǎn)換成其它格式。對于面向散文的文檔，目標(biāo)通常是 HTML 頁面或 PDF 文件（通過“格式編排對象 [FO]（Formatting Object，F(xiàn)O）”標(biāo)記），也可以是一個(gè)打印頁面。常用 XSLT 來執(zhí)行到人類可讀格式的轉(zhuǎn)換。對于面向數(shù)據(jù)的 XML 文檔，目標(biāo)一般是 DBMS 數(shù)據(jù)格式或讀取 XML 文 件的應(yīng)用程序提供的內(nèi)存表示。

但是，developerWorks 的讀者通常都是開發(fā)人員。我們的重點(diǎn)是介紹可以并且應(yīng)該不讓最終用戶煩惱的許多事物。當(dāng)在格式轉(zhuǎn)換的幕后行蹤中出現(xiàn)問題時(shí)，我們的工作就是詳查中間格式 （包括 XML）。通常，在開發(fā)過程期間，我們還要負(fù)責(zé)開發(fā)樣本或測試 XML 文檔， 以模擬可能發(fā)生的情況或進(jìn)入到分布式應(yīng)用程序中的某一階段（在實(shí)際的生成器或客戶存在之前）。

與一些格式比較，原始格 式的 XML 比較好管理。與二進(jìn)制格式不同，在文本編輯器或文本查看器中打開 XML 文檔也不是不可能。但是，標(biāo)記很難可視地進(jìn)行解析，特別是在 XML 編寫者沒有為便于解析而排列垂直和水平空白的情況下。如果您的工作主要是閱讀原始 XML 文檔，請查看我 以前評(píng)論過的 XML 編輯器之一（請參閱 參考資料）。但是，對于只是偶爾查看 XML 源文件的人（或當(dāng)許多人需要查看這些文件時(shí)），XML 編輯器往往顯得太貴；不僅因?yàn)楂@得許可證的費(fèi)用，還有學(xué)習(xí)曲線方面。

使用 Web 瀏覽器

幾乎所有開發(fā)人員都已安裝了一個(gè)非常好的 XML 查看器……好吧，至少是相當(dāng)不錯(cuò)的。最新版本的 Internet Explorer 和 Mozilla/Netscape 都努力同時(shí)解釋 XML 文檔與 HTML 文檔。其它象 Opera 和 Konquorer 那樣的瀏覽器也實(shí)現(xiàn) CSS2 ― Opera 5+ 工作得很完美，Konqueror 2.2 是一個(gè)相當(dāng)好的瀏覽器。大體上，Mozilla 和 Netscape 6 在顯示以 CSS2 樣式表中表示的樣式的 XML 文檔上做得非常好，而且準(zhǔn)確。Internet Explorer（至少是版本 6）做得也不錯(cuò)，只是好象忽略了 display: inline 屬性。這使得 IE6 不太適合于顯示面向散文的 XML 文 檔（但它對于面向數(shù)據(jù)的 XML 文檔仍然不錯(cuò)）。不過，IE6 在顯示分層樹中缺少 CSS2 樣式表的 XML 文檔方面確有優(yōu)勢，而且它允許折疊子樹。

通 常，我不是使用 XMetal（帶有我 developerWorks 同事 Beno?t Marchal 提供的一些 XMetal“規(guī)則”），就是用我稱之為“智能 ASCII”來編寫源代碼，并使用我編寫的 txt2dw.py 工具將它轉(zhuǎn)換為 XML。txt2dw.py 工具將文本轉(zhuǎn)換成 developerWork 的 XML 手稿格式。作為練習(xí)，我決定只使用文本編輯器（加上 Mozilla 0.9.5）編寫這一技巧文章。練習(xí)幫助我徹底掌握 Web 瀏覽器加上 CSS2 方法。

回頁首

構(gòu)建樣式表

這里展示了我是如何處理這些事物的。我用適當(dāng)?shù)?XML 方言寫了一些字（使用先前的技巧作為模板）。然后，創(chuàng)建一個(gè)要使用的空的 dW.css CSS2 文件，并把下列行添加到我的 XML 文檔中充當(dāng)樣式表聲明：

												
														

														
			  dW.css" type="text/css"?>



										

到 目前為止，只有這個(gè)樣式表聲明，Mozilla 還不能對查看文檔結(jié)構(gòu)有任何幫助。接下來要做的就是構(gòu)建一個(gè) CSS2 樣式表來修飾 XML 文檔。一個(gè)容易的方法是從 XML 文檔的頂部開始，然后按您的方式往下做。例如，developerWorks article.dtd 文檔中的第一項(xiàng)是表示專欄的名稱等的 。 我將使這部分看上去很大并用粗體，還把它居中以示強(qiáng)調(diào)。事實(shí)上，甚至在這 之前，我就知道還有一些缺省值是整個(gè)文檔應(yīng)該具有的（我們可以根據(jù)需要，為各個(gè)上下文重設(shè)這些值）。清單 1 顯示了我的 CCS2 文件的前幾行。

												
														

														

														$DOCUMENT 
														
        {





font-family
        : "Times New Roman";





font-size
        : 12pt;





margin-top
        : 5px;





margin-left
        : 10px;



}





*
         {





display
        : block;





background-color
        : white;





padding
        : 2px;



}





seriestitle
         {





font-weight
        : bold;





font-size
        : 18pt;





text-align
        : center;



}

										

從這時(shí)開始，我繼續(xù)到下一個(gè)遇到的元素（在這個(gè)示例中是 ），一個(gè)接著一個(gè)。在添加了一些塊級(jí)別的元素后，我知道有必要確保所有內(nèi)聯(lián)元素都以這種方式出現(xiàn)。為此，瀏覽 DTD 幫助提醒我相關(guān)的元素。所以，我在清單 2 中包含了幾行。

												
														

														

														/* Inline Typographic Elements */




														

														

														

														a, i, b, sub, sup, p>code
														
         { 

display
        : inline;





background-color
        : inherit; }





a
                       { 

color
        : blue;





text-decoration
        : underline; }





i
                       { 

font-style
        : italic; }





b
                       { 

font-weight
        : bold; }





b[class="red"]
          { 

color
        : red; }





b[class="blue"]
         { 

color
        : blue; }





b[class="green"]
        { 

color
        : green; }





sub
                     { 

vertical-align
        : sub }





sup
                     { 

vertical-align
        : super }





sub,sup
                 { 

font-size
        : small }





										

再 添加一些塊級(jí)別元素，您就完成了一個(gè)非常漂亮的 XML 文檔的表示。更好的是，將來每次我需要查看相同 XML 方言表示的文檔時(shí)，要做的這少許工作是有用的。假設(shè)使用了最新的 Web 瀏覽器，不需要先將 XML 源代碼轉(zhuǎn)換成 HTML 或 PDF 格式（developerWorks 作為其自己處理過程程的一部分執(zhí)行這一操作），就可以查看完全相同的有用外觀。

回頁首

最終外觀

開發(fā) CSS2 樣式表以匹配 XML 文檔的方言，這一過程非常簡單。當(dāng)然，您會(huì)發(fā)現(xiàn)要擔(dān)心不同的特定標(biāo)記。而且，對于更多面向數(shù)據(jù)的文檔，您幾乎肯定要在定義的某些地方使用一些 display: table 屬性。進(jìn)行少量工作來設(shè)置 CSS2 樣式表，使檢驗(yàn) XML 文檔大為輕松。

讓我向您展示一張我所使用過的本文檔的圖片：圖 1。可以在 參考資料鏈接中找到相應(yīng)的源碼，但是讀者可能使用不同的瀏覽器版本和平臺(tái)，這樣產(chǎn)生的效果會(huì)有所不同（如果您的瀏覽器有些方面不合理，請升級(jí)）：

回頁首

參考資料

• 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文.
  
  
• 請參加有關(guān)本文的 論壇。
  
  
• 在 XML 問題 #6中，我評(píng)論了許多定制 XML 編輯器（多數(shù)支持 CSS2）。
  
  
• 產(chǎn)生在您面前的本技巧文章的資料包括作為本技巧文章基礎(chǔ)的 XML 文件。另外值得注意的是：我編寫這一技巧文章期間使用（并修改）的 CSS2 樣式表。 而且，為符合必要的 XML 方言，我在編寫本技巧文章時(shí)一直在一個(gè)窗口中打開 developerWorks DTD。
  
  
• 查看 CSS 特性的一個(gè)非常好的在線資料是 Miloslav Nic 編寫的 CSS2 Tutorial。尤其是 CSS 屬性的索引很有價(jià)值。
  

回頁首

關(guān)于作者

		David Mertz 運(yùn)用完全非結(jié)構(gòu)化的頭腦來編寫結(jié)構(gòu)化的文檔格式。可以通過 mertz@gnosis.cx 與 David 聯(lián)系； http://gnosis.cx/publish/上詳細(xì)介紹了他的生活。

posted on 2006-03-21 23:41 Vincent.Chen 閱讀(297) 評(píng)論(0)  編輯  收藏 所屬分類: XML