XML 数据

此页面包含一个如何使用CSS和XML数据的示例。

你将创建一个XML文档范例，和使之在浏览器中展现的样式表。

这是 CSS tutorial 第二部分的第三节。
前一章节: SVG
后一章节: XBL binding

信息: XML 数据

XML (eXtensible Markup Language 可扩展标记语言) 是一种可用于任何类型的结构化数据的通用型语言。

默认情况下，Mozilla 浏览器会将 XML 按照非常类似XML文件的原始数据的方式展现。你可以看到定义数据结构的具体的标签。

通过将你的XML文档与CSS样式表链接，你可以定义展现XML的其他方式。为了实现这一点，样式表建立了映射规则，将XML文档中的标签映射为HTML中使用的展现类型。

示例
XML文档中的数据采用<`INFO>` 标签。你希望文档中的 INFO 元素像 HTML 的段落一样展现。. 在该文档的样式表中，你指定了 INFO 元素的展现方式： INFO { display: block; margin: 1em 0; }

在display属性中最常用的值是：

`block`	Displayed like HTML's DIV (for headings, paragraphs)
`inline`	Displayed like HTML's SPAN (for emphasis within text)

如同对待HTML一样，通过设置字体、间距和其他细节来添加你自己的样式规则。

更多细节
其他display的值可以展现类似于列表项目的元素，或者类似表格组件的元素。请查看CSS规范中的The display property ，来获取全部display类型。单独使用CSS，display的结构必须与文档结构一致。其它方式是修改display的结构—例如：使用XBL添加内容，使用JavaScript修改DOM。请查看 XML 页面，来获取更多关于XML in Mozilla的信息。

实例: XML 演示

新建一个 XML 文件： doc9.xml 。复制粘帖以下内容，注意滚动以获得全部：

<?xml version="1.0"?>
<!-- XML demonstration -->
<?xml-stylesheet type="text/css" href="style9.css"?>
<!DOCTYPE planet>
<planet>
<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>
<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>
<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>
</planet>

新建一个 CSS 文件： style9.css 。复制粘帖以下内容，注意滚动以获得全部：

/*** XML demonstration ***/
planet:before {
  display: block;
  width: 8em;
  font-weight: bold;
  font-size: 200%;
  content: "Oceans";
  margin: -.75em 0px .25em -.25em;
  padding: .1em .25em;
  background-color: #cdf;
  }
planet {
  display: block;
  margin: 2em 1em;
  border: 4px solid #cdf;
  padding: 0px 1em;
  background-color: white;
  }
ocean {
  display: block;
  margin-bottom: 1em;
  }
name {
  display: block;
  font-weight: bold;
  font-size: 150%;
  }
area {
  display: block;
  }
area:before {
  content: "Area: ";
  }
area:after {
  content: " million km\B2";
  }
depth {
  display: block;
  }
depth:before {
  content: "Mean depth: ";
  }
depth:after {
  content: " m";
  }

在你的浏览器中打开该文档：

Oceans

Arctic
Area: 13,000 million km²
Mean depth: 1,200 m

Atlantic
Area: 87,000 million km²
Mean depth: 3,900 m

. . .

此演示的注解：

Unicode 字符上标 2（在 "million km²" 中），在CSS文件中被编码为 \B2 。
标题 "Oceans" 有一个负的上边距，所以它可以上移至边框顶部显示。

挑战
修改样式表使文档可以作为表格展现。（请参见 CSS 规范的 Tables 章节作为参考。）

接下来？

如果你难以理解此页面，或者你有其他意见，请提交到讨论页： Discussion 。

这是本教程的最后一页。请查看此 wiki 的 CSS 主页，获取更多Mozilla CSS 信息。

文档标签和贡献者

另见