?? 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">本節(jié)將介紹如何為一個Xml文檔生成一個CSS樣式表.</span></p>
<p class="normal10"><span class="normal105">下面的這個Xml樣例文檔描述了一個飯店的考核評審.它包含了一些特定的章節(jié)對這個考核評審的不同類型的重要信息進行了描述.第一節(jié)包含了在一個名為r"restaurant"的元素重并提供了關于飯店的名稱,地址,電話.第二節(jié)是"review"元素包含了考核的數(shù)據(jù),考核人的名字,考核日期,得到的星數(shù).第三節(jié)是考核的主體以及最后一節(jié)是一個飯店的菜單的摘要.</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標記很少涉及到處理數(shù)據(jù)描述.沒有任何關于格局排列,字符或則顏色的設定.這些信息會在樣式表中傳達.</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中的默認的內(nèi)建格式動作.對于Xml,默認的格式動作為"display:inline.在書寫Xml的樣式表的首要任務是對于大多數(shù)的元素設定<b>display
</b> 屬性為"block"或"none"</span></p>
<p class="normal10"><span class="normal105"><span class="normal105"><span class="normal105">下面顯示了你如何開始為飯店考核的樣例生成CSS的步驟.這個樣式表為主要的小節(jié)指定了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.現(xiàn)在我們在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屬性能增強這些規(guī)則,
對于殘留的Xml元素將生成新增的規(guī)則.下面是一個菜單屬性的和它的子屬性的樣式規(guī)則的增強集.</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">為了完成這個樣式表,附加的規(guī)則必須加入,以操縱在原文檔的中的殘留元素.</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規(guī)則在局部范圍的名域中不能準確的與元素相對應.把所有的名域放在文檔元素上申明,確保他們都是全局的;這樣就不會有前綴的沖突.默認的名域不能被使用;所有帶名域的元素必須有一個直接的前綴.另外,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>區(qū)別開來</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 + -