CSS 5 Day

1.
1 第 1 日
用 HTML 制作网页就象是用画笔绘制一幅图画。只有那些对网页制作痴迷而执着的人才可能精确地实现预定
的结果，这并不是正确的工具和灵活性就可以实现的。
任何使用过 HTML 一个多星期的人都知道 HTML 是一种非常好的网页制作工具。所以有时候我们不得不制作

体积相当大的 GIF 图象以获得想要的字体和布局。同样，有时候也不得不使用各种表格标签和隐藏的空格
GIF 图象以使页面的布局能达到预想的目的。
的确有些荒唐。我们的编码实在是太复杂了，GIF 用量越来越多，而我们的页面变得比英吉利海峡还要宽，
互联网有限的带宽怎么可能通过这么宽的信息呢？这种设计并不是网页设计的最佳形式。
但是，1996 年底的时候悄悄诞生了一种叫做样式表（stylesheets）的技术。全称应该是串接样式表
（Cascading Stylesheets－简称 CSS）这位 HTML 的表弟向世人保证：
将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。
• 只通过修改一个文件就改变页数不定的网页的外观和格式。
• 在所有浏览器和平台之间的兼容性。
• 更少的编码、更少的页数和更快的下载速度。
除了还不能全面支持我们常用的大多数浏器之外，CSS 在实现其它承诺方面作得相当出色。CSS 在改变我们

制作样式表的方法。它为大部分的网页创新奠定了基石。
之后的 5 天，我们将漫游样式表的世界。你将学到样式表的基本知识并将其应用于你的网页中。你还将学
到如何处理字体、图文、色彩、背景及定位等的详细技巧。
今天，我们先浏览一下样式表的基本内容。第 1 个问题；样式表能为我们做什么？
1.2 样式表能为我们做什么？
样式表能为我们做什么？
那么样式表有什么特别之处呢?简而言之,它能帮你做以下事情:
• 你可以将格式和结构分离。
• 你可以以前所未有的能力控制页面布局。
• 你可以制作体积更小下载更快的网页。
• 你可以将许多网页同时更新，比以前快更容易。
• 浏览器将成为你更友好的界面
你可以将格式和结构分离。
你可以将格式和结构分离。
HTML 从来没打算控制网页的格式或外观。这种语言定义了网页的结构和个要素的功能，而让浏览器自己决
定应该让各要素以何种模样显示。
但是网页设计者要求的更多。所以当 Netscape 推出新的可以控制网页外观的 HTML 标签时，网页设计者无

不欢呼雀跃
欢呼雀跃。
欢呼雀跃。我们可以用<FONT FACE>、<I>包在<P>外边控制文章主体的外观等等。然后我们将所有东西都
放入表格，用隐式 GIF 空格产生一个 20 象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪，要
想将什么内容迅速加到网页中变得越来越难。
串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML
仍可以保持简单明了的初衷。CSS 代码独立出来从另一角度控制页面外观。
你可以以前所未有的能力控制页面的布局。
你可以以前所未有的能力控制页面的布局。
<FONT SIZE>能使我们调整字号，表格标签帮助我们生成边距，这都没错。但是，我们对 HTML 总体上的控

制却很有限。我们不可能精确地生成 80 象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确
定位图象的位置。
但是现在，样式表使这一切都成为可能。而即将推出的新的 CSS 功能更令人兴奋。以后 4 天内，你将会明

白我所说的意味着什么。
你可以制作出体积更小下载更快的网页
还有更好的消息：样式表只是简单的文本，就象 HTML 那样。它不需要图象，不需要执行程序，不需要插件，

不需要流式。它就象 HTML 指令那样快。
有了 CSS 之后，以前必须求助于 GIF 的事情现在通过 CSS 就可以实现。还有，正如我先前提到的，使用串

接样式表可以减少表格标签及其它加大 HTML 体积的代码，减少图象用量从而减少文件尺寸。
你可以更快更容易地维护及更新大量的网页。
没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页。即便站
点用数据库提供服务，我仍然需要更新所有的模板，而且更新每一模板中每一个实例实例的<FONT FACE>。
样式表的主旨就是将格式和结构分离。利于样式表，我可以将站点上所有的网页都指向单一的一个 CSS 文
件，我只要修改 CSS 文件中某一行，那么整个站点都会随之发生变动。
浏览器将成为你更友好的界面。
浏览器将成为你更友好的界面。
不象其它的的网络技术，样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生
中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。
只要是可以识别串接样式表的浏览器就可以应用它。
怎么样，样式表的确是一个很不错的注意吧？
那么，现在我们就开始制作一份样式表。 zzz1.3 你的第 1 张样式表
现在我们就开始制作样式表。
打开你最喜欢的 HTML 编辑器生成基本的网页：
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
很好。现在，让我们给它加一些样式表。只需在最初的<HTML>和 <BODY>标签之间插入以下代码：
<STYLE TYPE="text/css">

</STYLE>
从浏览器中打开页面，你将会看到：
Stylesheets: The Tool of the Web

Design Gods
Amaze your friends! Squash your enemies!
如果你的浏览器不支持 CSS，请点击这里观看 CSS 的效果。
做得很好！你已经制作出了你的第 1 份样式表支持的网页。
（如果“amaze your friends!”一行的背景不是黄色，则说明你需要升级你的浏览器，否则你将无法学完

整个教程。建议你安装 Netscape Communicator 或者 Internet Explorer 4）
一些术语
让我们学习一下这些新的编码：
串接样式表的核心是规则。最简单的规则就象这样：
H1 { color: green }
整个规则告诉浏览器将所有<H1></H1>包围的文字以绿色显示。
每一条规则包含一个选择及说明。在上述例子中，H1 就是选择，它是一个附带样式功能的 HTML 标签。说

明用于定义实际的样式，包括两部分：属性（本例中即 color）和参数（green）。
任何 HTML 标签都可用作标签。所以你可以将样式表的信息附加到任何要素。从通常的<P>到<CODE>及
<TABLE>内容。你甚至可以通过将样式表用于<IMG>将串接样式表的属性用于图象。
从我们的第 1 个样式表实例中可以发现，你可以归类样式表的规则。我们将 3 种不同的说明都用于<P>。
与之类似，你也可以归类选择：
H1, P, BLOCKQUOTE
{ font-family: arial }
这项规则设定所以位于<H1>、<P>和<BLACKQUOTE>的标签将用 Arial 字体显示。
继承性
样式表的规则可从母体延续到子体。下面是一个例子：
B { color: blue }
这项规则告诉浏览器将所有<B>之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？
<B>All my Web pages will use cascading stylesheets within <I>four</I>

weeks.</B>
对于<I>标签并没有设定样式，但因为<I>位于<B>之中，所以它将继承母体<B>设定的样式，也以蓝色显示。
All my Web pages will use cascading stylesheets within four weeks.
现在我们已经明白了串接样式表的规则如何运作，还看到将样式表加入网页的一种方法但还有其它方法，
让我们继续学习。 zzz1.4 将样式加到你的网页中
我们已经学了将样式表加到网页的一种方法。实际上你可以使用 4 种方法。每种方法都有其不同的优点：
• 将样式表植入 HTML 文件中。

• 将一个外部样式表链接到 HTML 文件上。
• 将一个外部样式表输入到 HTML 文件中。
• 将样式表加入到 HTML 文件行中。
植入样式表：
这就是我们在上一页中用的方法，所有的样式表信息都列于 HTML 文件的顶部，同<BODY>分列，例：
<HTML>

</STYLE>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
植入样式表规则后，浏览器在整个 HTML 页面中都执行该规则。如果你想对网页一次性加入样式表，就可采

用该方法。
你可能注意到代码中有两处很奇怪： TYPE="text/css"属性和注释标签。 TYPE="text/css" 设定采用 MIME

类型，这样以来，不支持 CSS 的浏览器可以忽略样式表。
注释标签()更为重要。有些老的浏览器（如 MAC 机用的 IE 2.0）即使在设定了 TYPE="text/css"

属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免
发生这种情况。
链接到样式表上
这里是样式表功能发挥得淋漓尽致的地方。你可以将多个 HTML 文件都链接到一个中心样式表文件。这个外

