§ ITPOW >> 文档 >> CSS

作者：田涛 来源： 日期：2002-6-18

　　大家好，还记得我吗？我是田涛。好久没有继续写我这个系列了，从今天开始我将继续
为大家撰写有关于FrontPage2000的文章，当然你可能已经学会了FrontPage2000的使用或者
你开始改用Dreamweaver，但无论如何你都能从我的文章发现新的东西，有些时候，HTML的
设计是共通的。 
　　如果你对网页制作有所了解，一定听说过CSS，中文意思是“层叠样式表”。许多电脑
类媒体都大篇幅的刊载过有关于层叠样式表的教学文章，当然我曾经也写过。只是我一直对
层叠样式表的概念比较糊涂，因为许多文章对于层叠样式表下的定义是不同的或者说有些定
义会让读者产生歧义，比如到底什么是层叠，还有更多有关于CSS的细部的东西很多文章没
有提到。而在这篇文章中，我想利用浅显的语言来告诉你CSS的魅力以及如何利用
FrontPage2000编写CSS和应用到网页中。 

一.层叠样式表的概念 

　　利用HTML编写网页，我们发现有些设计不能利用现有的HTML语言得到实现，比如文本的
重叠。为了弥补这个缺陷，W3C(全球互联网联盟)在1996年12月通过了CSS1标准，该标准制
定了样式的基本规则并规定了格式化网页元素的语法，该标准包含对字体，颜色，表格，图
片，文本等的规范。在1998年5月，CSS2标准被W3C提出，而CSS2主要特征是针对网页元素的
绝对和相对定位，也就是说，以后我们在制作网页方面可以无须利用表格来编排页面了。目
前两大浏览器的最新版本均提供对CSS1和CSS2的支持。 

　　层叠样式表不是用来取代HTML的语言，它只是对HTML的补充。你还是需要利用HTML来编
写你的网页，而层叠样式表用来精确定位页面元素以及配合JavaScript制作出动态网页。如
果你想了解更多有关于层叠样式表的信息，可以访问W3C有关于层叠样式表的站点：
http://www.w3.org/Style/ 

　　为了说明层叠样式表的作用，请看下面的举例： 

$#@60;H1$#@62;读者，你好！$#@60;/H1$#@62; 

　　上面是一段普通的HTML代码，“读者，你好！”将利用HTML语言规定的H1标题大小来显
示。如果要设置该文本距浏览器左边框30px,字体大小为10.5pt，以现有的HTML很难实现，
但如果利用层叠样式表就很容易办到了。我们在HTML代码的
$#@60;head$#@62;$#@60;/head$#@62;间插入:H1 { font-size: 10.5pt; margin-left: 
30px }，然后在$#@60;body$#@62;$#@60;/body$#@62;中的H1标签将应用该层叠样式表。层
叠样式表代码一般都放置于$#@60;head$#@62;$#@60;/head$#@62;间。举例完全的代 
牵?/p> 

$#@60;html$#@62; 
$#@60;head$#@62; 
$#@60;style$#@62; 
$#@60;!-- 
.H1{ font-size: 10.5pt; margin-left: 30px } 
--$#@62; 
$#@60;/style$#@62; 
$#@60;/head$#@62; 
$#@60;body$#@62; 
$#@60;H1$#@62;田涛$#@60;/H1$#@62; /*“田涛”将距离浏览器左边框30px,大小为10pt*/ 
$#@60;/body$#@62; 
$#@60;/html$#@62; 

二.层叠样式表的格式和应用 

　　层叠样式表的标准格式是：h1 { font-size: 10.5pt; margin-left: 30px } 

　　层叠样式表格式由Selector(选择器)，既样式要应用的对象，一般情况下是HTML标签，
比如上面提到的h1,以及Rule(样式规则)，既样式设定的内容，也就是{ }间的内容，上面 
{ font-size: 10.5pt; margin-left: 30px }就是一个样式规则。 

　　有时候我们想针对不同的HTML标签或者相同的HTML标签应用不同的样式内容，比如同样
是H1标签，一个想定义H1的样式想定义12pt的字体，另一个想定义H1的样式15pt的字体，这
时侯需要利用到选择器加以区别。在CSS中一般有三种选择器： 

　　1.类(Class Selector)： 

　　如果你想把某一样式应用到不同的HTML标签上，那么你需要利用类来定义CSS，然后在
不同标签中应用它们。而不像HTML标签CSS只能使用在某一种标签上。定义类的格式是：.类
名 {样式规则}。注意类名前是.。 

　　下面有个例子： 

