以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XSL/XSLT/XSL-FO/CSS 』  (http://bbs.xml.org.cn/list.asp?boardid=8)
----  书写CSS样式表来浏览XML文档 <转>  (http://bbs.xml.org.cn/dispbbs.asp?boardid=8&rootid=&id=7897)


--  作者:宇宙人
--  发布时间:5/27/2004 12:50:00 PM

--  书写CSS样式表来浏览XML文档 <转>
下面的这个XML样例文档描述了一个饭店的考核评审.它包含了一些特定的章节对这
个考核评审的不同类型的重要信息进行了描述.第一节包含了在一个名为
r"restaurant"的元素重并提供了关于饭店的名称,地址,电话.第二节是"review"元
素包含了考核的数据,考核人的名字,考核日期,得到的星数.第三节是考核的主体以
及最后一节是一个饭店的菜单的摘要.

<?xml version='1.0'?>
<story>
<restaurant>
<name>Red Apple Inn</name>
<address>
<street>3100 Longview Lane</street>
<city>Palabro</city>
<state>Wyoming</state>
</address>
<phone>123-555-1212</phone>
</restaurant>

<review>
<rating stars="4">****</rating>
<date>December 29, 1998</date>
<reviewer><person>Louis Framptenheimer</person></reviewer>
</review>

<body>
<p><summary>The small town of <city>Palabro</city> seems like
an unlikely place for a high-class culinary establishment, but
the <self>Red Apple Inn's</self> Chef <person>Alex
Choperoni</person> is earning a national reputation for innovative
dishes.</summary> And rightly so, if this reviewer's recent
culinary experience is any example.</p>

<p>Within striking distance from the ski slopes at <city>Jackson
Hole</city>, the <self>Red Apple Inn</self> is a completely
restored Victorian hotel, and offers a warm and elegant atmosphere
and
gracious service. The upscale clientele includes regular
appearances by movie stars <person>Drew Barrymore</person> and
<person>Matthew Broderick</person>. Reservations are a must, and
during the ski season it is not uncommon for the dining room to
be booked solid six weeks in advance.</p>

<p>It is hard to go wrong with a menu this packed with interesting
choices. The crab cakes are especially fine with a thin crisp
crust that opens with a gentle prod of a fork to reveal a light,
moist, almost mousse-like interior with a rich nutty flavor.</p>

<p>The <self>Red Apple Inn</self> boasts one of the finest wine
cellars in the region. None of the dishes we sampled were less
than
outstanding. Here are a few of the selections from the daily menu.
</p>
</body>

<menu>
<appetizer>
<description>Crab cakes with a creamy dill sauce served with
crispy
herbed daikon fries</description>
<price>$23</price>
</appetizer>
<entree>
<description>Braised jumbo sea scallops on a tomato beurre
blanc</description>
<price>$39</price>
</entree>
<entree>
<description>Free-range chicken breast stuffed with morels in a
brandy/green-peppercorn sauce</description>
<price>$31</price>
</entree>
<entree>
<description>Tarragon roast pork loin on a bed of ginger apple
slaw
and caramelized onions</description>
<price>$34</price>
</entree>
</menu>

</story>
注意在这篇文当中的XML标记很少涉及到处理数据描述.没有任何关于格局排列,字
符或则颜色的设定.这些信息会在样式表中传达.

在 使用CSS 这篇文章中涵盖了怎样为一个HTML书写一个CSS样式表.这些样式增加
或者重载了HTML中的默认的内建格式动作.对于XML,默认的格式动作为"display:
inline.在书写XML的样式表的首要任务是对于大多数的元素设定display 属性为
"block"或"none"

下面显示了你如何开始为饭店考核的样例生成CSS的步骤.这个样式表为主要的小节
指定了display属性为"block".

story { display: block; }
restaurant { display: block; }
review { display: block; }
body { display: block; }
menu { display: block; }
将它保存为 review.css.现在我们在XML文档的开的开始部分(在story元素之前)加
入样式表指令以便它能定位到我们新建的样式表.

<?xml-stylesheet type="text/css" href="review.css" ?>
基于这样一个指针,当我们在一个浏览其中打开一个XML文档的时候将提供一个最基
本的显示模式.附加的CSS属性能增强这些规则, 对于残留的XML元素将生成新增的
规则.下面是一个菜单属性的和它的子属性的样式规则的增强集.

menu
{
display: block;
border: 2px solid black;
padding: 1em;
background-color: #888833;
color: #FFFFDD;
font-family: Times, serif;
font-style: italic;
text-align: center;
}

appetizer
{
display: block;
margin-bottom: .4em;
}

entree
{
display: block;
margin-bottom: .4em;
}

price
{
display: inline;
font-weight: bold;
font-style: normal;
}

description
{
display: inline;
}
为了完成这个样式表,附加的规则必须加入,以操纵在原文档的中的残留元素.

在CSS中使用命名域

当使用一个附加CSS样式表的XML的时候,名域(Namespaces)必须在文档元素中定义
.局部范围的名域(Namespaces)会被正确的解析,但是CSS并没有提供一个解决名域
前缀问题的机制,因此CSS规则在局部范围的名域中不能准确的与元素相对应.把所
有的名域放在文档元素上申明,确保他们都是全局的;这样就不会有前缀的冲突.默
认的名域不能被使用;所有带名域的元素必须有一个直接的前缀.另外,CSS选择器能
够只通过前缀选定带名域的元素,因此前缀在XML和样式表中必须一致.

下面是一个元素带有'HTML'前缀的样式表:

HTML\:IMG {
border: 2px solid black;
}

HTML\:A:visited HTML\:IMG {
border-color: grey;
}

HTML\:A:active HTML\:IMG {
border-color: red;
}

HTML\:A:link HTML\:IMG {
border-color: blue;
}
注意 ":"这个命名域字符必须在前有一个"\"才能与一个pseudoclass区别开来

使用HTML命名域(Namesapce)

在用CSS浏览XML的时候HTML的Namespace必须特殊对待.HTML命名域中的元素将按照
他们在HTML中的格式显示.这久允许访问那些没有赋予CSS的能力.例如一些很有用
的HTML嵌入元素是 <TABLE>, , , <SCRIPT>, and <STYLE>.

<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional>
...
<restaurant>
<name>Red Apple Inn</name>
<logo>
<HTML:A href="javascript:alert('Visit the Red Apple Inn!')">
<HTML:IMG src="red-apple.gif" height="50" width="200"/>
</HTML:A>
</logo>
...
注意:在 Microsoft? Internet Explorer 5中的前缀必须保留"HTML"或者"html"以
便解释HTML元素.

<HTML:STYLE> 区,能被用于在XML文当中嵌入一个CSS样式表.这个区能加强任何用
样式表指令指向的样式表.档没有一个可扩展样式表的时候,必须仍有一个样式表指
令来指明XML文档是用CSS样式表,甚至可以没有"href"属性.

下面的样例展示了如何使用HTML命名域将review.css嵌入到XMl文当中去,<HTML:
STYLE>和样式表指令没有"href"属性.

<?xml version="1.0"?>
<?xml-stylesheet type="text/css"?>
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional>
<HTML:STYLE>
story
{
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
width: 30em;
}

restaurant
{
display: block;
padding: 1.2em;
font-size: x-small;
margin-bottom: 1em;
}
...
</HTML:STYLE>
<restaurant>
...


W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
31.250ms