5日精通css样式表.doc

5日精通css样式表第1日用HTML制作网页就象是用画笔绘制一幅图画。只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果，这并不是正确的工具和灵活性就可以实现的。 任何使用过HTML大一个多星期的人都知道HTML是一种非常好的网页制作工具。所以有时候我们不得不制作体积相当大的GIF 图象以获得想要的字体和布局。同样，有时候也不得不使用各种表格标签和隐藏的空格GIF图象以使页面的布局能达到预想 的目的。的确有些荒唐。我们的编码实在是太复杂了，GIF用量越来越多，而我们的页面变得比英吉利海峡还要宽，互联网有限的带宽怎么可能通过这么宽的信息呢？这种设计并不是网页设计的最佳形式。但是，1996年底的时候悄悄诞生了一种叫做样式表（stylesheets）的技术。全称应该是串接样式表（CascadingStylesheets简称CSS）这位HTML的表弟向世人保证：将对布局、字体、颜色、背景和其它文图 效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的 下载速度。除了还不能全面支持我们常用的大多数浏览器之外，CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。之后的5天，我们将漫游样式表的世界。你将学到样式表的基本知识并将其应用于你的网页中。你还将学到如何处理字体、图文、色彩、背景及定位等的详细技巧。今天，我们先浏览一下样式表的基本内容。第1个问题：样式表能为我们做什么？CSS样式表能为我们做什么? 那么css样式表有什么特别之处呢?简而言之, 它能帮你做以下事情：你可以将格式和结构分离。你可以以前所未有的能力控制页面布局。 你可以制作体积更小下载更快的网页。你可以将许多网页同时更新，比以前 更快更容易。浏览器将成为你更友好的界面。你可以将格式和结构分离。 HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和个要素的功能，而让浏览器自己决定应该让各要素以何种模样显示。 但是网页设计者要求的更多。所以当 Netscape推出新的可以控制网页外观的 HTML标签时，网页设计者无不欢呼雀跃。我们可以用、包在外 边控制文章主体的外观等等。然后我们将所有东西都放入表格，用隐式GIF空格产生一个20象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪，要想将什么内容迅速加到网页中变得越来越难。 串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从 另一角度控制页面外观。 你可以以前所未有的能力控制页面的布局。 能使我们调整字号，表格 标签帮助我们生成边距，这都没错。但是，我们对HTML总体上的控制却很有限。 我们不可能精确地生成80象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确定位图象的位置。 但是现在，样式表使这一切都成为可能。而即将推出的新的CSS功能更令人 兴奋。以后4天内，你将会明白我所说的意味着什么。 你可以制作出体积更小下载更快的网页还有更好的消息：样式表只是简单的文本，就象HTML那样。它不需要图象，不需要执行程序，不需要插件，不需要流式。它就象HTML指令那样快。 有了CSS之后，以前必须求助于GIF的事情现在通过CSS就可以实现。还有，正如我先前提到的，使用串接样式表可以减少表格标签及其它加大HTML体积的代码， 减少图象用量从而减少文件尺寸。 你可以更快更容易地维护及更新大量的网页。 没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页。即便站点用数据库提供服务，我仍然需要更新所有的模板， 而且更新每一模板中每一个实例实例的 。 样式表的主旨就是将格式和结构分离。 利于样式表，我可以将站点上所有的网页都指向单一的一个CSS文件，我只要修改CSS文件中某一行，那么整个站点 都会随之发生变动。 浏览器将成为你更友好的界面。 不象其它的的网络技术，样式表的代码 有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。 只要是可以识别串接样式表的浏览器就可以应用它。 怎么样，样式表的确是一个很不错的注意吧？ 那么，现在我们就开始制作一份样式表。你的第1张css样式表 现在我们就开始制作css样式表。 打开你最喜欢的HTML编辑器生成基本的网页： My First Stylesheet Stylesheets: The Tool of the Web Design Gods Amaze your friends! Squash your enemies! 很好。现在，让我们给它加一些样式表。 只需在最初的和 标签之间 插入以下代码： 从浏览器中打开页面，你将会看到：Stylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!一些术语 让我们学习一下这些新的编码： 串接样式表的核心是规则。最简单的规则 就象这样： 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 four weeks. 对于标签并没有设定样式，但因为 位于之中，所以它将继承母体设定 的样式，也以蓝色显示。 All my Web pages will use cascading stylesheets within four weeks.将css样式加到你的网页中 我们已经 学了将css样式表加到网页的一种方法。实际上你可以使用4种方法。每种方法都有其不同的优点： 将样式表植入HTML文件中。 将一个外部样式表链接到HTML文件上。 将一个外部样式表输入到HTML文件中。 将样式表加入到HTML文件行中。 植入样式表： 这就是我们在上一页中用的方法，所有的样式表信息都列于HTML文件的顶部， 同分列，例： My First Stylesheet Stylesheets: The Tool of the Web Design Gods Amaze your friends! Squash your enemies! 植入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你想对网页一次性加入样式表，就可材用该方法。 你可能注意到代码中有两处很奇怪： TYPE=text/css属性和注释标签。 TYPE=text/css 设定采用MIME类型，这 样以来，不支持CSS的浏览器可以忽略样式表。 注释标签()更为重要。有些老的浏览器（如MAC机用的IE 2.0）即使在设定了TYPE=text/css 属性时也不能 忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。 链接到样式表上 这里是样式表功能发挥得淋漓尽致的地方。你可以将多个HTML文件都链接到一个中心样式表文件。这个外部的样式表文件 将设定你所有网页的规则。如果你改变样式表文件中的额某一细节，所有页面都会 随之改变。如果你维护的站点很大，则这 项功能绝对会有其用武之地。 它的使用方法：产生一个普通的网页，但不使用规则，而是在内使 用标签： My First Stylesheet Stylesheets: The Tool of the Web Design Gods Amaze 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 Stylesheet Stylesheets: The Tool of the Web Design Gods Amaze 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 Design GodsAmaze your friends! Squash your enemies!输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。 但是目前只有IE 4.0支持输入法。 在行内加入样式最后，你还可以在HTML行中加入样式规则， 如下： My First Stylesheet Stylesheets: The Tool of the Web Design Gods Amaze your friends! Squash your enemies! 在这个例子中，你无须在HTML顶部加入样式表代码。加入行内的样式表属性将使浏览器同样执行样式表规则。 该方法不方便之处在于：你必须在每行指令中都中加入样式规则，否则下一行时浏览器将转回到文件的缺省设置。 加入行内的样式表相比不如植入、链接及 输入的样式表那样功能强大，但有时候你会发现它也很有用。 记住，你可以同时使用几种方法，其实，样式表的能力就在于综合你加入网页的各种样式。 css分类及其它技巧 我们已经学习了所有的css样式表基本语法。 下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式. 分类 我先前已经讲过所有的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, Actress Dramatic 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 */Css优先级屏幕就是一个战场，在一个HTML文件中， 如果有3种不同的css样式表规则都使用P作 为其选择。输入的样式表指示浏览器将 文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。 那么可怜的浏览器该听谁的呢？ 好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。 根据正式的规定，以下为样式表的串接顺序： Inline styles （行内样式） Embedded styles （植入样式） Linked styles （链接样式） Imported styles （输入样式） 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。唉. 你看到了吧，浏览器不能如我们希望的 那样应用串接样式表。节哀顺变吧。 有关浏览器的坏消息 我必须得作这个简短而又尖刻的评价：串接css样式表很伟大，但浏览器却不怎么样。 Internet Explorer 3.0是第一个试图支持样式表的浏览器，它的尝试是很有勇气 的，特别是在尚未确定样式表的正式标准的时候更显得可贵。但也因为如此，IE 3.0支持了CSS的大部分属性，但也存在一 些小毛病。 你可能以为等Netscape Communicator 和 IE 4.0问世的时候将会更坚定地支持CSS。 很可惜。似乎微软和网景关系的开发者对 CSS的某些属性都作了自己的阐释。而双 方的阐释彼此互不支持。 结果如何呢？应用样式表就象是行走在地 雷区一般。大部分的东西都很正常，但有 些不是。甚至有些东西都能运转，但在不 同的浏览器上的显示却不同。 在以后4天的学习中，我将尽力说明不同 的浏览器各自支持什么属性。但是其中的 细节就需要你自己亲自去趟这个雷区了。 将利用样式表制作的产品放到不同的浏览 器和平台上进行测试是非常有必要的。这 是避免令人不愉快的结果的唯一办法。 同时，我们应该大声疾呼，让微软和网景公司明白必须统一对串接样式表的支持， 只有这样才能实现标准化的设计。第2日 欢迎进入串接CSS样式表第2天的课程，昨天 我们已经学习了如何使用及在网页中加入 串接样式表，今天我们将深入学习串接样 式表每一项精彩绝伦的特点。 今天我们主要学习字体，即如何控制字号， 字模及加入特殊效果。想想如果只用HTML 标签你能做到这些吗？接着往下读。 今天要学习的CSS特点包括： 字模系列 字号 字重 字体风格 字体参数 文字变形 文字修饰 字体 按照字体名称调用CSS字体 第1个问题：你如何指示浏览器显示你希望 的字体?仅仅在字模后面键入字体的名称就 行了吗？ 很可惜，事情还不是这么简单，字体在各 个操作平台之上叫的名称可能会有变化。 比如，Courier在MAC机上叫做COurier New。 在一台机器上可能叫Italic的字体在另一 台机器上可能就叫做Oblique。你仔细研究 之后会发现更多的这样的例子。 所以，我们称呼一种字体的名称并不一定 就是计算机对这种字体的名称。而你必须 确定使你所用的字体名称就是计算机所以 的字体名称。 那么你怎么确定计算机对一种字体的确切 名称是什么呢？这取决于于计算机所用的 操作平台。CSS 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.你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称 没有把握时，这样做无疑是一种好办法。 注意：浏览器更倾向于认可小写的名称。 当然，只用你对所有项目都进行了测试， 就不会有问题。 每次将一种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规则，使用单引号： Text goes here.如果你将CSS规则的说明组合在一起， 而其中又包含字模系列，将字模系列 列在最后，例： H2 color: red; margin: 10px; font-family: times, serif 有时候，如果字模系列没有列在最 后一条，IE 3 会忽略整个一条CSS 规则，很莫名其妙，但却是真的。利用字模系列属性，你可以按照字体名称 调用字体，而且在使用标签时 将拥有更大的灵活性。CSS对字号的控制 不使用CSS，利用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文件。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: 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-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种办法就是使用比例参数，例： P font-size: 15pt B font-size: 300% 这些规则的含义为：使所有包含在中的的文 字的尺寸为尺寸设定值的3倍，即45 points。 比例参数常用于从母体要素继承的参数值。 浏览器对比例参数比较挑剔，所以你必须经常测试。 有了这么多的选择是不是很让人高兴呢？由于有了 font-size属性，我们能够随意调整文字的尺寸，如 同以下的例子所示：（每一个字母i都比前一个大5 pt） i i i i i i i i i i i i i i加重字体和斜体字的各种CSS方式 利用CSS加入斜体字非常简单，而且我们 对于加重字体还有很多选择。 字体风格 字体风格用来控制斜体字的属性，非常漂 亮又非常简单： H3 font-style: italic 当浏览器接到应用斜体字的指令后，它将 在用户的机器中寻找安装的斜体字版本， 如果不存在斜体字，浏览器将生成一种。 通常，就是指将正常的字体倾斜显示。 如果一种字体的名称为Oblique，而不是 Italic，浏览器就会使用oblique作为字 体风格的参数。 字体风格的第3种参数是normal，它将取 消斜体字风格，将字体以正常形式显示。 字重加重风格可以关闭或打开，利用字重属性， 你可以创造出一系列新的加重字体。 P font-weight: bold 这是字重最常见的应用方式，而normal属 性也可以取消加重字体，将字体以正常形式显示。 你还可以用数值100，200，.900。正常 的非加重体的字体值为400，900是最加重 的字体参数值。 Web浏览器将决定每一参数值的实际显示。 要显示这些例子的效果，你必须安装相应 的字库，并且你的系统还得支持CSS 而且你的用户的机器也必须安装相同的字 库而且其系统支持CSS的这些参数值。 （IE 3对此均不支持）。 最后，你还可以给字重加上lighter和 bolder参数，当然前提是所使用的字体已 经赋予了某种级别的加重字体属性。在已 有属性级别上，浏览器将使字体的显示相 应地更加重一些（bolder）或更轻一些（lighter）。文字的CSS特殊效果 下面你将发现其它一些有关字体的CSS样式表 属性，你可以将其加入到你的工具箱中。 字体参数（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. 文字修饰（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对这些都不 支持。）。 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!你不仅可以消除链接的下划线，而且你还可以利用这3条属性使用CSS的其它属性， 比如，你可以使得为被访问过的链接以12points的Arial加重字体显示，而访问过的链接以10points尺寸的Times斜体字 显示。这个世界可以由你自由塑造， 可惜呀，可惜！并不是所有的浏览器都支 持这项属性。Communicator支持带文字修 饰（text-decoration）的预定义分类， 但对其它属性非常挑剔。IE 3不支持 A:active(而MAC不支持A：visited)， IE 4支持全部这些属性。 尽管有这些局限，但至少你比以前有了更 多的可能性！这都要感谢CSS的创作者. 下面是一个小练习。复习CSS CSS：今天我们探索了字体的奇妙世界：字型、 字号、加重显示、斜体字、大写、下划线 等等。利用传统的HTML你的确也可以作很 多事情，但不是所有事，而且也达不到样 式表对字体的控制程度。 串接样式表的字体属性总结： 字模系列定义字体以何种字体显示 字号使你可以利用points,pixels， 关键字及其它尺寸单位控制文字的 尺寸。 字体风格用于斜体字显示。 字重对字体加重显示的程度作全面 的控制。 字体参数（font-variant）将文字 以小一半的尺寸大写显示。 文字变形（text-transform）控制 大写。 文字修饰（text-decoration）可以 控制文字的多种细节的变化，如下 划线、闪烁等等。 还需提到另外一项重要的属性，字体。字 体是一种将字号、行高度及字母系列一次 定义的快捷方式。例： LI font: 12pt/16pt courier 这条规则将文字设置为：尺寸12points， 行高度 16points，（我们将在明天谈到 该属性），字型采用Courier。 使用字体属性时，必须设定字号和字型， 但可以选择是否设定行高度。设定的顺序必须严格按照例子中的顺序。 这只是我们探索CSS众多属性的开始。明 天我们将更深入研究字体属性及图文和布局。5日精通css样式表第3日 我们在第2天的CSS教程中学习了字体及控制 文字字符的方法.今天我们将学习这些字 符、单词和每行的内容之间是如何定位 的。我们将学会如何设定字与字之间、字 母之间的距离，以及行距（垂直间距）、 文字的对齐方式、边距、边框及浮动要素 等，列表如下： 字间距 字母间距 行高 文字对齐方式 垂直对齐方式 文字缩位 顶边距、左边距等 空格填充顶部、左边等等 边框宽度、颜色、样式等 浮动 清除 很显然，今天我们要学很多东西，所以我 们得抓紧时间。让我们开始吧！css控制字间距和字母间距 下面要学习的CSS属性可以使你做到HTML标签 做不到的事情：控制字间距及字母间距。 字间距 利用字间距属性，你可以在字之间加入更 多的距离： H3 word-spacing: 1em 你所使用的参数值将加入任何浏览器的缺 省设置，你可以使用我们昨天谈到的任何 一种长度单位： in （英寸） cm （厘米） mm （毫米） pt （点数） pc （打字机字间距） em （ems） ex (x-height) px （象素） 以下为显示结果： Behold the power of cheese.如果你的浏览器不支持这种CSS属性，请 点击这里查看显示效果。 如果你看不到任何不同之处，则说明你的 浏览器不支持这种属性，只有MAC机用的IE 4能支持这种字间距设置。 字母间距 字母间距可以在IE 4中应用，但 Communicator不行，唉. H3 letter-spacing: 10px 字母间距的功能和字间距的很类似：其参 数值将被加入到浏览器的缺省设置中，你 可以使用上述任何一种长度单位。 如果你用的是IE 4，这里是一个例子： Behold the power of cheese.对于这两种属性，你都可以使用normal参 数。从而使其按照浏览器的原有缺省设置 显示。别沮丧，还有很多CSS属性可以在两种浏 览器上都可使用。下文中就是一个例子。 css行距 行与行之间的距离最常用的称呼是行距， 而当网页设计者们发现他们能够控制行距 时最常用的称呼是Weee! 行高 行高简直是上帝发给人间的福音。利用CSS行高我们可以随心所欲地控制行与行之间的 垂直距离。 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 wasnt yet a glimmer in anyones 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 wasnt yet a glimmer in anyones 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% 在本例中，行距是长度1