📄 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=""><!-- 以下为主体内容 -->
<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 ><!-- 正文内容 -->
<DIV class=pt10><B>4.2.2 使用CSS显示XML文档</B></DIV>
<DIV></DIV><BR>
<DIV class=pt9>
<P>尽管CSS功能强大，涵盖面极广，但仍然有较强的规律可循，比较简单易学。一旦掌握了其精髓，就可以轻松地将其为我所用，即便在XML中也不例外。不过，当我们将CSS实际运用于XML文档中时，对应于文档本身所面向的应用不同，CSS的使用方法也有所不同。</P>
<P>事实表明，XML语言自它产生之日起，就蕴藏了强大的生命力。在XML标准发布之后的短短的两年内，XML的技术已经渗入到了Internet应用的各个角落，不同应用领域的XML标准或XML文档对表现力的要求各不相同。有些XML文档主要面向数据交换，其表现形式相对简单；有些文档是专门面向Web发布的，它的表现力相对就要强一些。因此，在XML文档中使用CSS的方式也有所不同。总结起来，常用以下两种方式：
引用式和嵌入式。
<OL>
<LI>引用式 </LI></OL>
<P>引用式是指XML文档本身不含有样式信息，通过引用外部CSS文档来定义文档的表现形式。大部分XML文档都采用这种方式，这也与XML语言内容与形式分开的原则相一致。具体实现的方法是，在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>这样一来，按照声明语句的指示，该文档在浏览器上的表现方式就由样式文件mystyle.css所决定。</P>
<P>现在，就让我们来看一个新例子。下面是一段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>现在，我们来为它量体制作一件衣服：</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>由此可见，对于相同的数据资料，定义不同的CSS样式单，它们也就以截然不同的外观呈现在我们眼前。 </P>
<P>其实，在第三章讲述命名空间时我们曾经给出了一个例子，它为同一批天气预报的数据准备了两个CSS样式单，然后利用HTML的JS脚本在两种显示方式下进行切换。
<OL start=2>
<LI>内嵌式 </LI></OL>
<P>内嵌式是指将CSS样式直接嵌入到XML文档内部，为元素设置style属性，并在属性值中给出对其样式的定义。这种用法主要出现在一些特殊的XML文档中，一般来讲内嵌CSS样式的XML文档本身就是面向显示的，如SVG、SMIL等。我们将在“XML协议”一章中专门讲述。</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 + -