XML與CSS

      我們可以在IE中查看XML檔案中的內容，內容的顯示和其原始格式一樣，是一種階層，對於資料量比較大，結構比較複雜的XML檔案來說，這種查看方式很不人性化。如果需要按照某種格式要求來顯示XML中的資料，我們該怎麼辦呢？有一種方法，就是為其編寫一支HTML檔案，利用XML資料島將XML中的資料引入到HTML中，使用者透過HTML檔案來查看XML中的內容。這種方法有個不足之處，就是如果使用者還是直接使用IE開啟XML檔案，那麼看到的還是XML中原始的格式。那麼有沒有什麼辦法可以讓使用者直接開啟XML檔案，看到的是符合我們要求的格式呢？答案是肯定的，那就是使用XML配合CSS（層疊樣式表）。

     熟悉HTML的朋友對CSS應該都不會陌生了，現在好多的網站都是使用HTML＋CSS在對頁面進行架構設計，這樣不必修改HTML檔案，只要配合不同的CSS檔案，就可以得到不同的頁面配置。同樣，CSS也適用與XML檔案。     以前寫CSS中的選取器（如果對這個概念不熟悉，可以先查看一些CSS相關文檔）往往是HTML中的標籤，如Table、TR、TD、Div、H2、Span等等等等。如果想讓CSS配合XML，就需要把選取器改成XML檔案中的結點。有這樣一支XML檔案：

<?xml version="1.0" encoding="gb2312"?>
<books>
 <book id="0001" bookcategory="文藝" amount="150" remain="80" discount="8.7">
  <title>三國演義</title>
  <author>羅貫中</author>
  <publisher>文藝出版社</publisher>
  <isbn>0-765-58007-8</isbn>
  <price>80</price>
 </book>
 <book id="0002" bookcategory="文藝" amount="100" remain="70" discount="9.8">
  <title>紅樓夢</title>
  <author>曹雪芹</author>
  <publisher>三秦出版社</publisher>
  <isbn>0-765-58007-9</isbn>
  <price>22</price>
 </book>
 <book id="0003" bookcategory="文藝" amount="120" remain="60" discount="8.5">
  <title>西遊記(上下冊)</title>
  <author>吳承恩</author>
  <publisher>人民文學出版社</publisher>
  <isbn>0-765-58007-3</isbn>
  <price>40.12</price>
 </book>
</books>

 

裡面存放了一些圖書資訊，每本書都有title、author、isbn等資訊，我們想讓書名（title）以粗體顯示，我們需要在CSS檔案中加入：

title {...}{
  font-weight: blod;
}

 “title”正是XML檔案中書名結點元素名稱。CSS檔案寫好了，XML怎麼知道要使用CSS來顯示自己的資料呢？和HTML一樣，我們需要在XML檔案中加入對CSS檔案的引用。XML引用CSS檔案的方式在根結點之前加

<?xml-stylesheet type="text/css" href="Test07.css"?>

    大功告成了！！！使用者只需雙擊XML檔案，即可以IE中看到按照引用的CSS檔案中的樣式顯示的資料了。    以上只是一個簡單的例子，目的在於說明如何使用CSS定義XML的顯示格式。大家可以此為鑒，寫出更加豐富漂亮的CSS。