级别： 初级 David Mertz，博士 (mertz@gnosis.cx), 审查者, 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. 初始样式表内容
$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 样式表指导的本文档视图
参考资料
关于作者
对本文的评价
| 
