五日精通css.doc

1.1 第 1 日用 HTML 制作网页就象是用画笔绘制一幅图画。只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果，这并不是正确的工具和灵活性就可以实现的。任何使用过 HTML 一个多星期的人都知道 HTML 是一种非常好的网页制作工具。所以有时候我们不得不制作 体积相当大的 GIF 图象以获得想要的字体和布局。同样，有时候也不得不使用各种表格标签和隐藏的空格 GIF 图象以使页面的布局能达到预想的目的。的确有些荒唐。我们的编码实在是太复杂了，GIF 用量越来越多，而我们的页面变得比英吉利海峡还要宽， 互联网有限的带宽怎么可能通过这么宽的信息呢？这种设计并不是网页设计的最佳形式。但是，1996 年底的时候悄悄诞生了一种叫做样式表（stylesheets）的技术。全称应该是串接样式表（Cascading Stylesheets简称 CSS）这位 HTML 的表弟向世人保证： 将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不定的网页的外观和格式。 在所有浏览器和平台之间的兼容性。 更少的编码、更少的页数和更快的下载速度。除了还不能全面支持我们常用的大多数浏器之外，CSS 在实现其它承诺方面作得相当出色。CSS 在改变我们 制作样式表的方法。它为大部分的网页创新奠定了基石。之后的 5 天，我们将漫游样式表的世界。你将学到样式表的基本知识并将其应用于你的网页中。你还将学 到如何处理字体、图文、色彩、背景及定位等的详细技巧。今天，我们先浏览一下样式表的基本内容。第 1 个问题；样式表能为我们做什么？1.2 样式表能为我们做什么？那么样式表有什么特别之处呢?简而言之,它能帮你做以下事情:你可以将格式和结构分离。 你可以以前所未有的能力控制页面布局。 你可以制作体积更小下载更快的网页。 你可以将许多网页同时更新，比以前快更容易。 浏览器将成为你更友好的界面你可以将格式和结构分离。HTML 从来没打算控制网页的格式或外观。这种语言定义了网页的结构和个要素的功能，而让浏览器自己决 定应该让各要素以何种模样显示。但是网页设计者要求的更多。所以当 Netscape 推出新的可以控制网页外观的 HTML 标签时，网页设计者无 不欢呼雀跃。我们可以用、包在外边控制文章主体的外观等等。然后我们将所有东西都 放入表格，用隐式 GIF 空格产生一个 20 象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪，要 想将什么内容迅速加到网页中变得越来越难。串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML 仍可以保持简单明了的初衷。CSS 代码独立出来从另一角度控制页面外观。你可以以前所未有的能力控制页面的布局。能使我们调整字号，表格标签帮助我们生成边距，这都没错。但是，我们对 HTML 总体上的控 制却很有限。我们不可能精确地生成 80 象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确 定位图象的位置。但是现在，样式表使这一切都成为可能。而即将推出的新的 CSS 功能更令人兴奋。以后 4 天内，你将会明 白我所说的意味着什么。你可以制作出体积更小下载更快的网页还有更好的消息：样式表只是简单的文本，就象 HTML 那样。它不需要图象，不需要执行程序，不需要插件， 不需要流式。它就象 HTML 指令那样快。有了 CSS 之后，以前必须求助于 GIF 的事情现在通过 CSS 就可以实现。还有，正如我先前提到的，使用串 接样式表可以减少表格标签及其它加大 HTML 体积的代码，减少图象用量从而减少文件尺寸。你可以更快更容易地维护及更新大量的网页。没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页。即便站 点用数据库提供服务，我仍然需要更新所有的模板，而且更新每一模板中每一个实例实例的。样式表的主旨就是将格式和结构分离。利于样式表，我可以将站点上所有的网页都指向单一的一个 CSS 文 件，我只要修改 CSS 文件中某一行，那么整个站点都会随之发生变动。浏览器将成为你更友好的界面。 不象其它的的网络技术，样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。 怎么样，样式表的确是一个很不错的注意吧？ 那么，现在我们就开始制作一份样式表。 zzz1.3 你的第 1 张样式表 现在我们就开始制作样式表。打开你最喜欢的 HTML 编辑器生成基本的网页：My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!很好。现在，让我们给它加一些样式表。只需在最初的和 标签之间插入以下代码：从浏览器中打开页面，你将会看到： Stylesheets: The Tool of the WebDesign GodsAmaze your friends! Squash your enemies!如果你的浏览器不支持 CSS，请点击这里观看 CSS 的效果。做得很好！你已经制作出了你的第 1 份样式表支持的网页。（如果“amaze your friends!”一行的背景不是黄色，则说明你需要升级你的浏览器，否则你将无法学完 整个教程。建议你安装 Netscape Communicator 或者 Internet Explorer 4）一些术语 让我们学习一下这些新的编码： 串接样式表的核心是规则。最简单的规则就象这样：H1 color: green 整个规则告诉浏览器将所有包围的文字以绿色显示。 每一条规则包含一个选择及说明。在上述例子中，H1 就是选择，它是一个附带样式功能的 HTML 标签。说明用于定义实际的样式，包括两部分：属性（本例中即 color）和参数（green）。任何 HTML 标签都可用作标签。所以你可以将样式表的信息附加到任何要素。从通常的到及内容。你甚至可以通过将样式表用于将串接样式表的属性用于图象。从我们的第 1 个样式表实例中可以发现，你可以归类样式表的规则。我们将 3 种不同的说明都用于。 与之类似，你也可以归类选择：H1, P, BLOCKQUOTE font-family: arial 这项规则设定所以位于、和的标签将用 Arial 字体显示。 继承性样式表的规则可从母体延续到子体。下面是一个例子： B color: blue 这项规则告诉浏览器将所有之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？All my Web pages will use cascading stylesheets within fourweeks.对于标签并没有设定样式，但因为位于之中，所以它将继承母体设定的样式，也以蓝色显示。All my Web pages will use cascading stylesheets within four weeks.现在我们已经明白了串接样式表的规则如何运作，还看到将样式表加入网页的一种方法但还有其它方法， 让我们继续学习。 zzz1.4 将样式加到你的网页中我们已经学了将样式表加到网页的一种方法。实际上你可以使用 4 种方法。每种方法都有其不同的优点： 将样式表植入 HTML 文件中。将一个外部样式表链接到 HTML 文件上。将一个外部样式表输入到 HTML 文件中。 将样式表加入到 HTML 文件行中。植入样式表：这就是我们在上一页中用的方法，所有的样式表信息都列于 HTML 文件的顶部，同分列，例：My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!植入样式表规则后，浏览器在整个 HTML 页面中都执行该规则。如果你想对网页一次性加入样式表，就可采 用该方法。你可能注意到代码中有两处很奇怪： TYPE=text/css属性和注释标签。 TYPE=text/css 设定采用 MIME 类型，这样以来，不支持 CSS 的浏览器可以忽略样式表。注释标签()更为重要。有些老的浏览器（如 MAC 机用的 IE 2.0）即使在设定了 TYPE=text/css 属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。链接到样式表上这里是样式表功能发挥得淋漓尽致的地方。你可以将多个 HTML 文件都链接到一个中心样式表文件。这个外 部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的额某一细节，所有页面都会随之改 变。如果你维护的站点很大，则这项功能绝对会有其用武之地。它的使用方法：产生一个普通的网页，但使用规则，而是在内使用标签：My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies! (使用链接的样式表时，你无须使用注释标签。)现在生成一个单另的文本文件，起名 mystyles.css (或者其任何你喜欢的名字)。文件内容如下：H1 color: green; font-family: impact P background: yellow; font-family: courier 如同发布 HTML 文件那样，将这个 CSS 文件布到你的服务器中。在浏览器中观看网时，你会发现浏览器将依 照链接标签将有链接了的 HTML 网页按照样式表的规则示，在 HREF 属性中你可以选择使用绝对相对 URL。输入样式表 输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用，但输入法则可以。例：My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!而其中输入的 company.css 文件内容如下：H1 color: green; font-family: times P background: yellow; font-family: courier 在本例中，浏览器首先输入 company.css 的规则 ( import 必须打头), 然后加入移植的规则从而为这个 网页产生规则集合。请注意，对于 H1 在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行 哪一项规则呢？植入的规则此时将占上风。所以文字显示效果如下：Stylesheets: The Tool of the Web DesignGodsAmaze your friends! Squash your enemies!如果你的浏览器不支持 CSS 请点击这里观看显示效果。输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的 样式表之上。但是目前只有 IE 4.0 支持输入法。 在行内加入样式最后，你还可以在 HTML 行中加入样式规则，如下：My First StylesheetStylesheets: The Tool of the Web DesignGodsAmaze your friends! Squash your enemies!在这个例子中，你无须在 HTML 顶部加入样表代码。加入行内的样式表属性将使浏器同样执行样式表规则。 该方法不方便之处在于：你必须在每行指中都中加入样式规则，否则下一行时浏器将转回到文件的缺省设置。 加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。 记住，你可以同时使用几种方法，其实，样式表的能力就在于综合你加入网页的各种样式。1.5 分类及其它技巧我们已经学习了所有的样式表基本语法。下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.分类我先前已经讲过所有的 HTML 标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要 复杂该如何处理呢？比如,你想让主体文字的 1 段用绿色显示，第 2 段用紫色显示，而第 3 段用灰色显示， 你能做到吗？这种情况下分类将发挥作用。你可以将段落 P 分成 3 种不同的类别，每一类应用不同的样式表说明。这些 规则（不论是植入的还是外部样式表文件）将以以下方式显示：P.first color: green P.second color: purple P.third color: gray 你的 HTML 代码如下：The first paragraph, with a class name of first.The second paragraph, with a class name of second.The third paragraph, with a class name of third.你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的 .） 你还可以生成不加任何 HTML 标签的分类：.first color: green 这种方式更加灵活，因为现在我们可以将 CLASS=first 用于任何 HTML 标签，并应用到网页中，而设 定的文字将以绿色显示。情景选择： 如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。 P B color: red Emma Thompson, ActressDramatic actor, inspired comedienne. Is there nothing she cant do?样式表的规则告诉浏览器只将所有之内加重显示的文字以红色显示。所以，之外标题的加重文字不 会以红色显示，而之内的文字则是。注释 即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例：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 作为其选择。输入的样式表指示浏览器将文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用 黄色。那么可怜的浏览器该听谁的呢？ 好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序：1. Inline styles （行内样式）2. Embedded styles （植入样式）3. Linked styles （链接样式）4. Imported styles （输入样式）5. Default browser styles（缺省浏览器样式）浏览器将按照上述顺序执行样式表的指令。 但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将以绿色显示，而另一个规则要求以红色显示？多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺 序：1. 使用特别说明的样式表规则，例：BODY color: green P color: red 有一项规则特别说明 中的文字一红色显示，但它同时也继承了的绿色规定。但 是特别说明了的规则的重要性要大于继承的规则，所以之内的文字一红色显示。2. 应用继承的样式表规则如果不存在第 1 步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向 执行继承的规则。如果找不到继承的规则，则浏览器转向执行第 3 步。3. 按照样式表规则在 HTML 中的显示顺序执行。P color: green P color: red 当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，作为讲座一红 色显示，因为它是最后给出的规则。注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定 Netscape Communicator 和 Internet Explorer 都不支持，所以本文中不再细述。最后一个问题：如果样式表规则同 HTML 标签冲突时，如何处理？我们看一下这个例子： I font-family: impact I think East of Eden is Stein becks best novel.该例中样式表规则要求浏览器使用 Impact，但是传统的 HTML标签要求用 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 规则，使用单引号：Textgoes here.如果你将 CSS 规则的说明组合在一起，而其中又包含字模系列，将字模系列列在最 后，例：H2 color: red; margin:10px; font-family: times,serif 有时候，如果字模系列没有列在最后一条，IE 3 会忽略整个一条 CSS 规 则，很莫名其妙，但却是真的。利用字模系列属性，你可以按照字体名称调用字体，而且在使用标 签时将拥有更大的灵活性。2.3 对字号的控制利用 HTML 你只能设定 7 种字号，很令人沮丧，是吧？但等你看 完本页之后，你将会发出一声长长的 WOOOOOOOOOOOW！字号使用 font-size 属性，你可以对文字的尺寸进行无限的控制。 确定这的 3 种基本方法：Points, ems, pixels, 及其它单位 关键字比例参数Points, Ems, Pixels, 及其它单位 样式表可以识别许多种确定一种要素尺寸的不同单位： 第 1 种， points:P font-size: 16pt 这条代码告诉浏览器以 16 points（点）的尺寸显示。Points 是确定文字尺寸非常好的单位，因为它在所有的浏览器和操作平台上都 适用。你唯一需要留意的就是在缺省设置下，PC 机中显示的字要比 MAC 机中显 示的大一些。如果这一点对你来说很重要的话，你可以利用 javascript 识别不同人所使用的 操作平台，然后根据不同的平台链接相应的 CSS 文件。若想学习制作方法，请点 击 learnhow。Points, like all other units, work as small or asbig as you want (that was 8points and 80 points, respectively).以上语句采用 CSS font-size 属性制作。如果你的浏览器不支持这种属性，请点 击这里查看显示效果。下一个单位，EM:P font-size: 20pt B font-size: 1.5em em 是和 point 相同的距离单位。在样式表中，em 指母体要素的尺寸。所以，在 上例中，所有包含在中的的文字的尺寸将是 30points（因为中的找是 母体字号（20pt）的 1.5 倍。但是，浏览器对 em 不是很支持，所以你还是最好用 point 单位。 下一个单位，pixels:P font-size: 20px 从网页设计的角度来说，pixel（象素）是一个非常熟悉的单位，它最大的优点 就在于所有的操作平台都支持 pixel 单位（而对于其它的单位来说，PC 机的文 字总是显得比 MAC 机中大一些。而其不利之处在于，当你使用 pixels 单位时，网页的屏幕显示不稳定，字体时 大时小，甚至有时根本不显示，而 points 单位则没有这种问题。其它单位：如果上述单位仍然不符合你的要求，请试试这些单位：in （英寸） cm （厘米） mm （毫米）pc （打字机字型尺寸单位）ex （x-height）关键字 如果你不喜欢使用这些单位，你还可以选择以关键字说明文字尺寸，例：P font-size: large 有 7 种关键字，相对应于中所用的数字参数：xx-small x-smallsmall medium largex-large xx-large利用这些参数，Web 浏览器可以自由决定每一种关键字所适合的尺寸。例如：在 Netscape Communicator 中 x-large 的尺寸为 28points，而在 IE 4（windows及 MAC）中为 24points，而在 Win 95 下的 IE 3 中为 18points。还要两种相对尺寸关键字：smaller largersmaller 参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”，例如， 如果 large 字号的文字应用 smaller 参数，则其字号变成了 midium 尺寸。larger 参数的作用类似。（注意：IE 3 不支持 smaller 或 larger 参数。） 比例参数设定文字尺寸的第 3 种办法就是使用比例参数，例：P font-size: 15pt B font-size: 300% 这些规则的含义为：使所有包含在中的的文字的尺寸为尺寸设定值的3 倍，即 45 points。比例参数常用于从母体要素继承的参数值。浏览器对比例参数比较挑剔，所以你必须经常测试。 有了这么多的选择是不是很让人高兴呢？由于有了 font-size 属性，我们能够随意调整文字的尺寸，如同以下的例子所示：（每一个字母 i 都比前一个大 5pt）i i i i i i i i i i i i i i2.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-variant) 这时一种挺简单的属性，你可以将正常文字缩小一半尺寸后大写显示。H2 font-variant: small-caps 很不幸，Communicator 或者 Internet Explorer 目前都不支持这项属性。IE 4 有些靠近这种标准，但它只是将字体以正常的大写形式显示。希望 IE5.0 能支持这项属性。 文字变形（text-transform） 这项属性可以使你轻而易举地控制字母写。基本代码：B text-transform: uppercase 以下为所有可用的参数：uppercase 使所有字母大写显示， 例：This sentence serves as an example. lowercase 使所有字母小写显示，例：This sentence serves as an example.capitalize 使每个单词的第 1 个字母大写显示，例：This sentence serves as an example.none 使所有继承的文字变形参数被忽略，文字将以正常形式显示。例：This sentence serves as an example.（注意：IE 3 不支持文字变形）如果你的浏览器不支持上述显示效果，请点击这里查看显示效果。文字修饰（text-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:link 用于正常的未被访问过的链接， A:active 用于你正在点击的链接A:visited 用于已经访问过的链接。这些指令进入你的植入、链接、输入的样式表，但不会改变你的 HTML 链接代码: Link以下是显示结果：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 这条规则将文字设置为：尺寸 12points，行高度 16points，（我们将在明 天谈到该属性），字型采用 Courier。使用字体属性时，必须设定字号和字型，但可以选择是否设定行高度。设定的顺 序必须严格按照例子中的顺序。这只是我们探索 CSS 众多属性的开始。明天我们