📄 browsing-css.htm
字号:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<TITLE>怎样书写CSS样式表来浏览XML文档</TITLE>
<style type="text/css">
<!--
.normal10 { font-size: 11pt}
.normal9 { font-size: 9pt}
a{ text-decoration: none }
a:hover{ color:Red;text-decoration:underline }
a {
font-size:11pt;
COLOR: cornflowerblue;
FONT-FAMILY: "新细明体", "宋体";
FONT-WEIGHT: bold
}
.normal105 { font-size: 11pt}
.p { font-size: 11pt}
-->
</style>
<link rel="stylesheet" href="../../Global.css" tppabs="http://www.xml.org.cn:8188/Global.css"></HEAD>
<BODY>
<p ALIGN="CENTER" class="normal105">[<a href="../../default.asp.htm" tppabs="http://www.xml.org.cn:8188/default.asp" target="_parent">返回首页</a>][<font face="宋体" lang="ZH-CN"><a href="../application.htm" tppabs="http://www.xml.org.cn:8188/application/application.htm" target="_parent">返回应用</a></font>]</p>
<table width="85%" border="0" align="center">
<tr>
<td width="22%" height="35"> </td>
<td width="53%" height="35">
<h2 align="center">怎样书写CSS样式表来浏览XML文档</h2>
</td>
<td width="25%" height="35"><a name="top"></a></td>
</tr>
<tr>
<td colspan="3" height="418">
<p><span class="normal105">上一篇: <a href="Choosing Between CSS and XSL.htm" tppabs="http://www.xml.org.cn:8188/application/XSL%20uguid/Choosing%20Between%20CSS%20and%20XSL.htm" class="normal105">在CSS和XSL中做出选择</a><br>
下一篇: <a href="Browsing XML Using XSL Style Sheets.htm" tppabs="http://www.xml.org.cn:8188/application/XSL%20uguid/Browsing%20XML%20Using%20XSL%20Style%20Sheets.htm" class="normal105">使用XSL样式表浏览XML文档
</a><br>
返 回 : <a href="Browsing XML Documents in Internet Explorer 5.htm" tppabs="http://www.xml.org.cn:8188/application/XSL%20uguid/Browsing%20XML%20Documents%20in%20Internet%20Explorer%205.htm" class="normal105">
用IE5浏览XML文档</a></span></p>
<p class="normal10"></p>
<p class="normal10"><span class="normal105">本节将介绍如何为一个Xml文档生成一个CSS样式表.</span></p>
<p class="normal10"><span class="normal105">下面的这个Xml样例文档描述了一个饭店的考核评审.它包含了一些特定的章节对这个考核评审的不同类型的重要信息进行了描述.第一节包含了在一个名为r"restaurant"的元素重并提供了关于饭店的名称,地址,电话.第二节是"review"元素包含了考核的数据,考核人的名字,考核日期,得到的星数.第三节是考核的主体以及最后一节是一个饭店的菜单的摘要.</span></p>
<pre class=clsCode><span class="normal105"><font face="Arial" class="normal105"><?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></font></span></pre>
<p class="normal10"><span class="normal105">注意在这篇文当中的Xml标记很少涉及到处理数据描述.没有任何关于格局排列,字符或则颜色的设定.这些信息会在样式表中传达.</span></p>
<p class="normal10"><span class="normal105">在 <a
href="../../../msdn.microsoft.com/workshop/author/css/usingcss.asp" tppabs="http://msdn.microsoft.com/workshop/author/css/usingcss.asp">使用CSS</a> 这篇文章中涵盖了怎样为一个HTMl书写一个CSS样式表.这些样式增加或者重载了HTML中的默认的内建格式动作.对于Xml,默认的格式动作为"display:inline.在书写Xml的样式表的首要任务是对于大多数的元素设定<b>display
</b> 属性为"block"或"none"</span></p>
<p class="normal10"><span class="normal105"><span class="normal105"><span class="normal105">下面显示了你如何开始为饭店考核的样例生成CSS的步骤.这个样式表为主要的小节指定了display属性为"block".</span></span></span></p>
<pre class=clsCode><span class="normal105"><font face="Arial, Helvetica, sans-serif" class="normal105">story { display: block; }
restaurant { display: block; }
review { display: block; }
body { display: block; }
menu { display: block; }</font></span></pre>
<p class="normal10"><span class="normal105">将它保存为 review.css.现在我们在Xml文档的开的开始部分(在stroy元素之前)加入样式表指令以便它能定位到我们新建的样式表.</span></p>
<pre class=clsCode><span class="normal105"><font face="Arial, Helvetica, sans-serif" class="normal105"><?xml-stylesheet type="text/css" href="review.css" ?></font></span></pre>
<p class="normal10"><span class="normal105">基于这样一个指针,当我们在一个浏览其中打开一个Xml文档的时候将提供一个最基本的显示模式.附加的CSS属性能增强这些规则,
对于残留的Xml元素将生成新增的规则.下面是一个菜单属性的和它的子属性的样式规则的增强集.</span></p>
<pre class=clsCode><span class="normal105"><font face="Arial, Helvetica, sans-serif" class="normal10"><span class="normal105">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;
}</span></font></span></pre>
<p class="normal10"><span class="normal105"><span class="normal105">为了完成这个样式表,附加的规则必须加入,以操纵在原文档的中的残留元素.</span></span></p>
<p><span class="normal105"><span class="normal105"><a name=browsing-css-ns><b>在CSS中使用命名域</b></a><font face="宋体"><a name=browsing-css-ns></a></font></span></span></p>
<p><span class="normal105"><font color="#000000" class="normal10"><span class="normal105">当使用一个附加CSS样式表的Xml的时候,名域(Namespaces)必须在文档元素中定义.局部范围的名域(namespaces)会被正确的解析,但是CSS并没有提供一个解决名域前缀问题的机制,因此CSS规则在局部范围的名域中不能准确的与元素相对应.把所有的名域放在文档元素上申明,确保他们都是全局的;这样就不会有前缀的冲突.默认的名域不能被使用;所有带名域的元素必须有一个直接的前缀.另外,CSS选择器能够只通过前缀选定带名域的元素,因此前缀在Xml和样式表中必须一致.</span></font></span></p>
<p class="normal10"><span class="normal105"><span class="normal105">下面是一个元素带有'HTML'前缀的样式表:</span></span></p>
<pre class=clsCode><span class="normal105"><font face="Arial, Helvetica, sans-serif" class="normal105">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;
}</font></span></pre>
<p class="normal10"><span class="normal105">注意 ":"这个命名域字符必须在前有一个"\"才能与一个<a
href="../../../msdn.microsoft.com/workshop/author/dhtml/dude/dude040698.asp#PSEUDOCLASS" tppabs="http://msdn.microsoft.com/workshop/author/dhtml/dude/dude040698.asp#PSEUDOCLASS">pseudoclass</a>区别开来</span></p>
<p><span class="normal105"><a name=browsing-css-html class="normal10">使用HTML命名域(namesapce)</a><font face="宋体"><a name=browsing-css-html></a></font></span></p>
<p class="normal10"><span class="normal105">在用CSS浏览Xml的时候HTML的namespace必须特殊对待.HTMl命名域中的元素将按照他们在HTML中的格式显示.这久允许访问那些没有赋予CSS的能力.例如一些很有用的HTML嵌入元素是
<b><TABLE></b>, <b><A></b>, <b><IMG></b>, <b><SCRIPT></b>,
and <b><STYLE></b>.</span></p>
<p> </p>
<pre class=clsCode><span class="normal105"><font face="Arial, Helvetica, sans-serif" class="normal10"><span class="normal105"><span class="normal105"><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>
...</span></span></font></span></pre>
<p class="normal10"><span class="normal105"><span class="normal105"><span class="normal105">注意:在
Microsoft⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -