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

小鱼儿 2022-05-29 01:12 178阅读 0赞

实验环境：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磅字体加粗显示。

二、解决方案步骤

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

三、结果代码

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>

结果如图：

![Image 1][]

结果备注：

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

[Image 1]: