使用CSS来显示XML

使用CSS样式单 (Cascading Style Sheets) ,可以给XML文档添加额外的现实信息。

---

使用CSS来显示未来的XML文档么？

应该使用CSS来显示你未来的XML文档么？

不，我们不推荐这样做！但是我们还是应该实验一下:

我们先来看一个单纯的XML文档: The CD Catalog

<?xml version="1.0" encoding="ISO-8859-1" ?>

- <!--

 Edited with XML Spy v4.2 

  --> <script type="text/javascript">f(clean);</script>

- < CATALOG >

- < CD >

  < TITLE > Empire Burlesque </ TITLE >

  < ARTIST > Bob Dylan </ ARTIST >

  < COUNTRY > USA </ COUNTRY >

  < COMPANY > Columbia </ COMPANY >

  < PRICE > 10.90 </ PRICE >

  < YEAR > 1985 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Hide your heart </ TITLE >

  < ARTIST > Bonnie Tyler </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > CBS Records </ COMPANY >

  < PRICE > 9.90 </ PRICE >

  < YEAR > 1988 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Greatest Hits </ TITLE >

  < ARTIST > Dolly Parton </ ARTIST >

  < COUNTRY > USA </ COUNTRY >

  < COMPANY > RCA </ COMPANY >

  < PRICE > 9.90 </ PRICE >

  < YEAR > 1982 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Still got the blues </ TITLE >

  < ARTIST > Gary Moore </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Virgin records </ COMPANY >

  < PRICE > 10.20 </ PRICE >

  < YEAR > 1990 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Eros </ TITLE >

  < ARTIST > Eros Ramazzotti </ ARTIST >

  < COUNTRY > EU </ COUNTRY >

  < COMPANY > BMG </ COMPANY >

  < PRICE > 9.90 </ PRICE >

  < YEAR > 1997 </ YEAR >

  </ CD >

- < CD >

  < TITLE > One night only </ TITLE >

  < ARTIST > Bee Gees </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Polydor </ COMPANY >

  < PRICE > 10.90 </ PRICE >

  < YEAR > 1998 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Sylvias Mother </ TITLE >

  < ARTIST > Dr.Hook </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > CBS </ COMPANY >

  < PRICE > 8.10 </ PRICE >

  < YEAR > 1973 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Maggie May </ TITLE >

  < ARTIST > Rod Stewart </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Pickwick </ COMPANY >

  < PRICE > 8.50 </ PRICE >

  < YEAR > 1990 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Romanza </ TITLE >

  < ARTIST > Andrea Bocelli </ ARTIST >

  < COUNTRY > EU </ COUNTRY >

  < COMPANY > Polydor </ COMPANY >

  < PRICE > 10.80 </ PRICE >

  < YEAR > 1996 </ YEAR >

  </ CD >

- < CD >

  < TITLE > When a man loves a woman </ TITLE >

  < ARTIST > Percy Sledge </ ARTIST >

  < COUNTRY > USA </ COUNTRY >

  < COMPANY > Atlantic </ COMPANY >

  < PRICE > 8.70 </ PRICE >

  < YEAR > 1987 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Black angel </ TITLE >

  < ARTIST > Savage Rose </ ARTIST >

  < COUNTRY > EU </ COUNTRY >

  < COMPANY > Mega </ COMPANY >

  < PRICE > 10.90 </ PRICE >

  < YEAR > 1995 </ YEAR >

  </ CD >

- < CD >

  < TITLE > 1999 Grammy Nominees </ TITLE >

  < ARTIST > Many </ ARTIST >

  < COUNTRY > USA </ COUNTRY >

  < COMPANY > Grammy </ COMPANY >

  < PRICE > 10.20 </ PRICE >

  < YEAR > 1999 </ YEAR >

  </ CD >

- < CD >

  < TITLE > For the good times </ TITLE >

  < ARTIST > Kenny Rogers </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Mucik Master </ COMPANY >

  < PRICE > 8.70 </ PRICE >

  < YEAR > 1995 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Big Willie style </ TITLE >

  < ARTIST > Will Smith </ ARTIST >

  < COUNTRY > USA </ COUNTRY >

  < COMPANY > Columbia </ COMPANY >

  < PRICE > 9.90 </ PRICE >

  < YEAR > 1997 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Tupelo Honey </ TITLE >

  < ARTIST > Van Morrison </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Polydor </ COMPANY >

  < PRICE > 8.20 </ PRICE >

  < YEAR > 1971 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Soulsville </ TITLE >

  < ARTIST > Jorn Hoel </ ARTIST >

  < COUNTRY > Norway </ COUNTRY >

  < COMPANY > WEA </ COMPANY >

  < PRICE > 7.90 </ PRICE >

  < YEAR > 1996 </ YEAR >

  </ CD >

