用CSS显示XML样式

效果:

代码:

<html>

<head>

<title>CSS样式表显示</title>

<style type="text/css">

H7{color:red;

Font-style:黑体;

Font-family:arial;

Background:yellow;

}

</style>

</head>

<body>

<center>

<H7>这是CSSS样式表</H7>

</center>

</body>

</html>

 

 

 

 

 

 

 

效果:



Test.xml代码:

<?xml version="1.0" encoding="gb2312"?>

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

<root>

<computer>

<name>联想</name>

<price>4563</price>

<detail>好东西!!</detail>

</computer>

<computer>

<name>方正</name>

<price>3563</price>

<detail>真的是好东西!!</detail>

</computer>

<computer>

<name>TCL</name>

<price>4543</price>

<detail>不可能是好东西!!</detail>

</computer>

</root>

 


Test.css代码:

root

computer

{display:block;margin:1em}

name

{display:inline;font-size:1.3em;font-weight:bold;color:red}

price

{display:block;}

detail

{display:inline;color:green;font-size:0.9em}


 

 

 

 

 

 

 

 

XSL显示XML文档:

效果:

 

Test.xml代码:

<?xml version="1.0" encoding="gb2312" ?>

<?xml-stylesheet type="text/xsl" href="1.xsl"?>

<data>

<book>

<title>C#入门快手</title>

<author>CXC</author>

<price>23.34</price>

</book>

<book>

<title>XML语言基础</title>

<author>CSS</author>

<price unit="人民币">53.34</price>

<memo>此书是著名计算机编著,极具权威性!

</memo>

</book>

</data>

 

1.       xsl代码:

<?xml version="1.0" encoding="gb2312" ?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html>

<body>

<center>

<h2> 书籍信息 </h2>

</center>

<div align="center">

<center>

<table border="1" cellspadding="5" bgcolor="red">

<tr>

<td> 书名</td> <th> 作者</th> <td> 价格 </td> <th> 备注 </th>

</tr>

<xsl:for-each select="data/book" order-by="title">

<tr>

<td> <xsl:value-of select="title"/> </td>

<td> <xsl:value-of select="author"/> </td>

<td> <xsl:value-of select="price"/> </td>

<td width="150"> <xsl:value-of select="memo"/> </td>

</tr>

</xsl:for-each>

</table>

</center>

</div>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

 

 

posted on 2009-09-06 21:20  天清地宁  阅读(1721)  评论(0编辑  收藏  举报