部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的额某一细节，所有页面都会随之改
变。如果你维护的站点很大，则这项功能绝对会有其用武之地。
它的使用方法：产生一个普通的网页，但使用<STYLE>规则，而是在<HEAD>内使用<LINK>标签：
<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>
(使用链接的样式表时，你无须使用注释标签。)
现在生成一个单另的文本文件，起名 mystyles.css (或者其任何你喜欢的名字)。文件内容如下：
H1 { color: green; font-family: impact }

如同发布 HTML 文件那样，将这个 CSS 文件布到你的服务器中。在浏览器中观看网时，你会发现浏览器将依

照链接标签将有链接了的 HTML 网页按照样式表的规则示，在 HREF 属性中你可以选择使用绝对相对 URL。
输入样式表
输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用，但输入法则可
以。例：
<HTML>

</STYLE>
<HEAD>
</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>
而其中输入的 company.css 文件内容如下：
H1 { color: green; font-family: times }

在本例中，浏览器首先输入 company.css 的规则 ( @import 必须打头), 然后加入移植的规则从而为这个

网页产生规则集合。
请注意，对于 H1 在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行
哪一项规则呢？植入的规则此时将占上风。所以文字显示效果如下：
Stylesheets: The Tool of the Web Design

Gods
Gods
Amaze your friends! Squash your enemies!
如果你的浏览器不支持 CSS 请点击这里观看显示效果。
输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的
样式表之上。
但是目前只有 IE 4.0 支持输入法。
在行内加入样式
最后，
最后，你还可以在 HTML 行中加入样式规则，如下：
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design
Gods</H1>
<P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your
enemies!</P>
</BODY>
</HTML>
在这个例子中，你无须在 HTML 顶部加入样表代码。加入行内的样式表属性将使浏器同样执行样式表规则。
该方法不方便之处在于：你必须在每行指中都中加入样式规则，否则下一行时浏器将转回到文件的缺省设
置。
加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。
记住，你可以同时使用几种方法，其实，样式表的能力就在于综合你加入网页的各种样式。
1.5 分类及其它技巧
我们已经学习了所有的样式表基本语法。下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.
分类
我先前已经讲过所有的 HTML 标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要

复杂该如何处理呢？比如,你想让主体文字的 1 段用绿色显示，第 2 段用紫色显示，而第 3 段用灰色显示，
你能做到吗？
这种情况下分类将发挥作用。你可以将段落 P 分成 3 种不同的类别，每一类应用不同的样式表说明。这些
规则（不论是植入的还是外部样式表文件）将以以下方式显示：
P.first { color: green }

P.second { color: purple }
P.third { color: gray }
• 你的 HTML 代码如下：
<P CLASS=first>The first paragraph,

with a class name of "first."</P>
<P CLASS=second>The second paragraph, with a class name of "second."</P>
<P CLASS=third>The third paragraph,
with a class name of "third."</P>
你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的 .）
你还可以生成不加任何 HTML 标签的分类：
.first { color: green }
这种方式更加灵活，因为现在我们可以将 CLASS=first 用于任何 HTML 标签，并应用到网页<BODY>中，而设

定的文字将以绿色显示。
情景选择：
情景选择
如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字
内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择
要求你设定一个可以执行选择说明的情景即可。
P B { color: red }
<H1><B>Emma Thompson</B>, Actress
</H1>
<P>Dramatic actor, inspired
comedienne. Is there <B>nothing</B>
she can't do?</P>
样式表的规则告诉浏览器只将所有<P>之内加重显示的文字以红色显示。所以，<P>之外标题的加重文字不
会以红色显示，而<P>之内的文字则是。
注释
即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例：
P.first { color: green } /* green

for the first paragraph of every
page */H1 { text-indent: 10px;
font-family: verdana }
IMG { margin-top: 100px } /* give
all images a top margin */
串接
你可能会问这样的问题：“为什么要把它叫做串接样式表呢？下面我们将回答你的问题。
1.6 串接
屏幕就是一个战场，在一个 HTML 文件中，如果有 3 种不同的样式表规则都使用 P 作为其选择。输入的样式

表指示浏览器将<P>文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用
黄色。
那么可怜的浏览器该听谁的呢？
好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规
则更重要。根据正式的规定，以下为样式表的串接顺序：
1. Inline styles （行内样式）

2. Embedded styles （植入样式）
3. Linked styles （链接样式）
4. Imported styles （输入样式）
5. Default browser styles（缺省浏览器样式）
styles
浏览器将按照上述顺序执行样式表的指令。
但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将<P>以绿
色显示，而另一个规则要求以红色显示？
多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺
序：
1. 使用特别说明的样式表规则，
使用特别说明的样式表规则，例：
BODY { color: green }

P { color: red }
有一项规则特别说明<P> 中的文字一红色显示，但它同时也继承了<BODY>的绿色规定。但
是特别说明了的规则的重要性要大于继承的规则，所以<P>之内的文字一红色显示。
2. 应用继承的样式表规则
如果不存在第 1 步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向
执行继承的规则。如果找不到继承的规则，则浏览器转向执行第 3 步。
3. 按照样式表规则在 HTML 中的显示顺序执行。

中的显示顺序执行。
P { color: green }
P { color: red }
当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，<P>作为讲座一红
色显示，因为它是最后给出的规则。
注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定 Netscape Communicator 和

Internet Explorer 都不支持，所以本文中不再细述。
最后一个问题：如果样式表规则同 HTML 标签冲突时，如何处理？我们看一下这个例子：
I { font-family: impact }
<P>I think <I><FONT FACE="Times">

East of Eden</FONT></I> is Stein
beck's best novel.</P>
该例中样式表规则要求浏览器使用 Impact，但是传统的 HTML<FONT FACE>标签要求用 Times 字体，一个很

明显的传统。
根据正式的样式表规定，应该优先执行样式表规则。
但是最主要的几种浏览器 Netscape 和 IE 4.0 都规定应优先执行 HTML。唉.......
你看到了吧，浏览器不能如我们希望的那样应用串接样式表。节哀顺变吧。
1.7 关于浏览器的坏消息
我必须得作这个简短而又尖刻的评价：串接样式表很伟大，但浏览器却不怎么样。
Internet Explorer 3.0 是第一个试图支持样式表的浏览器，它的尝试是很有勇

气的，特别是在尚未确定样式表的正式标准的时候更显得可贵。但也因为如此，
IE 3.0 支持了 CSS 的大部分属性，但也存在一些小毛病。
你可能以为等 Netscape Communicator 和 IE 4.0 问世的时候将会更坚定地支持

CSS。很可惜。似乎微软和网景关系的开发者对 CSS 的某些属性都作了自己的阐
释。而双方的阐释彼此互不支持。
结果如何呢？应用样式表就象是行走在地雷区一般。大部分的东西都很正常，但
有些不是。甚至有些东西都能运转，但在不同的浏览器上的显示却不同。
在以后 4 天的学习中，我将尽力说明不同的浏览器各自支持什么属性。但是其中
的细节就需要你自己亲自去趟这个雷区了。将利用样式表制作的产品放到不同的
浏览器和平台上进行测试是非常有必要的。这是避免令人不愉快的结果的唯一办
法。
同时，我们应该大声疾呼，让微软和网景公司明白必须统一对串接样式表的支持，
只有这样才能实现标准化的设计。
1.8 第 1 日复习
今天我们探索了样式表的神奇魅力及其基本使用方法。
为什么使用串接样式表？因为它能对网页的设计施以绝对的控制。它还是维护和
更新一个网站最有效的途径。它能使网页的体积更小下载速度更快。
CSS 如何应用呢？通过每一项样式表规则应用。样式表规则由选择和说明两项构
成。规则可以被植入、链接、输入 HTML 或加入 HTML 文件行内。每种网网页中加
入样式表的方法都有各自的优势。
下面的 4 天中，我们将深入学习样式表的各项属性，了解它的威力。以下是大致
的学习计划：
• 第 2 日：字体
• 第 3 日：图文和布局
• 第 4 日：颜色和背景
• 第 5 日：定位
2.1 第 2 日
欢迎进入串接样式表第 2 天的课程，昨天我们已经学习了如何使用及在网页中加
入串接样式表，今天我们将深入学习串接样式表每一项精彩绝伦的特点。
今天我们主要学习字体，即如何控制字号，字模及加入特殊效果。想想如果只用
HTML 标签你能做到这些吗？接着往下读。
今天要学习的 CSS 特点包括：
• 字模系列
• 字号
• 字重
• 字体风格
• 字体参数
• 文字变形
• 文字修饰
• 字体
现在开始！
2.2 按照字体名称调用字体
第 1 个问题：你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的
名称就行了吗？
很可惜，事情还不是这么简单，字体在各个操作平台之上叫的名称可能会有变化。
比如，Courier 在 MAC 机上叫做 COurier New。在一台机器上可能叫 Italic 的字
体在另一台机器上可能就叫做 Oblique。你仔细研究
之后会发现更多的这样的例子。
所以，我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。而你必
须确定使你所用的字体名称就是计算机所以的字体名称。
那么你怎么确定计算机对一种字体的确切名称是什么呢？这取决于于计算机所
用的操作平台。
• Windows 的用户：使用应用软件比如 word 中的字体菜单中所列出的确切的字体名

