?? 0402-0200.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0071)http://162.105.170.55/ASPs/GetLearningArticleTemp.asp?section=0402-0200 -->
<HTML><HEAD><TITLE>XML中國論壇 - 初學進階 - 4.2.2 使用CSS顯示XML文檔</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TABLE {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"
}
.pt9 {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"
}
.pt10 {
FONT-WEIGHT: 700; FONT-SIZE: 10pt; LINE-HEIGHT: 18pt; FONT-FAMILY: "宋體"
}
.TempOutline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; COLOR: #666666; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.TempOutline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; COLOR: #666666; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage0 {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage111 {
FONT-SIZE: 9pt; MARGIN-LEFT: 51pt; TEXT-INDENT: -64pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
</STYLE>
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY vLink=#000000 aLink=#000000 link=#000000 leftMargin=0 topMargin=0
onload=""><!-- 以下為主體內(nèi)容 -->
<div align="center">
<center>
<TABLE width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<TBODY>
<TR vAlign=top>
<TD width=46 rowSpan=2></TD>
<TD vAlign=center >
<p align="center"><IMG height=33
src="image/title_learner.gif" width=226></TD>
<TD width=41 rowSpan=2></TD>
</TR>
<TR vAlign=top>
<TD ><!-- 正文內(nèi)容 -->
<DIV class=pt10><B>4.2.2 使用CSS顯示XML文檔</B></DIV>
<DIV></DIV><BR>
<DIV class=pt9>
<P>盡管CSS功能強大，涵蓋面極廣，但仍然有較強的規(guī)律可循，比較簡單易學。一旦掌握了其精髓，就可以輕松地將其為我所用，即便在XML中也不例外。不過，當我們將CSS實際運用于XML文檔中時，對應于文檔本身所面向的應用不同，CSS的使用方法也有所不同。</P>
<P>事實表明，XML語言自它產(chǎn)生之日起，就蘊藏了強大的生命力。在XML標準發(fā)布之后的短短的兩年內(nèi)，XML的技術已經(jīng)滲入到了Internet應用的各個角落，不同應用領域的XML標準或XML文檔對表現(xiàn)力的要求各不相同。有些XML文檔主要面向數(shù)據(jù)交換，其表現(xiàn)形式相對簡單；有些文檔是專門面向Web發(fā)布的，它的表現(xiàn)力相對就要強一些。因此，在XML文檔中使用CSS的方式也有所不同。總結起來，常用以下兩種方式：
引用式和嵌入式。
<OL>
<LI>引用式 </LI></OL>
<P>引用式是指XML文檔本身不含有樣式信息，通過引用外部CSS文檔來定義文檔的表現(xiàn)形式。大部分XML文檔都采用這種方式，這也與XML語言內(nèi)容與形式分開的原則相一致。具體實現(xiàn)的方法是，在XML文檔的開頭部分寫一個關于樣式單的聲明語句，如下：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><?xml-stylesheet type="text/css"
href="mystyle.css" ?> </TD></TR></TBODY></TABLE></CENTER></DIV>
<P>這樣一來，按照聲明語句的指示，該文檔在瀏覽器上的表現(xiàn)方式就由樣式文件mystyle.css所決定。</P>
<P>現(xiàn)在，就讓我們來看一個新例子。下面是一段XML文檔，描述的是一個學生花名冊，其中有兩個學生的資料。 </P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">student.xml
<P><?xml version="1.0" encoding="gb2312"
?><BR><?xml-stylesheet type="text/css"
href="mystyle.css"?></P>
<P><roster><BR> 學生花名冊<BR>
<student><BR>
<name>李華</name><BR>
<origin>河北</origin><BR>
<age>15</age><BR>
<telephone>62875555</telephone><BR>
</student><BR> <student><BR>
<name>張三</name><BR>
<origin>北京</origin><BR>
<age>14</age><BR>
<telephone>82873425</telephone><BR>
</student><BR></roster></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>現(xiàn)在，我們來為它量體制作一件衣服：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">mystyle.css:
<P>roster,student<BR>{<BR> font-size:15pt;<BR>
font-weight:bold;<BR> color:blue;<BR>
display:block;<BR> margin-bottom:5pt;<BR>}</P>
<P>origin,age,telephone<BR>{<BR> font-weight:bold;<BR>
font-size:12pt;<BR> display:block;<BR>
color:block;<BR> margin-left:20pt;<BR>}</P>
<P>name<BR>{<BR> font-weight:bold;<BR>
font-size:14pt;<BR> display:block;<BR>
color:red;<BR> margin-top:5pt;<BR>
margin-left:8pt;<BR>}</P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>此時，文件student.xml在IE下的瀏覽效果為：</P><FONT face=宋體 size=3>
<P align=center><IMG height=379
src="image/TU000000-0402-0200-01.gif" width=234></FONT></P>
<P>這個樣式單的顯示效果是將學生信息列表顯示。同樣，我們還可以將學生信息用表格的形式顯示，相應的樣式單為：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">mystyle.css:
<P>roster<BR>{<BR> display:table;<BR>
margin-top:12pt;<BR>}<BR>student<BR>{<BR>
display:table-row;<BR>}<BR>name,origin,age,telephone<BR>{<BR>
display:table-cell;<BR>}<BR>name<BR>{<BR> color:red;<BR>
font-weight:bold;<BR>}</P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>遺憾的是，IE不支持CSS2中關于列表形式的定義，所以只有用瀏覽器NetScape的升級版本Mozilla才能看到效果：</P><FONT
face=宋體 size=3>
<P align=center><IMG height=281
src="image/TU000000-0402-0200-02.gif" width=378></FONT></P>
<P>由此可見，對于相同的數(shù)據(jù)資料，定義不同的CSS樣式單，它們也就以截然不同的外觀呈現(xiàn)在我們眼前。 </P>
<P>其實，在第三章講述命名空間時我們曾經(jīng)給出了一個例子，它為同一批天氣預報的數(shù)據(jù)準備了兩個CSS樣式單，然后利用HTML的JS腳本在兩種顯示方式下進行切換。
<OL start=2>
<LI>內(nèi)嵌式 </LI></OL>
<P>內(nèi)嵌式是指將CSS樣式直接嵌入到XML文檔內(nèi)部，為元素設置style屬性，并在屬性值中給出對其樣式的定義。這種用法主要出現(xiàn)在一些特殊的XML文檔中，一般來講內(nèi)嵌CSS樣式的XML文檔本身就是面向顯示的，如SVG、SMIL等。我們將在“XML協(xié)議”一章中專門講述。</P></DIV>
<P></P>
<P></P></TD></TR></TBODY></TABLE>
</center>
</div>
<P></P>
<P>
<P></P></BODY></HTML>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -