级别: 初级
David Mertz，博士, 审查者, Gnosis Software, Inc.
2001 年 12 月 01 日
没
有定制编辑器和查看器，阅读 XML 数据是相当困难的。一种查看 XML 的轻量型方法就是：将级联样式表（cascading style
sheet (CSS2)）附加到 XML 文档上，然后使用最新的 Web 浏览器来查看这些 XML 文档（Mozilla 非常棒，通常 IE
就足够了）。developerWorks 专栏作家 David Mertz 在本技巧文章中讨论了这一替代方法。
阅读 XML
文档对于人类来说并不容易。XML
文档全是文本，但是各部分的可视安排未必很好地对应于各部分之间概念上的连接。而且，在标记当中查找内容使得略读也很困难。当然，XML
的主要目的并不是作为供人类直接查看的一种格式。通常，在 XML 源代码能够为人们所理解前，都
将其转换成其它格式。对于面向散文的文档，目标通常是 HTML 页面或 PDF 文件（通过“格式编排对象 [FO]（Formatting
Object，FO）”标记），也可以是一个打印页面。常用 XSLT 来执行到人类可读格式的转换。对于面向数据的 XML 文档，目标一般是
DBMS 数据格式或读取 XML 文 件的应用程序提供的内存表示。
但是，developerWorks
的读者通常都是开发人员。我们的重点是介绍可以并且应该不让最终用户烦恼的许多事物。当在格式转换的幕后行踪中出现问题时，我们的工作就是详查中间格式
（包括 XML）。通常，在开发过程期间，我们还要负责开发样本或测试 XML 文档，
以模拟可能发生的情况或进入到分布式应用程序中的某一阶段（在实际的生成器或客户存在之前）。
与一些格式比较，原始格
式的 XML 比较好管理。与二进制格式不同，在文本编辑器或文本查看器中打开 XML 文档也不是不可能。但是，标记很难可视地进行解析，特别是在
XML 编写者没有为便于解析而排列垂直和水平空白的情况下。如果您的工作主要是阅读原始 XML 文档，请查看我 以前评论过的 XML
编辑器之一（请参阅 参考资料）。但是，对于只是偶尔查看 XML 源文件的人（或当许多人需要查看这些文件时），XML 编辑器往往显得太贵；不仅因为获得许可证的费用，还有学习曲线方面。
使用 Web 浏览器
几乎所有开发人员都已安装了一个非常好的 XML 查看器……好吧，至少是相当不错的。最新版本的 Internet Explorer 和
Mozilla/Netscape 都努力同时解释 XML 文档与 HTML 文档。其它象 Opera 和 Konquorer
那样的浏览器也实现 CSS2 ― Opera 5+ 工作得很完美，Konqueror 2.2 是一个相当好的浏览器。大体上，Mozilla 和
Netscape 6 在显示以 CSS2 样式表中表示的样式的 XML 文档上做得非常好，而且准确。Internet
Explorer（至少是版本 6）做得也不错，只是好象忽略了 display: inline 属性。这使得 IE6 不太适合于显示面向散文的 XML 文 档（但它对于面向数据的 XML 文档仍然不错）。不过，IE6 在显示分层树中缺少 CSS2 样式表的 XML 文档方面确有优势，而且它允许折叠子树。
通
常，我不是使用 XMetal（带有我 developerWorks 同事 Beno?t Marchal 提供的一些
XMetal“规则”），就是用我称之为“智能 ASCII”来编写源代码，并使用我编写的 txt2dw.py 工具将它转换为
XML。txt2dw.py 工具将文本转换成 developerWork 的 XML 手稿格式。作为练习，我决定只使用文本编辑器（加上
Mozilla 0.9.5）编写这一技巧文章。练习帮助我彻底掌握 Web 浏览器加上 CSS2 方法。
构建样式表
这里展示了我是如何处理这些事物的。我用适当的 XML 方言写了一些字（使用先前的技巧作为模板）。然后，创建一个要使用的空的 dW.css CSS2 文件，并把下列行添加到我的 XML 文档中充当样式表声明：
dW.css" type="text/css"?>
|
到
目前为止，只有这个样式表声明，Mozilla 还不能对查看文档结构有任何帮助。接下来要做的就是构建一个 CSS2 样式表来修饰 XML
文档。一个容易的方法是从 XML 文档的顶部开始，然后按您的方式往下做。例如，developerWorks article.dtd
文档中的第一项是表示专栏的名称等的 。 我将使这部分看上去很大并用粗体，还把它居中以示强调。事实上，甚至在这
之前，我就知道还有一些缺省值是整个文档应该具有的（我们可以根据需要，为各个上下文重设这些值）。清单 1 显示了我的 CCS2 文件的前几行。
清单 1. 初始样式表内容
$DOCUMENT
{
font-family
: "Times New Roman";
font-size
: 12pt;
margin-top
: 5px;
margin-left
: 10px;
}
*
{
display
: block;
background-color
: white;
padding
: 2px;
}
seriestitle
{
font-weight
: bold;
font-size
: 18pt;
text-align
: center;
}
|
从这时开始，我继续到下一个遇到的元素（在这个示例中是 ），一个接着一个。在添加了一些块级别的元素后，我知道有必要确保所有内联元素都以这种方式出现。为此，浏览 DTD 帮助提醒我相关的元素。所以，我在清单 2 中包含了几行。
清单 2. 处理内联元素
/* Inline Typographic Elements */
a, i, b, sub, sup, p>code
{
display
: inline;
background-color
: inherit; }
a
{
color
: blue;
text-decoration
: underline; }
i
{
font-style
: italic; }
b
{
font-weight
: bold; }
b[class="red"]
{
color
: red; }
b[class="blue"]
{
color
: blue; }
b[class="green"]
{
color
: green; }
sub
{
vertical-align
: sub }
sup
{
vertical-align
: super }
sub,sup
{
font-size
: small }
|
再
添加一些块级别元素，您就完成了一个非常漂亮的 XML 文档的表示。更好的是，将来每次我需要查看相同 XML
方言表示的文档时，要做的这少许工作是有用的。假设使用了最新的 Web 浏览器，不需要先将 XML 源代码转换成 HTML 或 PDF
格式（developerWorks 作为其自己处理过程程的一部分执行这一操作），就可以查看完全相同的有用外观。
最终外观
开发 CSS2 样式表以匹配 XML 文档的方言，这一过程非常简单。当然，您会发现要担心不同的特定标记。而且，对于更多面向数据的文档，您几乎肯定要在定义的某些地方使用一些
display: table 属性。进行少量工作来设置 CSS2 样式表，使检验 XML 文档大为轻松。
让我向您展示一张我所使用过的本文档的图片：图 1。可以在
参考资料链接中找到相应的源码，但是读者可能使用不同的浏览器版本和平台，这样产生的效果会有所不同（如果您的浏览器有些方面不合理，请升级）：
图 1. 用 Mozilla 查看的、由 CSS2 样式表指导的本文档视图
参考资料
关于作者