称。
• Mac 机用户：不要相信应用软件给你列出的字体名称。而应该打开你的 system folder，
按照其中对字体的拼写在你的样式表中使用字体名称。
字模系列
字模系列就是 CSS 中称呼一种字体的名称属

性。其基本语法如下：
H2 { font-family: helvetica,
impact, sans-serif }
这里是 Web 浏览器阐释样式表的规则：首先在列表中寻找字体的名称

（helvetica），如果在该计算机中安装了这种字体，就使用它。如果没有安装，
则移向下一种字体（impact），如果这种字体也没有安装，则移向第 3 种字体
（sans-serif）。sans-serif 字体参数是浏览器可以依据的最后一种参数，它
告诉浏览器使用任何一种缺省 sans-serif 字体（或许就是 Arial）。
以下为你所用浏览器的实际显示结果：
CSS font control is peachy.
如果你的浏览器不支持 CSS 属性，请点击这里查看其显示效果。
你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名
称没有把握时，这样做无疑是一种好办法。注意：浏览器更倾向于认可小写的名
称。当然，只用你对所有项目都进行了测试，就不会有问题。
每次将一种 generic 字体作为最后的选项列在字体列表中是一种很好的做法。你

可以选择以下几种：
• serif (也可能是 Times)

• sans-serif (也可能是 Arial 或者 Helvetica)
• cursive (也可能是 Comic Sans)
• fantasy (也可能是 Ransom)
• monospace (也可能是 Courier)
（注意：Netsacpe Communicator 不支持 Cursive 或者 fantasy）
其它字体名称诀窍：
• 如果一种字体的名称不只一个单词，如 Gill Sans，在你的 CSS 代码中用引号包含该

字体的名称。
BODY { font-family: "gill sans", "new baskerville", serif }
• 行内加入的 CSS 规则，使用单引号：
<P STYLE="font-family:
'gill sans', 'new
baskerville', serif">Text
goes here.</P>
• 如果你将 CSS 规则的说明组合在一起，而其中又包含字模系列，将字模系列列在最

后，例：
H2 { color: red; margin:

10px; font-family: times,
serif }
• 有时候，如果字模系列没有列在最后一条，IE 3 会忽略整个一条 CSS 规

则，很莫名其妙，但却是真的。
利用字模系列属性，你可以按照字体名称调用字体，而且在使用<FONT FACE>标
签时将拥有更大的灵活性。
2.3 对字号的控制
利用 HTML 你只能<FONT SIZE=X?>设定 7 种字号，很令人沮丧，是吧？但等你看

完本页之后，你将会发出一声长长的 WOOOOOOOOOOOW！
字号
使用 font-size 属性，你可以对文字的尺寸进行无限的控制。
确定这的 3 种基本方法：
• Points, ems, pixels, 及其它单位

• 关键字
• 比例参数
Points, Ems, Pixels, 及其它单位
样式表可以识别许多种确定一种要素尺寸的不同单位：
第 1 种， points:
points
P { font-size: 16pt }
这条代码告诉浏览器以 16 points（点）的尺寸显示<P>。
Points 是确定文字尺寸非常好的单位，因为它在所有的浏览器和操作平台上都
适用。你唯一需要留意的就是在缺省设置下，PC 机中显示的字要比 MAC 机中显
示的大一些。
如果这一点对你来说很重要的话，你可以利用 javascript 识别不同人所使用的

操作平台，然后根据不同的平台链接相应的 CSS 文件。若想学习制作方法，请点
击 learnhow。
Points, like all other units, work as small or as
big as you want (that was 8
points and 80 points, respectively).

以上语句采用 CSS font-size 属性制作。如果你的浏览器不支持这种属性，请点
击这里查看显示效果。
下一个单位，EM
EM:
EM
B { font-size: 1.5em }
em 是和 point 相同的距离单位。在样式表中，em 指母体要素的尺寸。所以，在

上例中，所有包含在<P>中的<B>的文字的尺寸将是 30points（因为<B>中的找是
母体字号（20pt）的 1.5 倍。
但是，浏览器对 em 不是很支持，所以你还是最好用 point 单位。
下一个单位，pixels
pixels:
pixels
P { font-size: 20px }
从网页设计的角度来说，pixel（象素）是一个非常熟悉的单位，它最大的优点
就在于所有的操作平台都支持 pixel 单位（而对于其它的单位来说，PC 机的文
字总是显得比 MAC 机中大一些。
而其不利之处在于，当你使用 pixels 单位时，网页的屏幕显示不稳定，字体时

大时小，甚至有时根本不显示，而 points 单位则没有这种问题。
其它单位：如果上述单位仍然不符合你的要求，请试试这些单位：
其它单位
• in （英寸）
• cm （厘米）
• mm （毫米）
• pc （打字机字型尺寸单位）
• ex （x-height）
关键字
关键字
如果你不喜欢使用这些单位，你还可以选择以关键字说明文字尺寸，例：
P { font-size: large }
有 7 种关键字，相对应于<FONTSIZE>中所用的数字参数：
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
利用这些参数，Web 浏览器可以自由决定每一种关键字所适合的尺寸。例如：在
Netscape Communicator 中 x-large 的尺寸为 28points，而在 IE 4（windows
及 MAC）中为 24points，而在 Win 95 下的 IE 3 中为 18points。
还要两种相对尺寸关键字：
• smaller
• larger
smaller 参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”，例如，
如果 large 字号的文字应用 smaller 参数，则其字号变成了 midium 尺寸。larger
参数的作用类似。
（注意：IE 3 不支持 smaller 或 larger 参数。）
比例参数
设定文字尺寸的第 3 种办法就是使用比例参数，例：
B { font-size: 300% }
这些规则的含义为：使所有包含在<P>中的的<B>文字的尺寸为<P>尺寸设定值的
3 倍，即 45 points。比例参数常用于从母体要素继承的参数值。
浏览器对比例参数比较挑剔，所以你必须经常测试。
有了这么多的选择是不是很让人高兴呢？由于有了 font-size 属性，我们能够随

意调整文字的尺寸，如同以下的例子所示：（每一个字母 i 都比前一个大 5pt）
i i i i iii iiiii ii
2.4 加重显示和斜体字的所有方式
利用 CSS 加入斜体字非常简单，而且我们对于加重字体还有很多选择。
字体风格
字体风格用来控制斜体字的属性，非常漂亮又非常简单：
H3 { font-style: italic }
当浏览器接到应用斜体字的指令后，它将用户的机器中寻找安装的斜体字版本，
果不存在斜体字，浏览器将生成一种。常，就是指将正常的字体倾斜显示。
如果一种字体的名称为 Oblique，而不是 Italic，浏览器就会使用 oblique 作为

字体风格的参数。
字体风格的第 3 种参数是 normal，它将取消斜体字风格，将字体以正常形式显

示。
字重
加重风格可以关闭或打开，利用字重属性，可以创造出一系列新的加重字体。
P { font-weight: bold }
这是字重最常见的应用方式，而 normal 属性也可以取消加重字体，将字体以正

常形式显示。
你还可以用数值 100，200，...900。正常的非加重体的字体值为 400，900 是最

加重的字体参数值。
Web 浏览器将决定每一参数值的实际显示。
要显示这些例子的效果，你必须安装相应的字库，并且你的系统还得支持 CSS：
• Arial
• Verdana
• Eras
而且你的用户的机器也必须安装相同的字而且其系统支持 CSS 的这些参数值。
（IE 3 对此均不支持）。
最后，你还可以给字重加上 lighter 和 bolder 参数，当然前提是所使用的字体

已经赋予了某种级别的加重字体属性。在已有属性级别上，浏览器将使字体的显
示相应地更加重一些（bolder）或更轻一些（lighter）。
（注意：IE 3 或 Netscape Communicator 都不支持 lighter 或 bolder 参数。）

2.5 文字的特殊效果
下面你将发现其它一些有关字体的样式表属性，你可以将其加入到你的工具箱
中。
字体参数（
字体参数（font-
font-variant)
这时一种挺简单的属性，你可以将正常文字缩小一半尺寸后大写显示。
H2 { font-variant: small-caps }
很不幸，Communicator 或者 Internet Explorer 目前都不支持这项属性。IE 4

有些靠近这种标准，但它只是将字体以正常的大写形式显示。
希望 IE5.0 能支持这项属性。
文字变形（
文字变形（text-
text-transform）
transform）
这项属性可以使你轻而易举地控制字母写。基本代码：
B { text-transform: uppercase }
以下为所有可用的参数：
• uppercase 使所有字母大写显示，
例：
This sentence serves as an example.
• lowercase 使所有字母小写显示，
例：
• capitalize 使每个单词的第 1 个字母大写显示，例：
• none 使所有继承的文字变形参数被忽略，文字将以正常形式显示。
例：
（注意：IE 3 不支持文字变形）
如果你的浏览器不支持上述显示效果，请点击这里查看显示效果。
文字修饰（
文字修饰（text-
text-decoration）
decoration
几十年以来（不管怎么说，反正很长的一段时间以来），所有链接了的文字在浏
览器中都以下划线的形式显示，对这种事实我们都无计可施。我认为这种形式效
果很难看，女士们先生们，现在我们有解决办法了：文字修饰（text-decoration)。
其基本语法如下：
B { text-decoration: underline }
大部分的选项使得文字变得难以阅读：
• underline 给文字下划线，例：
these words.
• overline 给文字上划线，例：
these words.
• line-through 给文字划出删除线，
例：these words.
• blink 是你在恶梦中常常看到的－－
文字在闪烁，例：
these words.
• none 使得上述效果都不会发生。
（注意：Communicator 不支持上划线，IE 4 不支持文字闪烁，IE 3 对这些都不

支持。）
如果你的浏览器不支持这些 CSS 属性，请点击这里查看显示效果。
none 参数非常有用，你可以使链接的文字不以下划线的形式显示。具体做法：
A:link { text-decoration: none }

A:active { text-decoration: none }
A:visited { text-decoration: none }
思考以下这些为<A>标签预定义的分类 A:link 用于正常的未被访问过的链接，

A:active 用于你正在点击的链接
A:visited 用于已经访问过的链接。
这些指令进入你的植入、链接、输入的样式表，但不会改变你的 HTML 链接代码:

<A HREF="http://www.webmonkey.com/">
Link</A>
以下是显示结果：
This text is a link, but not

underlined!
如果你的浏览器不支持这种 CSS 属性，请点击这里查看显示效果。
你不仅可以消除链接的下划线，而且你还可以利用这 3 条属性使用 CSS 的其它属

性，比如，你可以使得为被访问过的链接以 12points 的 Arial 加重字体显示，
而访问过的链接以 10points 尺寸的 Times 斜体字显示。这个世界可以由你自由
塑造，
可惜呀，可惜！并不是所有的浏览器都支持这项属性。Communicator 支持带文
字修饰（text-decoration）的预定义分类，但对其它属性非常挑剔。IE 3 不支
持 A:active(而 MAC 不支持 A：visited)，IE 4 支持全部这些属性。
尽管有这些局限，但至少你比以前有了更多的可能性！这都要感谢 CSS 的创作

者...
2.7 复习
今天我们探索了字体的奇妙世界：字型、字号、加重显示、斜体字、大写、下划
线等等。利用传统的 HTML 你的确也可以作很多事情，但不是所有事，而且也达
不到样式表对字体的控制程度。
串接样式表的字体属性总结：
• 字模系列定义字体以何种字体显示字号使你可以利用 points,pixels，
关键字及其它尺寸单位控制文字的尺寸。
• 字体风格用于斜体字显示。
• 字重对字体加重显示的程度作全面的控制。
• 字体参数（font-variant）将文字以小一半的尺寸大写显示。
• 文字变形（text-transform）控制大写。
• 文字修饰（text-decoration）可以控制文字的多种细节的变化，如下划
线、闪烁等等。
还需提到另外一项重要的属性，字体。字是一种将字号、行高度及字母系列一次
义的快捷方式。例：
LI { font: 12pt/16pt courier }
这条规则将<LI>文字设置为：尺寸 12points，行高度 16points，（我们将在明

天谈到该属性），字型采用 Courier。
使用字体属性时，必须设定字号和字型，但可以选择是否设定行高度。设定的顺
序必须严格按照例子中的顺序。
这只是我们探索 CSS 众多属性的开始。明天我们将更深入研究字体属性及图文和

布局。
3.1 第 3 日
我们在第 2 天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些
字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、
字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动
要素等，列表如下：
• 字间距
• 字母间距
• 行高
• 文字对齐方式
• 垂直对齐方式
• 文字缩位
• 顶边距、左边距等
• 空格填充－顶部、左边等等
• 边框－宽度、颜色、样式等
• 浮动
• 清除
很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧！
3.2 字间距及字母间距
下面要学习的属性可以使你做到 HTML 标签做不到的事情：控制字间距及字母间

距。
字间距
利用字间距属性，你可以在字之间加入更的距离：
H3 { word-spacing: 1em }
你所使用的参数值将加入任何浏览器的缺设置，你可以使用我们昨天谈到的任何
种长度单位：
• in （英寸）
• cm （厘米）
• mm （毫米）
• pt （点数）
• pc （打字机字间距）
• em （ems）
• ex (x-height)
• px （象素）
以下为显示结果：
Behold the power of cheese.
如果你的浏览器不支持这种 CSS 属性，请点击这里查看显示效果。

如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有 MAC 机用的
IE4 能支持这种字间距设置。
字母间距
字母间距可以在 IE 4 中应用，但 Communicator 不行，唉...
H3 { letter-spacing: 10px }
字母间距的功能和字间距的很类似：其参值将被加入到浏览器的缺省设置中，你
以使用上述任何一种长度单位。
如果你用的是 IE 4，这里是一个例子：
B e h o l d t h e p o w e r o f c h e e s e .
对于这两种属性，你都可以使用 normal 参数。从而使其按照浏览器的原有缺省

设置显示。
别沮丧，还有很多 CSS 属性可以在两种浏览器上都可使用。下文中就是一个例子。

3.3 行距
行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行
距时最常用的称呼是"Weee!"
行高
行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间
的垂直距离。
B { line-height: 16pt }
你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如 x,a 的下阶

线，但不包括诸如 y,g 等字母超过下阶线的部分）之间的垂直距离。注意你所设
定的参数将完全代替浏览器的缺省参数。
Netscape Communitor 和 Internet Explorer 在行之前加入行高参数。所以如果

你将参数设为 10px，浏览器将把文字的第 1 行以 10px 的高度显示。
有 3 种设定行高的方法：
• 数字
• 长度单位
• 比例
用数字设行距
B { font-size: 12pt;
line-height: 2 }
当你用数字设定行高的时候，浏览器将利用字号来确定行距：它将字号乘以设定
的参数值。所以，在本例中，行高将是 24 点。显示效果如下：
Four score and seven years ago,

the Web wasn't yet a glimmer in
anyone's eye. No one needed it,
no one missed it. Eighty-seven
years from now, what will
people laugh at us for lacking?
你还可以用小数设定参数值。
（你应该知道 IE 3 不支持数字参数值，在 IE 3 中使用数字参数将出现大片文

字的互相重叠。）
用长度单位设定行距
B { font-size: 12pt; line-height: 11pt }
设定行高的另一种方法就是利用先前学过的长度单位（em 及 pt 是最常用的单
位），以下为显示效果：
Four score and seven years ago,

the Web wasn't yet a glimmer in
anyone's eye. No one needed
it, no one missed it.
Eighty-seven years from now,
what will people laugh at us
for lacking?
你既可以轻松地将行距缩小也可以将行距放大。有了样式表，这一切都易如反掌！
用比例设定行距
B { font-size: 10pt; line-height: 140% }
在本例中，行距是长度 10points 的 140％，即 14points。明白了吗？

