📄 0402-0100.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-0100 -->
<HTML><HEAD><TITLE>XML中国论坛 - 初学进阶 - 4.2.1 CSS的书写规范</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=38 rowSpan=2></TD>
<TD vAlign=center width="510" >
<p align="center"><IMG height=33
src="image/title_learner.gif" width=226></TD>
<TD width=38 rowSpan=2></TD>
</TR>
<TR vAlign=top>
<TD width="510" ><!-- 正文内容 -->
<DIV class=pt10><B>4.2.1 CSS的书写规范</B></DIV>
<DIV></DIV><BR>
<DIV class=pt9>
<P>层叠样式单CSS是一种样式描述规则，目前W3C有两个推荐标准，CSS1和CSS2。CSS1于1996年12月通过，CSS2则于1998年5月通过。CSS2是在CSS1的基础上制定的，基本上涵盖了CSS1，并在CSS1的基础上增加了媒体类型、特性选择符、声音样式等功能，并对CSS1原有的一些功能进行了扩充。</P>
<P>其实，CSS制定之初的服务对象并不是XML，它最初是针对HTML提出的样式单语言，不过现在也身兼数职，同样可以很好地应用于描述XML文档的表现。利用CSS，我们可以定义HTML或XML文档中元素的显示效果，包括元素的位置、颜色、背景、边空、字体、排版格式等等。在具体考察CSS在XML中的应用之前，让我们先来讲一些有关CSS放之四海而皆准的规则，也就是CSS的书写规范。</P>
<P>CSS的基本思想是为结构文档中的各个标记定义出相对应的一组显示样式。定义的基本格式为：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">选择符 { 样式属性：取值；样式属性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>下面我们给出一个HTML的例子，为读者增加一些感性认识：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><HTML><BR><HEAD> <BR>
<STYLE><BR> H1{color:red; }
<BR> .myclass{color:green}<BR>
H2.myclass{color:blue}<BR> #myid{color:brown}<BR>
</STYLE><BR></HEAD>
<P><BODY> <BR> <H1>这是红色的一号标题。</H1>
<BR> <P
class="myclass">"myclass"类中的正文是绿色的。</P><BR> <H2
class="myclass">但"myclass"类中的二号标题是蓝色的。</H2><BR><P
class="myclass"
id="myid">以"myid"为标识的正文则是棕色的。</P><BR></BODY><BR></HTML></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>它的浏览结果为：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD>
<H1><FONT color=#ff0000>这是红色的一号标题。</FONT></H1>
<P class=myclass><FONT color=#00ff00>"myclass"类中的正文是绿色的。</FONT></P>
<H2 class=myclass><FONT
color=#0000ff>但"myclass"类中的二号标题是蓝色的。</FONT></H2>
<P class=myclass id=myid><FONT
color=brown>以"myid"为标识的正文则是棕色的。</FONT></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>CSS几经修订，现已<FONT
color=#000000>包容了非常全</FONT>面复杂的显示效果。单介绍CSS，就可专门出一本书。为了节省篇幅，突出重点，我们只大致介绍一些CSS的基本定义方法，如果读者需要更详细的信息，还请查相关的书籍和参考手册。
<OL>
<LI><STRONG>选择符</STRONG> </LI></OL>
<P>选择符是指被施加样式的元素，浏览器在文件中碰到这些元素时，就使用定义好的样式来显示它们。基本的选择符包括标记、类、标识、伪类等等。
<UL>
<LI><EM>标记(tag)选择符</EM><BR>标记可以是HTML中的标记，也可以是XML中已定义的标记。具体的定义方式是：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">标记名 { 样式属性：取值；样式属性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>在本例中，为HTML中的标记<H1>定义了样式，将该标记下的文本用红色显示，因此，浏览结果中的第一行是红色的。</P>
<LI><EM>类(class)选择符</EM><BR>无论是HTML还是XML文档，有些内容是可以分类处理的，相应地，对于某一类的内容可以定义不同的样式予以显示。例子中定义了一个类“myclass”，并为它定义了绿色显示的样式，所以属于该类的元素，即第二行文本，显示出来是绿色的。<BR>需要说明的是，定义样式时class可以与标记相关联，也就是说class的样式受到包含它的标记的制约。因此，在样式单的第三行为属于myclass类的标记<H2>定义了黄色显示的样式，相应地，第三行文本呈黄色。<BR>与标记相关的类选择符与不相关的类选择符的定义方法分别是：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">标记名.类名 { 样式属性：取值；样式属性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>和</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">.类名 { 样式属性：取值；样式属性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>另外，在对XML文档中的类定义样式时，首先该class应该是在DTD中预先声明了的，否则会导致错误的发生。</P>
<LI><EM>标识(id)选择符</EM><BR>在HTML/XML文档中，常常要唯一地标识一个元素，即赋予它一个id标识，以便在对整个文档进行处理时能够很快的找到这个元素。CSS也可以将标识id作为选择符进行样式设定，定义的方法与类大同小异，只要把符号“.”改成“#”就行了。方法是：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">标记名#标识名 { 样式属性：取值；样式属性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>和</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">#标识名 { 样式属性：取值；样式属性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>一般情况下，为标识定义的样式是优先于为类定义的样式的，因此例子中第四行中的文本虽然属于类“myclass”，但显示效果为棕色。</P>
<LI><EM>伪类(pseudo-classe)选择符<BR></EM>伪类选择符主要是指链接锚点的一些特性，在CSS中可以为链接锚点的不同状态赋予不同的属性。如：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD align=middle width="40%"><STRONG>示 例</STRONG></TD>
<TD align=middle width="50%"><STRONG>效 果</STRONG></TD></TR>
<TR>
<TD width="40%">A:link { color: blue }</TD>
<TD width="50%">没访问过的链接颜色显示为蓝色</TD></TR>
<TR>
<TD width="40%">A:visited { color: red }</TD>
<TD width="50%">访问过的链接颜色显示为红色</TD></TR>
<TR>
<TD width="40%">A:active { color: yellow }</TD>
<TD width="50%">激活的链接颜色显示为黄色</TD></TR>
<TR>
<TD width="40%">A:hover { color: green }</TD>
<TD
width="50%">鼠标滑过链接时颜色显示为绿色</TD></TR></TBODY></TABLE></CENTER></DIV></LI></UL>
<P>此外，可以将某个样式同时施加在多个选择符指定的不同元素上，只要将在大括号括起来的样式定义之前的各选择符之间用逗号分隔即可。如果选择符之间用空格分隔，则是用前面的父元素来约束后面的子元素。</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">选择符，选择符，... { 样式属性：取值；样式属性：取值；... }
</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>和</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">选择符 选择符 ... { 样式属性：取值；样式属性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<OL>
<LI value=2><STRONG>样式属性</STRONG> </LI></OL>
<P>样式属性就是指元素的哪些属性可以在样式单中给予改变，在CSS1和CSS2中有很多的篇幅讲样式属性。其中CSS1中包括字体属性（字形、大小、粗细、倾斜等）、颜色属性、背景属性、文本属性、边框属性（页边空、边框、内空等）、显示属性（独立块、内联、列表、表格、隐藏等）几大类。在CSS2中对显示属性的最大改进就是增加了表格的显示方式，此外还增加了一些与页面排版、跨媒体出版相关的内容。
<OL>
<LI value=3><STRONG>属性值</STRONG> </LI></OL>
<P>在定义样式时，除需指出样式所施加的元素、元素的属性之外，还要给属性赋予一个新值。根据属性的不同，属性值的选取也有所不同，主要不外乎以下四种：
<UL>
<LI><EM>长度</EM><BR>在样式中很多的属性都与长度有关，如宽高、字号、字距、行距、边空、线宽等等。需要注意的是：当长度作为一个尺寸的度量，其单位是非常重要的，否则，失之毫厘，谬以千里，显示结果可能就会出乎你的意料之外了。
<LI><EM>URL</EM><BR>有时需要给某些属性赋予URL值，如背景图象属性（background-image）。在进行URL赋值时，要将URL放在url()之中，也可以将其用单引号或者双引号括起来。
<LI><EM>颜色</EM><BR>在CSS中颜色是个很重要的属性，颜色值的赋值有四种形式：颜色名称、十六进制数、十进制数及百分比方式，其中前两种方式较为常用。例如对于红色来讲可以用下面几种方法定义：
</LI></UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<DL>
<DD>p { color:red }
<DD>p { color:#ff0000 }
<DD>p { color:rgb(255,0,0) }
<DD>p { color:rgb(100%, 0%, 0%) } </DD></DL></BLOCKQUOTE></BLOCKQUOTE>
<UL>
<LI><EM>关键字<BR></EM>这里的关键字是指预先定义好的字符型属性值，对于不同的属性有不同关键字值。例如上面提到的颜色名称实际上就属于关键字，其它的又如用于线型的none、solid、dashed、double等等。<BR><STRONG><BR></STRONG></LI></UL></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 + -