在XML中使用CSS


阿瑟 發表



沒有經過樣式表定義的XML文件似乎一點作用也沒有, 這次筆者介紹大家使用CSS來定義一份XML文件, 這樣就看的到漂漂的網頁了

前言 沒有經過樣式表定義的XML文件似乎一點作用也沒有, 這次筆者介紹大家使用CSS來定義一份XML文件, 這樣就看的到漂漂的網頁了 看到一堆標籤似乎有點無力, 小弟來告訴大家怎麼定義一份XML囉.
重溫上次的XML語法: 檔名 (test.xml)
<?xml version="1.0" encoding="big5" ?>

<catalog>

 <tutorial>
  <title>認識XML</title>
  <author>阿得</author>
  <date>9/19/2002</date>
  <category>XML教學</category>
 </tutorial>

 <tutorial>
  <title>Javascript: 隨機背景音樂</title>
  <author>阿得</author>
  <date>8/31/2002</date>
  <category>Javascript教學</category>
 </tutorial>

 <tutorial>
  <title>VBscript: Class類別</title>
  <author>阿得</author>
  <date>9/17/2002</date>
  <category>Vbscript教學</category>
 </tutorial>
</catalog>

現在我們先建立一份CSS樣式表, 檔名為style.css:
title {
display:block;
font-size:16px;
color:#0000ff;
font-weight:bold;
font-family:verdana,arial
}

author {
font-size:11px;
color:#555555;
font-weight:bold;
font-family:verdana,arial
}

date,category,tutorial {
font-size:11px;
color:#555555;
font-family:verdana,arial
}


這邊關於CSS語法部分小弟就不講解了, 不懂的朋友可以去找找看CSS教學, 然後去查查看CSS的屬性值.
display:block, 這一項屬性是讓一個標籤賦予像是DIV標籤會自動換行的特性.
用過CSS的朋友都知道, 樣式名稱前面有一點代表要用class=去套用, 而樣式名稱前面有一個#字號就要用id=去套用.
而樣式名稱什麼都沒有的就是標籤的名稱囉, 在HTML你可以用td這個樣式名稱直接更改資料儲存格的樣式設定, 但是在XML中幾乎所有的標籤都沒有預設的樣式(不然就是一般的字體), 所以你必須將自己有用到的標籤定義自己的樣式, 這部分用法和在HTML文件上用的方法差不多.

CSS檔案寫好以後, 請確定xml已經存為test.xml 而 css檔案已經存為style.css.
接著在您的test.xml加上內嵌CSS樣式檔的語法:
<?xml version="1.0" encoding="big5" ?>
<?xml-stylesheet type="text/css" href="style.css" ?>

<catalog>

.....略


現在你可以執行test.xml看看效果如何, 標籤所框的部分是不是有套用樣式了呢?

你可以 點這裡 來看看完成的範例.

最後更新日期: 9/19/2002 6:15:51 PM