让文字互相重叠!
让文字互相重叠!
你可能会问这样的问题：如果行距太小的话，文字岂不就重叠在一起了吗？是这
样的。我们来看看这个例子：
B { font-size: 28pt; line-height: 2pt }
以下为显示效果:
Whoa.
Cool.
"Whoa" 使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第 1 行重
叠了。
（Communicator 和 Internet Explorer 对行高的诠释有所不同。 Communicator

将只是将文字的上半部分重叠一点，而 IE 则将其全部重叠。）
如果你计划将你的网页中的某些内容重叠显示，行高设置还不是最佳的选择，因
为不同的浏览器对其的支持有差别。在第 5 天的课程中我们将研究文字及图象布
局的最佳方式。
3.4 文字对齐及缩行
现在我们谈谈段落及图象的对齐和加入段落缩行。
文字对齐
利用文字对齐属性，你可以控制段落的水平对齐：
H4 { text-align: center }
这项属性只用于整块的内容，如<P>、 <H1>-<H6>、<BLOCKQUOTE>和 <UL>。
以下为各种选项：
left 指将要素左对齐，
指将要素左对齐，如本段所示。
如本段所示。
right 指将要素右对齐，
指将要素右对齐，如本段所
示。
center 指将要素居中，
指将要素居中，如本段所示。
如本段所示。
justify 指将要素左右对齐，如本段所示。 justify 属性可用于
两种操作平台)及
两种操作平台及 IE 4 (Windows 版), 但不能用于
Communicator(两种操作平台
MAC 机的 IE 3 或 IE 4。
。
截止现在，我们所谈到的只是将 CSS 用于文字，但 CSS 的属性页可以用于其它

替代要素（替代要素指用其它内容代替了的要素，图象是最常用的替代内容，还
有 Java applets,QuickTime movies 和其它内容。）
所以我们可以将图象右对齐，如下所示：
（如果你将样式表属性直接加到<IMG>之上，Communicator 有时候可能会捣乱。
为了安抚它的这种驴脾气，你可以将<IMG>包含在<SPAN>或<DIV>之内，然后将样
式表加到<SPAN>或<DIV>上，最好是加在<DIV>上，因为 IE 4 有时候对于联结到
<SPAN>上的样式会闹一点小性子。
垂直对齐
目前浏览器根本还不能支持初衷对齐属性，但愿 5.0 版的浏览器能够做到这一

点。
H4 { vertical-align: top }
垂直对齐可以使你控制文字或替代要素（比如图象）相对于其母体要素的的垂直
位置。例如，如果你将一个 2x2 象素的 GIF 图象同其母体要素文字的顶部垂直对
齐，则该 GIF 图象将在该行文字的顶部显示。
以下为各项参数：
• top 将要素顶部同最高的母体要素对齐。
• bottom 将要素的底部同最低的母体要素对齐。
• text-top 将要素的顶部同母体要素文字的顶部对齐。
• text-bottom 将要素的底部同母体要素文字的底部对齐。
• baseline 将要素的基准线同母体要素的基准线对齐。
• middle 将要素的中点同母体要素的中点对齐。
• sub 将要素以下标的形式显示。
• super 将要素以上标的形式显示。
目前只有 IE 4 能支持这项属性，它支持最后的两项参数。
文字缩行
你想使段落缩行吗？（在 Internet 上呆一段时间之后，你可能已经忘了缩行是

怎么一回事！）
P { text-indent: 2em }
在本段中你就可以看到缩行的应用。该属性只应用于整块的内容。你
可以使用任何一种熟悉的长度单位设定缩行。
你还可以使用比例参数。
例如，本段的缩行为 40％的比例，即本段的第 1 行的起始位置比其正常
位置缩进了 40％。
(Windows 版的 IE 4 假定比例指相对于整个浏览器窗口。而不是指段落的
宽度）如果你将文字缩行赋予一个负值，则文字第 1 行的起始位置比其正
常位置还偏左。
本段的文字缩行赋值为－10 象素。IE 4 对这项属性不太适应，它有可能

不显示最初的几个字母。
充分运用你的缩行威力吧，年轻的杰地战士！
3.5 边距及空格填充
我们都知道可以用 HTML 设定边距，但你必须使用表格，别无它法。而样式表

则......
快速定义边距
首先，我们应该了解样式表语言的术语，便我们理解正在谈什么。每一个整块的
素或替代要素都包含在样式表生成器称为 box 的容器之内。box
box 包括：
• 要素本身
• 围绕要素的空格填充（padding）
• 围绕空格填充的边框（border）
• 围绕边框的边距（空白－margin）
你可以分别控制空格填充、边框和边距，如我们即将做的。
顶边距、
顶边距、底边距、
底边距、左边距和右边距
这 4 项属性可以使你控制一个要素的四周的边距。如下：
H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px;

margin-right: 55px }
你可以看到，每一个边距都可以有不同的置。或者你可以设置一个边距，然后让
览器用缺省设置设定其它的几个边距。可以将边距应用于文字和替代要素（如
象）。
设定边距参数值最明显的方法是利用长度位：px(象素）、pt（点数）等。你也
可以用比例值设定边距。
以下是几个例子：
• 顶边距
• 底边距
• 左边距和右边距
将边距值设为负值，你就可以将两个要素叠在一起，例：
Books
are mind food
上例中， "are mind food" 的底边距为－55 象素，右边距为 60 象素。
使用负值使要素重叠的的缺陷是不同的浏器对其处理方式不同。比如，在显示上
例子时，不同的 4 种主要浏览器（Communicator for PC, Communicator for Mac,
IE for PC, IE for Mac）对文字重叠的程度不同。
另一个缺陷是你不能完全控制位于底部的内容，而且不同的浏览器对其显示也不
同。例如， Communicator 总是将图象显示在文字的上部。 IE 似乎是将个要素
按照其载入浏览器窗口的顺序显示各要素。
换句话说，如果你打算将几个要素叠放在一起，就不要对边距使用负值。今天的
教程将教你如何叠放个要素。
浏览器对该属性的支持方面还应注意以下几点：
• 当你在 IE 3 中使用标尺单位(如英寸和厘米）时，IE 3 有时会加大底边

距。同样，有些 HTML 标签可以适用
底边距，有些则不能，
• IE 4 有时在对替代要素（如图象）设定左边距时会出现问题，你可以将
图象包在一个<DIV>中，然后给<DIV>设定样式。
顶空格填充，
顶空格填充，底空格填充，
底空格填充，左空格填充和
右空格填充
空格填充的作用类似于边距控制，你可以设定一个要素的前后左右的空格填充的
尺寸。
H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px;

padding-right: 55px }
你可以使用任何一种长度单位或比例值设定空格填充。其使用方法同边距的属
性。
但是空格填充不能使用负值（而且，IE 3 不支持空格填充属性）。
下面我们将探讨位于边距和空格填充之间的边框。
3.6 边框
有几种样式表属性可以将网页要素周围加上边框。
（注意：IE 3 和 IE 4 不支持任何边框属性。）
顶边框宽度，
顶边框宽度，底边框宽度，
底边框宽度，左边框宽度和右边框宽度
你可以控制整个边框的宽度，也可以分别控制每一边的边框宽度：
H4 { border-top-width: 2px; border-bottom-width: 5px;

border-left-width: 1px; border-right-width: 1px }
以下是上述 CSS 规则的显示结果：
你还可以给替代要素加上边框，
你还可以给替代要素加上边框，很好玩，
很好玩，是吧？
是吧？
你无须给一个要素的每一边都加上边框。
你可以使用上述任何一种长度单位设定边框宽度，也可以使用内置关键字设定宽
度：
本段文字的顶边框宽度参数值为 thin。
本段文字的顶边框宽度参数值为 medium。
本段文字的顶边框宽度参数值为 thick。
如果你想使边框四面应用相同的宽度，很简单，使用 border-width 标签就可一

次完成，例：
IMG { border-width: 1in }
边框颜色
例：
P { border-color: green; border-width: 3px }
本段文字显示上述代码的执行效果。
你可以使用浏览器认可的颜色或者直接使用 RGB 参数值，例：
H4 { border-color: #FF0033; border-width: thick }
如果你想使边框的四边显示不同的颜色，你可以在设置中分别列出各种颜色：
P { border-color: #666699 #FF0033 #000000 #FFFF99; border-width:

3px }
浏览器将第 1 种颜色理解为顶边框的颜色参数值，第 2 种颜色为右边框，然后是

底边框，然后是左边框。
本段文字显示上述代码的执行效果。
注意： Communicator 不能识别多色彩，在 Communicator 中，你只能使用一种
颜色。（如果你使用多色彩，Communicator 很有可能用蓝色显示整个边框。我
们也对此感到莫名其妙）
如果不使用边框颜色属性，则边框将以要素自身的颜色显示边框颜色。
边框样式
你还可以设定边框线的样式，例：
P { border-style: double; border-width: 3px }
可以使用的关键字参数值如下：
• solid
• double
• dotted
• dashed
• groove
• ridge
• inset
• outset
注意：Communiactor 只支持其中的几种关键字属性。
3.7 浮动要素
我们在网页中经常看到浮动的图象和表格，只需对一个<IMG>标签使用
ALIGN=left 属性，文字就会绕到浮动图象的右边继续显示。样式表对于浮动要
素有一个更为灵活的语法，也就是本篇中将要谈到的主题。
（IE3 和 IE 4 不支持本页中谈到的任何功能。如果你使用 IE 4，你将会看到一

些奇怪的格式。）
浮动
浮动属性使你能将一个要素周围用文字包裹，不仅仅是包裹图象，而且能包裹整
块的文字。
H4 { float: left }
本标题文字为向左浮动。
本标题文字为向左浮动。
你可以看到这项 CSS 规则应用于<H4>的文字。而本段内容则包裹在标题文字的右

下边，就象是用文字包裹图象时的效果那样。你也可以使用向右浮动的参数值。
如果浮动要素周围的边距太小，你可以使用之前学过的空格填充属性给它加大四
周的空间（但似乎使用边距会造成问题）。
清除
如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用 clear
属性，很象 HTML 的 CLEAR 属性的用法（例： CLEAR=right）。
P { clear: left }
第 1、2 段文字包裹了向左浮动的第 1 幅图象。
而使用了清除（clear）属性后，第 4、5 段文字中只有第 4 段包裹了图象，而第

5 段文字没有包裹。
3.9 复习
今天是个好天气。我们扩展了串接样式表等方面的学习，将文字和图象都置于我
们的自由控制之下。它使我们可以做到普通的 HTML 标签不能做到的事情。
以下是我们今天学习内容的总结：
• 字间距设定字与字之间的距离。
• 字母间距设定每个字母之间的距离。
• 行高设定每行文字之间的垂直距离。
• 文字对齐用于设定段落的左、右对齐、居中和左右两边对齐。
• 垂直对齐用于垂直对齐文字。
• 文字缩行可以使段落缩行。
• 各种边距属性设定围绕文字块、图等的边距。
• 空格填充属性用于设定空格填充的性。
• 边框属性用于设定边框的宽度、颜和样式。
• 浮动和清除用于控制各要素之间的包裹。
明天我们将继续探索串接样式表的神奇魅力。
4.1 第 4 天
欢迎进入第 4 天的课程。在此之前我们主要谈了文字样式设定，现在我们探讨一
下要素和图象方面的样式设置。通过学习今天的课程，我们将掌握如何给要素赋
予色彩，将图象放在要素后面。如果以前你一直不认为 CSS 是一种很有用的东西，
那么今天将是你大彻大悟的一天。
我们将学习以下 CSS 属性：
• 颜色
• 背景色
• 背景图象
• 重复背景
• 固定背景
• 背景定位
• 背景
现在我们回答第 3 天留下的小问题。
4.2 为你的世界添加色彩
首先，我们谈一下将颜色加到网页要素上。
颜色
颜色属性并不陌生，它的用法很象 HTML 中使用的参数值。
B { color: #333399 }
根据这项 CSS 规则，浏览器将网页上所有的加重体字以设定的颜色显示，象这几

个字那样。
有 3 种方法用于设定你所需要的颜色：
• 颜色名称
CSS 所用的颜色名称同我们常用的称呼方式。16 种基本色为 aqua, black,

blue, fuchsia, gray, green, lime,maroon, navy, olive, purple, red,
silver, teal, white, and yellow.
但是 Netscape 和 Microsoft 的浏览器还认可数百种其它色彩名称，参见

HYPE's Color Specifier.
• 16 进制（
进制（hex）
hex）色彩控制
使用 16 进制数可实现对色彩的更精确的控制，其格式为 #336699。16 进
制（hex）色彩控制详见 Webreference.com。
CSS 还支持某些 hex 值的快捷计数法。比如， #336699 可以被称为 #369。

浏览器会将其按照 16 进制格式阐释。
• RGB 值
对于习惯于 RGB 计数法的用户，这里将提供一种全新的色彩设定方法。RGB

法通常用于图象应用软件例如
Photoshop。利用 RGB 设定色彩的方法如下：
B { color: rgb(51,204,0) }
RGB 的数值范围从 0 到 255，R 代表红色，G 代表绿色，B 代表蓝色。
IE 3 不支持 RGB 格式，但是 4.0 版本的浏览器都支持。

4.3 背景颜色
在传统的网页设计中，为了在某一要素后面加上背景色，你必须先在要素周围生
成表格单元，然后在表格单元中添加颜色。利用 CSS 添加背景色则相当容易。
背景色
利用 CSS 在网页要素后面加入固定的背景色及图象。
P.yellow { background-color: #FFFF66 }
The above rule has been applied to this entire paragraph. You can use any
of the values we talked about on the previous page: color names, hex
numbers, or RGB values.
你甚至可以将要素只加到某一个单词后面。
在 IE 3 Netscape Communicator 中, 第一段文字后的背景色延伸的长度不同.

在 IE 4 中颜色会延伸更多一些，在整个段落后面形成一个较大的方块背景。
(注意：IE 3 根本不支持背景色属性。但是它支持背景设置，这种快捷属性也能
达到同样的效果。详见第 6 页。）
你还可以给背景色设定透明属性，也就是说，论背景色原来是什么颜色，都会以
透明色显。
背景色的确是太棒了，而如果能给背景加上图，不就更棒了吗？你的梦想可以实
现！
4.4 背景图象
你可以很轻松地将 GIF 或 JPEG 图象加到一个要素后面：
B { background-image: url(background.gif) }该规则将背景图象加到

整个段落之后。你可以将 GIF 图象采用和背景图象通常的设置类似的方法
平铺到文字后面。
你还可以将背景图象只添加到两个单词后面。想把图象添加到整个浏览器窗口
吗？那么你可以将其添加到 <BODY>标签。
你可以使用 URL 调用一幅图象，你既可以使用相对 UPL，例如 images/bg.gif

或完整的 URL,例如
http://www.webmonkey.com/images/bg.gif.
none 参数值将取消对背景图象的任何设置.
当你设定一个背景图象时，最好能指定一种背景色。这样以来,下载背景图象的
同时,固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示
出来。例：
CSS makes Webmonkeys gleeful.
你可以看到背景色紫色在 GIF 图象的透明色区也显示出来。
我们最常用的浏览器中可能会出现以下各种景图象问题：
• 在本篇所讨论的各种背景属性中，IE 3 只支持快捷背景属性，详见第 6
页。
• 当使用链接的样式表时，IE 3 根本不显示背景图象。
• 当你仅对段落的某一部分添加背景图象，Communicator (在两种操作平台
上) 和 IE 4 (Mac 操作平台上) 有时候可能会出问题，也许它根本不显示
图象，也许会在添加了背景图象的文字中加入行回车。
• 如果你同时设定了背景图象和背景色，有时候 Communicator 将背景色的
显示排在优先的地位。
4.5 控制背景图象
你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你
可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什
么位置。朋友，这是真的！
背景重复(background-repeat)
背景重复
背景图象通常是平铺在背景上的，对吗？错。利用这项 CSS 属性，你可以控制是

否将其平铺。
P { background-repeat: no-repeat; background-image: url(

background.gif) }
上述规则应用于整个段落。我们以前用过的 GIF 图象出现在文字后面，但由于我

们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后
面，它只显示一幅单独的图象。
如果你只想让图象垂直或者水平方向平铺，你以使用 repeat-x 将其水平平铺，

用 repaet-y 将其垂直平铺。而 repeat 参数值则将图象从水平和垂直两个方向平
铺。
固定背景（
固定背景（background－
background－attachment）
attachment）
在 HTML 中，背景图象通常会随页面的滚动而一起滚动。但利用 CSS 的固定背景

（background）属性，你可以建立不滚动的背景图象，页面滚动时，背景图象可
以保持固定。
BODY { background-attachment: fixed; background-image: url(

15/stuff3a/background.gif) }
这里是一个例子，你可以看到页面滚动时，背景仍保持固定。
（注意：Communicator
不支持这项属性，IE 可以。）
该属性只用于页面背景，即<BODY>标签内设定的背景图象。
其参数有两种选择：
• scroll 指背景图象随文字内容一起滚动，即通常所见的方式。
• fixed 指文字滚动时，背景图象保持固定。
背景定位(background
背景定位(background-
(background-position)
你可以设定将背景插在什么位置显示。
P { background-position: center bottom; background-image: url

(background.gif) }
当上述 CSS 规则应用于本段文字时，背景图象将在本段的中下部开始显示并向右

平铺。
如果你看不到上述的显示效果，则说明你所使用的浏览器是 Communicator，它
不支持背景定位。
设定位置的 3 种方法：
• 关键字参数（
关键字参数（Keyword values）
values
关键字设定方法简便易用：
top 将背景图象同前景要素的顶部对齐。
o
bottom 将其同前景要素的底部对齐。
o
o left 将其同左边对齐。
o right 将其同右边对齐。
o center 将其水平居中（如果使用在另一关键字前面）或垂直居中
（如果用在另一关键字后面）。
• 长度参数
长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水
平和垂直定位起点，例：
P { background-position: 70px 10px; background-repeat:

repeat-y; background-image: url
(background.gif) }
本段显示了上述规则的执行效果。IE 支持这种属性，将 GIF 图象设置在

从左上角起水平 70 象素，垂直 10 象素的位置。由于我设置了
background-repeat: repeat-y，GIF 图象将在文字后垂直平铺。
你可以使用我们以前学过的任何一种长度单位，例如 pixels, points,

inches, ems 等。
（IE 3 不支持长度单位显示这种效果）
• 比例值（
比例值（Percentage values）
values
你还可以使用比例值设定背景图象的位置，例：
P { background-position: 75% 50%; background-image: url

(background.gif) }
当这条 CSS 规则应用于本段时，背景图象从水平距离段落右端 70％，垂

直距离段落顶部 50％的位置显示。如果你重新调整浏览器窗口的尺寸，
使得段落的显示尺寸变化，背景图象的位置也相应发生变化。在本段上不
会发生这样的变化，因为本段的尺寸是固定的，不会随着窗口尺寸的调整
而变化。
4.6 快捷特性
利用快捷特性可以使你将学过的所有背景属性加到一个 CSS 规则中。
IE 3 中你必须这样应用（如我们以前提过的），你也有可能会在所有浏览器中
应用它。
背景（background）
background
利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。
例：
P { background: url(background.gif) #CCFFCC repeat-y top right }
本段应用了上述规则。你可以看到背景是浅绿色，背景图象只垂直平铺，第 1
次平铺的位置在右上角。注意 Communicator 不支持背景定位属性。
如果你看不到该段文字描述的效果，则说明你的浏览器不支持这项 CSS 属性。
使用背景属性时，你无须设定背景的每一项目内容。你可以只设定你所要的背景
图象和色彩，或者设定其它组合。
使用快捷特性时也会碰到使用单另的背景属性时遇到的各种浏览器问题。
4.8 复习
样式表使得网页设计更加有趣。我们新近掌握的控制背景图象的方法更另我们心
动不已。
以下是我们今天所学内容的总结：
• color 设定要素的前景颜色。
• background-color 设定要素后面固定的颜色。
• background-image 是将 GIF 和 JPEG 图象插入到文字和其它要素后面的方
法。
• background-repeat 可以控制是否将背景图象平铺。
• background-attachment 控制是否将背景图象固定在屏幕显示上，不随文
字的滚动而滚动。
• background-position 用于精确控制背景图象相对于要素的显示位置。
• background 是设定所有有关背景设置的属性的快捷方式。
明天将是样式表课程的最好一天，我们将学习将要素设置在页面的任何位置的方
法，及如何将各要素叠放在彼此之上。明天见！
5.1 第 5 日
在样式表最后一天的课程中，我们将学习样式表最精彩的部分：定位和叠放。
我们都知道,在网页上利用 HTML 定位文字和图象是一件“令人心痛”的事情。我

们必须使用表格标签和隐式 GIF 图象，即使这样也不能保证定位的精确，因为浏
览器和操作平台的不同会使显示的结果发生变化。
而 CSS 能使你看到希望的曙光。利用今天我们即将学到的 CSS 属性，你可以精确

地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你
自己慢慢看吧！
以下是今天将学习的各种属性：
• 定位
• 左边
• 顶部
• 宽度
• 高度
• 可视性
• z-index
注意：由于 CSS 定位开发得比其它 CSS 属性晚，所以 IE3 不支持 CSS 定位属性。

定位属性只能用于 4.0 版的浏览器。
下面我们回答第 4 天留下的小问题。
5.2 绝对定位
定位（
定位（左边和顶部）
左边和顶部）
定位属性将是网虫们打开幸福之门的钥匙：
H4 { position: absolute; left: 100px; top: 43px }
这项 CSS 规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边 100 象素，

距离其顶部 43 象素的位置，请观看代码的执行效果。
注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入
浏览窗口。
左边和顶部属性很直观，左边（left)设定要素距浏览器窗口左边的距离，顶部
(top)设定距离浏览器窗口顶部的距离。
设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比
例值的是相对于母体要素的尺寸。
你可以定位什么呢？任何东西！段落、单词、GIF 和 JPEG 图象、QUICKTIME 电影

等等。范例。
5.3 相对定位
绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定
位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
请点击查看代码的执行效果
相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。
如果你停止使用相对定位，则文字的显示位置将恢复正常。范例。
使用相对定位时要小心，否则容易将页面弄得非常乱。
除了相对定位和绝对定位，你还可以使用 static（静止）参数值。它的使用方
法同普通 HTML 中的定位方法，不能附加特殊的定位设置。
还不错吧？下面我们将学习如何控制定位了的要素。
5.4 控制定位了的要素
除了控制定位要素的左上角位置，你还可以控制要素的宽度和高度，及要素在页
面的可视性。
宽度
定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设
定字符向右流动的限制，即设定要素的宽度。
DIV { position: absolute; left:

200px; top: 40px; width: 150px }
浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水
平尺寸限制在 150 象素。见范例。
宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，
或使用比例值设定宽度，比例值指相对于母体要素的比例。
IE 4 中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。
高度
理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }

这里我用了“理论上讲”，因为常用的几种浏览器都不支持高度属性。（你最多
只能在 IE 4 中用高度设置拉长图象。）
可视性
利用 CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未
定位的要素都适用。
H4 { visibility: hidden }
我很想给你看一个例子，但是，因为要将它设为看不见，那我这个例子让你看什
么呢？
选项：
• visible 使要素可以被看见
• hidden 使要素被隐藏
• inherit 指它将继承母体要素的可视性设置。
当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将
文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白
区域。
这条属性在编写语言和使用动态 HTML 时很有用，比如你可以使某段落或图象只

在鼠标滑过时才显示。
Communicator 不支持可视性属性。只有 IE 4 的用户可以享受其美妙之处！

5.5 叠放文字和图象
下面我将要谈到我一直吹嘘的在页面上重叠要素的方法。它不是通过设定边距负
值或采用更小的行高来实现，而是通过......
z-index
当你定位多个要素并将其重叠时，你可以使用 z-index 来设定哪一个要素应出现

在最上层。
H2 { position: relative; left: 10px; top: 0px; z-index: 10 }

H1 { position: relative; left: 33px; top: -35px; z-index: 1 }
观察这条 CSS 规则的执行效果（我将<H2>的文字设为绿色，以便你观察其不同之

处）：
Stylesheets
Mania
由于<H2>文字的 z-index 参数值更高，所以它显示在 <H1>文字的上面。（IE 4

在 MAC 机上执行这一项时会出问题，它会将<H1>放在最上面。
该参数值使用纯整数。z-index 用于绝对定位或相对定位了的要素。
你也可以给图象设定 z-index。（对于 Communicator，最好将 <IMG>标签包在

<SPAN>或 <DIV>标签内，然后将 z-index 应用到<SPAN>或 <DIV>。）范例。
5.7 放眼未来
World Wide Web 组织自规定了样式表标准之后并未止步不前。甚至在主要的几

种浏览器尚未完全支持 CSS 功能时，CSS2 已经在酝酿之中。CSS2 的标准已经制
定。而接下来的问题只是：5.0 版本的浏览器是否会支持 CSS2。
以下简要介绍 CSS 的新增功能：
对 CSS1 的调整
CSS 属性中又加了几项，比如 icon 将意味着文字内容的尺寸应符合计算机正在

使用的 icon 文字的尺寸。定义选择器（selector）和情景选择器（contextual
selector）的方法也将更加灵活。
新增的“
新增的“绝技”
绝技”
新的文字阴影属性将会受到大家的欢迎。
想使鼠标滑过某一链接时鼠标显示的手形有所改变吗？你可以使用光标属性设
定鼠标显示的不同形状。
记得我们怎样用 A:active 来设定用户点击链接文字时的属性吗？:hover 将使

我们能够实现当鼠标移到文字上面时就改变文字显示。很酷吧！
这些只是未来 CSS 的几种小把戏。
控制表格
我们设计网页布局时总是要用到表格，学习完本课程之后，我们还可以用 CSS
来设计网页布局。如果利用 CSS 能更好地控制表格，那该有多好。是的，它能够
做到。
此外，你还能够控制文件打印时的分页，你还可以制定某些打印指令。
你还有可能实现通过声控系统进入你的网页。诸如 voice-family 和 speech-rate

等属性将设定如何将你的网页内容用声音自动朗读出来。
5.9 复习
祝贺你学完了本次课程！
今天我们学习了定位和叠放，总结如下：
• 定位（position）是最令人中意的 CSS 属性，你可以利用它精确地控制某

要素在页面的位置。
• 左边（left）用于设定要素的水平位置。
• 顶部（top）用于设定要素的垂直位置。
• 宽度（width）使你能控制要素的显示宽度。
• 高度（height）用于设定要素的高度。
• 可视性（visibility）用于设定显示还是隐藏某要素。
• z-index 使你能设定重叠的要素中那个要素显示在最上面。
希望本次课程对你有所帮助。还有很多 CSS 的功能我们还没有涉及。还有一些小

的浏览器问题我们也没有一一列出。所以你自己还必须继续深入学习。
互联网上的 CSS 资源
• The Official Home of CSS - World Wide Web 组织有关 CSS 的新闻和
动向，包括正式制定的 CSS1 和 CSS2 标准（CSS2 目前还只是一个待批
准的建议）
• Webmonkey's Stylesheets Collection - 网猴的 CSS 内容集锦。
• Web Review Style Sheets Reference Guide - CSS 在不同浏览器上的适
用规格最新指南。
• CSSCheck - 检查你的 CSS 代码的语法。
• CSS Pointers - 有关 CSS 相当完整的资源链接清单。
• comp.infosystems.www.authoring.stylesheets - Usenet 新闻组，共享
和探讨 CSS 的问题及解决方案。
感谢你学完了本课程。你现在已经掌握了样式表的威力。你可以利用 CSS 在互联

网尽情发挥自己的创意，体现你的才华！

CSS 5 Day

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS 5 Day

Uploaded by

Copyright:

Available Formats

1.

任何使用过 HTML 一个多星期的人都知道 HTML 是一种非常好的网页制作工具。所以有时候我们不得不制作

除了还不能全面支持我们常用的大多数浏器之外，CSS 在实现其它承诺方面作得相当出色。CSS 在改变我们

但是网页设计者要求的更多。所以当 Netscape 推出新的可以控制网页外观的 HTML 标签时，网页设计者无

<FONT SIZE>能使我们调整字号，表格标签帮助我们生成边距，这都没错。但是，我们对 HTML 总体上的控

但是现在，样式表使这一切都成为可能。而即将推出的新的 CSS 功能更令人兴奋。以后 4 天内，你将会明

还有更好的消息：样式表只是简单的文本，就象 HTML 那样。它不需要图象，不需要执行程序，不需要插件，

有了 CSS 之后，以前必须求助于 GIF 的事情现在通过 CSS 就可以实现。还有，正如我先前提到的，使用串

那么，现在我们就开始制作一份样式表。 zzz1.3 你的第 1 张样式表

打开你最喜欢的 HTML 编辑器生成基本的网页：

Stylesheets: The Tool of the Web

如果你的浏览器不支持 CSS，请点击这里观看 CSS 的效果。

（如果“amaze your friends!”一行的背景不是黄色，则说明你需要升级你的浏览器，否则你将无法学完

每一条规则包含一个选择及说明。在上述例子中，H1 就是选择，它是一个附带样式功能的 HTML 标签。说

从我们的第 1 个样式表实例中可以发现，你可以归类样式表的规则。我们将 3 种不同的说明都用于<P>。

这项规则设定所以位于<H1>、<P>和<BLACKQUOTE>的标签将用 Arial 字体显示。

<B>All my Web pages will use cascading stylesheets within <I>four</I>

• 将样式表植入 HTML 文件中。

这就是我们在上一页中用的方法，所有的样式表信息都列于 HTML 文件的顶部，同<BODY>分列，例：

植入样式表规则后，浏览器在整个 HTML 页面中都执行该规则。如果你想对网页一次性加入样式表，就可采

你可能注意到代码中有两处很奇怪： TYPE="text/css"属性和注释标签。 TYPE="text/css" 设定采用 MIME

注释标签()更为重要。有些老的浏览器（如 MAC 机用的 IE 2.0）即使在设定了 TYPE="text/css"

这里是样式表功能发挥得淋漓尽致的地方。你可以将多个 HTML 文件都链接到一个中心样式表文件。这个外

现在生成一个单另的文本文件，起名 mystyles.css (或者其任何你喜欢的名字)。文件内容如下：

H1 { color: green; font-family: impact }

如同发布 HTML 文件那样，将这个 CSS 文件布到你的服务器中。在浏览器中观看网时，你会发现浏览器将依

而其中输入的 company.css 文件内容如下：

H1 { color: green; font-family: times }

在本例中，浏览器首先输入 company.css 的规则 ( @import 必须打头), 然后加入移植的规则从而为这个

Stylesheets: The Tool of the Web Design

Amaze your friends! Squash your enemies!

如果你的浏览器不支持 CSS 请点击这里观看显示效果。

但是目前只有 IE 4.0 支持输入法。

在这个例子中，你无须在 HTML 顶部加入样表代码。加入行内的样式表属性将使浏器同样执行样式表规则。

我先前已经讲过所有的 HTML 标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要

P.first { color: green }

<P CLASS=first>The first paragraph,

你还可以生成不加任何 HTML 标签的分类：

.first { color: green }

这种方式更加灵活，因为现在我们可以将 CLASS=first 用于任何 HTML 标签，并应用到网页<BODY>中，而设

P.first { color: green } /* green

屏幕就是一个战场，在一个 HTML 文件中，如果有 3 种不同的样式表规则都使用 P 作为其选择。输入的样式

1. Inline styles （行内样式）

BODY { color: green }

3. 按照样式表规则在 HTML 中的显示顺序执行。

注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定 Netscape Communicator 和

最后一个问题：如果样式表规则同 HTML 标签冲突时，如何处理？我们看一下这个例子：

<P>I think <I><FONT FACE="Times">

该例中样式表规则要求浏览器使用 Impact，但是传统的 HTML<FONT FACE>标签要求用 Times 字体，一个很

但是最主要的几种浏览器 Netscape 和 IE 4.0 都规定应优先执行 HTML。唉.......

Internet Explorer 3.0 是第一个试图支持样式表的浏览器，它的尝试是很有勇

你可能以为等 Netscape Communicator 和 IE 4.0 问世的时候将会更坚定地支持

今天要学习的 CSS 特点包括：

• Windows 的用户：使用应用软件比如 word 中的字体菜单中所列出的确切的字体名

字模系列就是 CSS 中称呼一种字体的名称属

这里是 Web 浏览器阐释样式表的规则：首先在列表中寻找字体的名称

CSS font control is peachy.

如果你的浏览器不支持 CSS 属性，请点击这里查看其显示效果。

每次将一种 generic 字体作为最后的选项列在字体列表中是一种很好的做法。你

• serif (也可能是 Times)

（注意：Netsacpe Communicator 不支持 Cursive 或者 fantasy）

• 如果一种字体的名称不只一个单词，如 Gill Sans，在你的 CSS 代码中用引号包含该

BODY { font-family: "gill sans", "new baskerville", serif }