利用级联式样式表CSS显示XML文档

实验环境：xmlspy2013 firefox；

一、问题

    1.1 问题一：

1．对于下列XML文档，根据要求编写在XML文档上对应的CSS样式表。
<?xml version="1.0" ?>
<PRODUCTDATA>
   <PRODUCT PRODID="p001" CATEGORY="Toy">
      <PRODUCTNAME>Mini Bus</PRODUCTNAME>
      <DESCRIPTION>This is a toy for children aged 4 and above</DESCRIPTION>
      <PRICE>75</PRICE>
      <QUANTITY>54</QUANTITY>
    </PRODUCT>
       <PRODUCT PRODID="p002" CATEGORY="Toy">
       <PRODUCTNAME>Barbie Doll</PRODUCTNAME> 
       <DESCRIPTION>This is a toy for children in the age group of 5-10</DESCRIPTION>
       <PRICE>20</PRICE>
       <QUANTITY>200</QUANTITY>
    </PRODUCT>
</PRODUCTDATA>
要求PRODUCTNAME元素的内容用红颜色显示，其余元素的内容用绿颜色显示。

    1.2 问题二：

2．对于下列XML文档，根据要求，上机编写并在XML文档上应用对应的CSS样式表。
<?xml version="1.0" encoding="GB2312" ?>
<Orders>
  <Order id="A001" orderDate="2009-01-20">
      <name>玩具</name>
      <number>10</number>
      <city>北京</city> 
      <zip>100000</zip>
   </Order>
   <Order id="A002" orderDate="2009-03-20">
       <name>文具</name>
       <number>5</number>
       <city>青岛</city> 
       <zip>266000</zip>
    </Order>
  <Order id="A003" orderDate="2012-11-5"  class="computer">
    <name>U盘</name>
    <number>5</number>
    <city>济南</city>
    <zip>250014</zip>
  </Order>
</Orders>
（1）“city”用宋体30磅红色字体显示；
（2）“id”为A002的数据用隶书、xx-large大小加粗显示；
（3）“computer”类的数据用蓝色50磅字体加粗显示。

二、解决方案步骤

1、新建文件夹，里面包含了两个xml文件和css文件 2、在xml文件中复制word中的实验代码，加上<?xml-stylesheet type=”text/css” href=”six1.css”?> 3、同样，在另一个xml文件下重复步骤二过程 4、id选择器用#IdName{} 5、标签选择器直接使用标签名字{} 6、类选择器用.className{}

三、结果代码

    question1.css文件

PRODUCTNAME
{
	color:red;
}
PRODUCTDATA
{
	color:green;
}

    question2.css文件

city
{
	font-family:SimSun;
	font-size:30pt;
	color:red;
}
#A002
{
	font-family:LiSu;
	font-size:xx-large;
	font-weight:bold;
	
}
.computer
{
	font-size:50pt;
	color:blue;
	font-weight:bold;
}

    question1.xml文件

<?xml version="1.0" encoding="GB2312" ?>
<?xml-stylesheet type="text/css" href="question1.css"?>
<PRODUCTDATA>
   <PRODUCT PRODID="p001" CATEGORY="Toy">
      <PRODUCTNAME>Mini Bus</PRODUCTNAME>
      <DESCRIPTION>This is a toy for children aged 4 and above</DESCRIPTION>
      <PRICE>75</PRICE>
      <QUANTITY>54</QUANTITY>
    </PRODUCT>
       <PRODUCT PRODID="p002" CATEGORY="Toy">
       <PRODUCTNAME>Barbie Doll</PRODUCTNAME> 
       <DESCRIPTION>This is a toy for children in the age group of 5-10</DESCRIPTION>
       <PRICE>20</PRICE>
       <QUANTITY>200</QUANTITY>
    </PRODUCT>
</PRODUCTDATA>

    question2.xml文件

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

<?xml-stylesheet type="text/css" href="question2.css"?>
<Orders>
  <Order id="A001" orderDate="2009-01-20">
      <name>玩具</name>
      <number>10</number>
      <city>北京</city> 
      <zip>100000</zip>
   </Order>
   <Order id="A002" orderDate="2009-03-20">
       <name>文具</name>
       <number>5</number>
       <city>青岛</city> 
       <zip>266000</zip>
    </Order>
  <Order id="A003" orderDate="2012-11-5"  class="computer">
    <name>U盘</name>
    <number>5</number>
    <city>济南</city>
    <zip>250014</zip>
  </Order>
</Orders>

结果如图：

结果备注：

必须使用firefox打开才行。如果使用的是IE，那么汉字会出现乱码问题；如果使用的是chrome，那么文字的颜色不会改变。