$#@60;html$#@62; 
$#@60;head$#@62; 
$#@60;style$#@62; 
$#@60;!-- 
.tt{ font-size: 10pt; font-family: 黑体; color: #800080; font-weight: bold } 
--$#@62; 
$#@60;/style$#@62; 
$#@60;/head$#@62; 
$#@60;body$#@62; 
$#@60;p class="tt"$#@62;田涛$#@60;/p$#@62; /*P标签应用名字为tt的类层叠样式表*/ 
$#@60;h1 class="tt"$#@62;读者$#@60;/h1$#@62; /*H1标签也应用名字为tt的类层叠样式
表*/ 
$#@60;/body$#@62; 
$#@60;/html$#@62; 

　　还有一种情况，如果我们只希望为某一个标签，比如H1标签利用层叠样式表，那么只需
要利用h1 {样式规则}格式来设置H1的层叠样式表，而该层叠样式表只利用到H1标签上。如
果你想为相同标签设置不同层叠样式表，那么可以为标签起一个类名，比如：H1.left 
{color:blue}和H1.right {color:red},这一个标签设置了两种层叠样式表，你可以利用不
同的类名在HTML应用它们，类名可以随意取。 

　　具体格式为: 标签.类名{样式规则} 

　　下面有个例子： 

$#@60;html$#@62; 
$#@60;head$#@62; 
$#@60;style$#@62; 
$#@60;!-- 
H1.left {color:blue} 
H1.right {color:red} 
$#@60;/style$#@62; 
$#@60;/head$#@62; 
$#@60;body$#@62; 
$#@60;h1 class="left"$#@62;田涛$#@60;/p$#@62; /*P标签应用名字为H1.left的类层叠样
式表*/ 
$#@60;h1 class="right"$#@62;读者$#@60;/h1$#@62; /*H1标签也应用名字为H1.right 的
类层叠样式表*/ 
$#@60;/body$#@62; 
$#@60;/html$#@62; 

*在FrontPage2000中建立类： 

　　启动FrontPage2000后将自动打开一个空白页面供你编辑，选择菜单“格式/样式”打开
“样式设置”窗口。 


在“样式”窗口列出了HTML标签，你可以为这些HTM标签设置层叠样式表，选择一个HTML标
签，然后双击打开“修改样式”窗口，在“名称(选择器)”文本框输入选择器的名称，这里
默认是h1,单击 



“格式”在弹出的下拉列表里，选择不同的项目进行设置。 

关于格式我们下面将介绍。设置完具体样式后，单击确定后，你可以在“修改样式”窗口的
说明栏看到刚刚设置好的HTML标签层叠样式表代码。最后再单击确定，该HTML标签被建立样
式，以后在网页中所有包含在该标签的内容都将应用先前定义的层叠样式表内容。 

　　你也可以点击“新建”来建立一个新的类，在“新样式”设置窗口的“名称(选择器)”
文本框里输入类的名，这里我们输入.tt，然后单击“格式”，从下拉列表选择不同层叠样
式表内容进行设置 


，单击两次确定后，名为tt的类被建立。回到网页编辑状态中，选择需要应用层叠样式表的
内容，从“格式下拉列表”选择定义的.tt类名，被选内容将被应用.tt所定义的样式内
容。 

　　2.ID 选择器(ID Selector): 

　　ID和类概念是一样的，只是ID只能被引用一次，而类可以被无数次应用。ID的格式是：
＃ID 名称 {样式规则}，例如： #home {color:bule}，应用实例请见以下代码： 

$#@60;html$#@62; 
$#@60;head$#@62; 
$#@60;style type="text/css"$#@62; 
$#@60;!-- 
#home {color:bule} 
--$#@62; 
$#@60;style$#@62; 
$#@60;/head$#@62; 
$#@60;body$#@62; 
$#@60;H1 ID="home"$#@62; ID 选择器 $#@60;/H1$#@62; 
$#@60;/body$#@62; 
$#@60;/html$#@62; 

*在FrontPage2000中建立ID 

　　启动FrontPage2000后将自动打开一个空白页面供你编辑，选择菜单“格式/样式”打开
“样式设置”窗口。点击新建，然后在“新样式”窗口的选择器名称处输入#dd(ID名称可以
随意取)，然后设置格式中的样式内容， 


单击两次确定该ID被建立。 

　　应用ID，可以在网页编辑器中点选鼠标右键选择网页属性，在网页属性窗口，点样式，
在修改样式窗口的ID文本框输入ID名称，该ID名称将应用于$#@60;body$#@62;中，这也说
明，在$#@60;body$#@62;$#@60;/body$#@62;中出现的文本都将被应用该ID定义的样式。你
可以直接在HTML源代码状态下，在需要应用ID的标签里插入，比如：$#@60;H1 
ID="home"$#@62; ID 选择器 $#@60;/H1$#@62; 

3.上下文选择器 (Contextual Selector) 

　　上下文选择器是利用特定的情况，定义出一套新的样式规则。格式如下： 

H1 B { color:red} /*注意H1和B之间是空格*/ 

　　该定义表示当$#@60;B$#@62;$#@60;/B$#@62;标签包含在$#@60;H1$#@62;$#@60;/H1
$#@62;间时，将应用H1 B { color:red} 所定义的样式规则。比如： 
$#@60;H1$#@62;我是$#@60;B$#@62;田涛$#@60;/B$#@62;$#@60;/H1$#@62;，在该代码中“田
涛”将套用H1 B { color:red}所定义的样式规则，“田涛”将显示红色。