使用XSLT或者CSS显示 XML

一. 使用CSS显示 XML

 使用 CSS 来格式化 XML 文档是有可能的。

 这个是CSS文件:

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;
}

 

在XML文件加入<?xml-stylesheet type="text/css" href="cd_catalog.css"?>,把这个 XML 文件链接到 CSS 文件:

<?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 格式化 XML 不能代表 XML 文档样式化的未来。XML 文档应当使用 W3C 的 XSL 标准进行格式化!

 

二. 使用XSLT显示 XML 

XSLT 是首选的 XML 样式表语言。

XSLT (eXtensible Stylesheet Language Transformations) 远比 CSS 更加完善。

使用 XSLT 的方法之一是在浏览器显示 XML 文件之前,先把它转换为 HTML.

XSLT文件:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited with XML Spy v2007 (http://www.altova.com) -->
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
  
<body style="font-family:Arial,helvetica,sans-serif;font-size:12pt;
        background-color:#EEEEEE"
>
    
<xsl:for-each select="breakfast_menu/food">
      
<div style="background-color:teal;color:white;padding:4px">
        
<span style="font-weight:bold;color:white">
        
<xsl:value-of select="name"/></span>
        - 
<xsl:value-of select="price"/>
      
</div>
      
<div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
        
<xsl:value-of select="description"/>
        
<span style="font-style:italic">
          (
<xsl:value-of select="calories"/> calories per serving)
        
</span>
      
</div>
    
</xsl:for-each>
  
</body>
</html>

下面是此 XML 文件的一个片断。 第二行,<?xml-stylesheet type="text/xsl" href="simple.xsl"?>,把这个 XML 文件链接到 XSL 文件:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="simple.xsl"?>
<breakfast_menu>
  
<food>
    
<name>Belgian Waffles</name>
    
<price>$5.95</price>
    
<description>
       two of our famous Belgian Waffles
    
</description>
    
<calories>650</calories>
  
</food>
</breakfast_menu>

 

效果图:


 

posted on 2009-05-18 14:46  炜升  阅读(339)  评论(0编辑  收藏  举报