MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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 信息。

文档标签和贡献者

 此页面的贡献者: ziyunfei, jasonzhyan
 最后编辑者: jasonzhyan,