4.2.2 使用CSS显示XML文档

4.2.2 使用CSS显示XML文档
   

尽管CSS功能强大，涵盖面极广，但仍然有较强的规律可循，比较简单易学。一旦掌握了其精髓，就可以轻松地将其为我所用，即便在XML中也不例外。不过，当我们将CSS实际运用于XML文档中时，对应于文档本身所面向的应用不同，CSS的使用方法也有所不同。
事实表明，XML语言自它产生之日起，就蕴藏了强大的生命力。在XML标准发布之后的短短的两年内，XML的技术已经渗入到了Internet应用的各个角落，不同应用领域的XML标准或XML文档对表现力的要求各不相同。有些XML文档主要面向数据交换，其表现形式相对简单；有些文档是专门面向Web发布的，它的表现力相对就要强一些。因此，在XML文档中使用CSS的方式也有所不同。总结起来，常用以下两种方式： 引用式和嵌入式。
引用式
引用式是指XML文档本身不含有样式信息，通过引用外部CSS文档来定义文档的表现形式。大部分XML文档都采用这种方式，这也与XML语言内容与形式分开的原则相一致。具体实现的方法是，在XML文档的开头部分写一个关于样式单的声明语句，如下：
  
这样一来，按照声明语句的指示，该文档在浏览器上的表现方式就由样式文件mystyle.css所决定。
现在，就让我们来看一个新例子。下面是一段XML文档，描述的是一个学生花名册，其中有两个学生的资料。
student.xml



  学生花名册
  
    李华
    河北
    15
    62875555
  
  
    张三
    北京
    14
    82873425
  


现在，我们来为它量体制作一件衣服：
mystyle.css:
roster,student
{
  font-size:15pt;
  font-weight:bold;
  color:blue;
  display:block;
  margin-bottom:5pt;
}
origin,age,telephone
{
  font-weight:bold;
  font-size:12pt;
  display:block;
  color:block;
  margin-left:20pt;
}
name
{
  font-weight:bold;
  font-size:14pt;
  display:block;
  color:red;
  margin-top:5pt;
  margin-left:8pt;
}

此时，文件student.xml在IE下的浏览效果为：

这个样式单的显示效果是将学生信息列表显示。同样，我们还可以将学生信息用表格的形式显示，相应的样式单为：
mystyle.css:
roster
{
  display:table;
  margin-top:12pt;
}
student
{
  display:table-row;
}
name,origin,age,telephone
{
  display:table-cell;
}
name
{
  color:red;
  font-weight:bold;
}

遗憾的是，IE不支持CSS2中关于列表形式的定义，所以只有用浏览器NetScape的升级版本Mozilla才能看到效果：

由此可见，对于相同的数据资料，定义不同的CSS样式单，它们也就以截然不同的外观呈现在我们眼前。
其实，在第三章讲述命名空间时我们曾经给出了一个例子，它为同一批天气预报的数据准备了两个CSS样式单，然后利用HTML的JS脚本在两种显示方式下进行切换。
内嵌式
内嵌式是指将CSS样式直接嵌入到XML文档内部，为元素设置style属性，并在属性值中给出对其样式的定义。这种用法主要出现在一些特殊的XML文档中，一般来讲内嵌CSS样式的XML文档本身就是面向显示的，如SVG、SMIL等。我们将在“XML协议”一章中专门讲述。