使用css显示xml

看一个demo.xml

<?xml version="1.0" encoding="gbk"?>
<?xml-stylesheet type="text/css"  href="demo.css" ?>
<information>
	<man>
		<name>爱迪生</name>
		<id>1</id>
		<email>cheng@qq.com</email>
		<phone>123445</phone>
	</man>
</information>

demo.css

name{
	
	display:block;
	font-size:20pt;
	font-weight:blod;

}
id,email,phone{
	
	display:block;
	font-size:15pt;
	font-weight:normal;
	font-style:italic;

}

显示的结果为：

注意display:block;显示时当成一个块，会换行显示

再看一个例子，cd.xml

<?xml version="1.0" encoding="gbk"?>
<?xml-stylesheet type="text/css" href="cd.css"?>
<Catalog>
	<Cd>
		<Title>empire burlesque</Title>
		<Artist>bob Dylan</Artist>
		<Price>10.9</Price>
		<Year>1990</Year>
	</Cd>
	<Cd>
		<Title>empire burlesque</Title>
		<Artist>bob Dylan</Artist>
		<Price>10.9</Price>
		<Year>1990</Year>
	</Cd>
	<Cd>
		<Title>empire burlesque</Title>
		<Artist>bob Dylan</Artist>
		<Price>10.9</Price>
		<Year>1990</Year>
	</Cd>
<Catalog>

cd.css

Catalog{
	background-color:#ffaeff;
	width:100%;
}
Cd{
	display:block;
	margin-bottom:10pt;
}
Title,Artist{
	color:#ff0000;
	font-size:20pt;
}
Price,Year{
	display:block;
	color:#ff00aa;
	font-size:20pt;
}

效果为：

使用XSLT显示xml

XSLT是首选的xml样式表语言

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

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