- < CD >

  < TITLE > The very best of </ TITLE >

  < ARTIST > Cat Stevens </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Island </ COMPANY >

  < PRICE > 8.90 </ PRICE >

  < YEAR > 1990 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Stop </ TITLE >

  < ARTIST > Sam Brown </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > A and M </ COMPANY >

  < PRICE > 8.90 </ PRICE >

  < YEAR > 1988 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Bridge of Spies </ TITLE >

  < ARTIST > T'Pau </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Siren </ COMPANY >

  < PRICE > 7.90 </ PRICE >

  < YEAR > 1987 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Private Dancer </ TITLE >

  < ARTIST > Tina Turner </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > Capitol </ COMPANY >

  < PRICE > 8.90 </ PRICE >

  < YEAR > 1983 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Midt om natten </ TITLE >

  < ARTIST > Kim Larsen </ ARTIST >

  < COUNTRY > EU </ COUNTRY >

  < COMPANY > Medley </ COMPANY >

  < PRICE > 7.80 </ PRICE >

  < YEAR > 1983 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Pavarotti Gala Concert </ TITLE >

  < ARTIST > Luciano Pavarotti </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > DECCA </ COMPANY >

  < PRICE > 9.90 </ PRICE >

  < YEAR > 1991 </ YEAR >

  </ CD >

- < CD >

  < TITLE > The dock of the bay </ TITLE >

  < ARTIST > Otis Redding </ ARTIST >

  < COUNTRY > USA </ COUNTRY >

  < COMPANY > Atlantic </ COMPANY >

  < PRICE > 7.90 </ PRICE >

  < YEAR > 1987 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Picture book </ TITLE >

  < ARTIST > Simply Red </ ARTIST >

  < COUNTRY > EU </ COUNTRY >

  < COMPANY > Elektra </ COMPANY >

  < PRICE > 7.20 </ PRICE >

  < YEAR > 1985 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Red </ TITLE >

  < ARTIST > The Communards </ ARTIST >

  < COUNTRY > UK </ COUNTRY >

  < COMPANY > London </ COMPANY >

  < PRICE > 7.80 </ PRICE >

  < YEAR > 1987 </ YEAR >

  </ CD >

- < CD >

  < TITLE > Unchain my heart </ TITLE >

  < ARTIST > Joe Cocker </ ARTIST >

  < COUNTRY > USA </ COUNTRY >

  < COMPANY > EMI </ COMPANY >

  < PRICE > 8.20 </ PRICE >

  < YEAR > 1987 </ YEAR >

  </ CD >

  </ CATALOG >

然后我们来看CSS样式表单文件: The CSS file

CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
Display: block;
color: #000000;
margin-left: 20pt;
}

最后，我们来看用CSS显示出来的XML文档: The CD Catalog formatted with the CSS file

**************

  Bob Dylan USA Columbia 10.90 1985 Bonnie Tyler UK CBS Records 9.90 1988 Dolly Parton USA RCA 9.90 1982 Gary Moore UK Virgin records 10.20 1990 Eros Ramazzotti EU BMG 9.90 1997 Bee Gees UK Polydor 10.90 1998 Dr.Hook UK CBS 8.10 1973 Rod Stewart UK Pickwick 8.50 1990 Andrea Bocelli EU Polydor 10.80 1996 Percy Sledge USA Atlantic 8.70 1987 Savage Rose EU Mega 10.90 1995 Many USA Grammy 10.20 1999 Kenny Rogers UK Mucik Master 8.70 1995 Will Smith USA Columbia 9.90 1997 Van Morrison UK Polydor 8.20 1971 Jorn Hoel Norway WEA 7.90 1996 Cat Stevens UK Island 8.90 1990 Sam Brown UK A and M 8.90 1988 T`Pau UK Siren 7.90 1987 Tina Turner UK Capitol 8.90 1983 Kim Larsen EU Medley 7.80 1983 Luciano Pavarotti UK DECCA 9.90 1991 Otis Redding USA Atlantic 7.90 1987 Simply Red EU Elektra 7.20 1985 The Communards UK London 7.80 1987 Joe Cocker USA EMI 8.20 1987

**************

这是用CSS样式单修饰的XML文档的一小部分代码片断:

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="cd_catalog.css"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> . . . . </CATALOG>

即使使用CSS的显示效果很好，我们不认为使用CSS样式单显示XML文档是未来Web开发的趋势。我们相信，使用XSL程序格式化XML文档将会是未来的趋势，目前最主要的浏览器都支持这种技术。

---

使用XML创建未来的主页？

你愿意使用XML来创建你未来的网站么？

不，我不认为这是一个好主意。我们也不拒绝去做这样一个尝试：A homepage written in XML

******************

  呵呵，这是用XML语言写的Web页面

******************

我们不相信XML会直接用于创建未来的Web页面。

我们仍然相信，XHTML - 利用XML重新定义过的HTML可能是一个更好的选择: 情阅读我们的XHTML 指南.......