css.docx

1、cssCSS用HTML制作网页就象是用画笔绘制一幅图画。只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果，这并不是正确的工具和灵活性就可以实现的。任何使用过HTML一个多星期的人都知道HTML是一种非常好的网页制作工具。所以有时候我们不得不制作体积相当大的GIF图象以获得想要的字体和布局。同样，有时候也不得不使用各种表格标签和隐藏的空格GIF图象以使页面的布局能达到预想的目的。的确有些荒唐。我们的编码实在是太复杂了，GIF用量越来越多，而我们的页面变得比英吉利海峡还要宽，互联网有限的带宽怎么可能通过这么宽的信息呢？这种设计并不是网页设计的最佳形式。但是，1996年底的时候悄悄诞生了一

2、种叫做样式表（stylesheets）的技术。全称应该是串接样式表（Cascading Stylesheets简称CSS）这位HTML的表弟向世人保证：将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。 只通过修改一个文件就改变页数不定的网页的外观和格式。 在所有浏览器和平台之间的兼容性。 更少的编码、更少的页数和更快的下载速度。 除了还不能全面支持我们常用的大多数浏器之外，CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。我们将漫游样式表的世界。你将学到样式表的基本知识并将其应用于你的网页中。你还将学到如何处理字体、图文、色彩、

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

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

5、的位置。但是现在，样式表使这一切都成为可能。而即将推出的新的CSS功能更令人兴奋。以后4天内，你将会明白我所说的意味着什么。你可以制作出体积更小下载更快的网页还有更好的消息：样式表只是简单的文本，就象HTML那样。它不需要图象，不需要执行程序，不需要插件，不需要流式。它就象HTML指令那样快。有了CSS之后，以前必须求助于GIF的事情现在通过CSS就可以实现。还有，正如我先前提到的，使用串接样式表可以减少表格标签及其它加大HTML体积的代码，减少图象用量从而减少文件尺寸。你可以更快更容易地维护及更新大量的网页。没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页

6、。即便站点用数据库提供服务，我仍然需要更新所有的模板，而且更新每一模板中每一个实例实例的。样式表的主旨就是将格式和结构分离。利于样式表，我可以将站点上所有的网页都指向单一的一个CSS文件，我只要修改CSS文件中某一行，那么整个站点都会随之发生变动。浏览器将成为你更友好的界面。不象其它的的网络技术，样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。怎么样，样式表的确是一个很不错的注意吧？那么，现在我们就开始制作一份样式表。 zzz1.3 你的第1张样式表 现在我们就开始制作

7、样式表。打开你最喜欢的HTML编辑器生成基本的网页： My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies! 很好。现在，让我们给它加一些样式表。只需在最初的和 标签之间插入以下代码： 从浏览器中打开页面，你将会看到： Stylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!如果你的浏览器不支持CSS，请点击这里观看CSS的效果。做得

8、很好！你已经制作出了你的第1份样式表支持的网页。（如果“amaze your friends!”一行的背景不是黄色，则说明你需要升级你的浏览器，否则你将无法学完整个教程。建议你安装Netscape Communicator或者Internet Explorer 4）一些术语让我们学习一下这些新的编码：串接样式表的核心是规则。最简单的规则就象这样： H1 color: green 整个规则告诉浏览器将所有包围的文字以绿色显示。每一条规则包含一个选择及说明。在上述例子中，H1就是选择，它是一个附带样式功能的HTML标签。说明用于定义实际的样式，包括两部分：属性（本例中即color）和参数（gree

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

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

11、链接到HTML文件上。 将一个外部样式表输入到HTML文件中。 将样式表加入到HTML文件行中。 植入样式表： 这就是我们在上一页中用的方法，所有的样式表信息都列于HTML文件的顶部，同分离，例： My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies! 植入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你想对网页一次性加入样式表，就可采用该方法。 你可能注意到代码中有两处很奇怪： TYPE=text/css属性和注释标签。 TYPE

12、=text/css 设定采用MIME类型，这样以来，不支持CSS的浏览器可以忽略样式表。 注释标签()更为重要。有些老的浏览器（如MAC机用的IE 2.0）即使在设定了TYPE=text/css 属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。链接到样式表上 这里是样式表功能发挥得淋漓尽致的地方。你可以将多个HTML文件都链接到一个中心样式表文件。这个外部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的额某一细节，所有页面都会随之改变。如果你维护的站点很大，则这项功能绝对会有其用武之地。 它的使用方法：产生一个普通的网页，但

13、使用规则，而是在内使用标签： 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文件布到你的服务

14、器中。在浏览器中观看网时，你会发现浏览器将依照链接标签将有链接了的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 back

15、ground: yellow; font-family: courier 在本例中，浏览器首先输入 company.css的规则 ( import 必须打头), 然后加入移植的规则从而为这个网页产生规则集合。请注意：对于H1，在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行哪一项规则呢？植入的规则此时将占上风。所以文字显示效果如下： Stylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!如果你的浏览器不支持CSS请点击这里观看显示效果。 输入样式表的灵

16、活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。 但是目前只有IE 4.0支持输入法。 在行内加入样式最后，你还可以在HTML行中加入样式规则，如下： My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies! 在这个例子中，你无须在HTML顶部加入样表代码。加入行内的样式表属性将使浏器同样执行样式表规则。 该方法不方便之处在于：你必须在每行指中都中加入样式规则，否则下一行时浏器将转回到文件的缺省设置。 加

17、入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。 记住，你可以同时使用几种方法，其实，样式表的能力就在于综合你加入网页的各种样式。分类及其它技巧我们已经学习了所有的样式表基本语法。下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.分类我先前已经讲过所有的HTML标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢？比如,你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示，你能做到吗？这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。这些规则（不论是植入的还是外部样

18、式表文件）将以以下方式显示： 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标签的

19、分类： .first color: green 这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，并应用到网页中，而设定的文字将以绿色显示。情景选择：如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。 P B color: red Emma Thompson, ActressDramatic actor, inspired comedienne. Is there nothing she c

20、ant do?样式表的规则告诉浏览器只将所有之内加重显示的文字以红色显示。所以，之外标题的加重文字不会以红色显示，而之内的文字则是。 注释即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例： P.first color: green /* greenfor the first paragraph of every page */H1 text-indent: 10px; font-family: verdana IMG margin-top: 100px /* giveall images a top margin */串接 你可能会问这样的问题：“为什么要

21、把它叫做串接样式表呢？下面我们将回答你的问题。串接屏幕就是一个战场，在一个HTML文件中，如果有3种不同的样式表规则都使用P作为其选择。输入的样式表指示浏览器将文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。那么可怜的浏览器该听谁的呢？好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序： 1. Inline styles （行内样式） 2. Embedded styles （植入样式） 3. Linked styles （链接样式） 4. Imported styles

22、（输入样式） 5. Default browser styles（缺省浏览器样式） 浏览器将按照上述顺序执行样式表的指令。但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将以绿色显示，而另一个规则要求以红色显示？多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺序： 1. 使用特别说明的样式表规则，例： BODY color: green P color: red 有一项规则特别说明 中的文字一红色显示，但它同时也继承了的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以之内的文字一红色显示。 2. 应用继

23、承的样式表规则 如果不存在第1步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第3步。 3. 按照样式表规则在HTML中的显示顺序执行。 P color: green P color: red 当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，作为讲座一红色显示，因为它是最后给出的规则。 注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定Netscape Communicator 和Internet Explorer都不支持，所以本文中不再细述。 最后一个问题：如果样式表规则同HT

24、ML标签冲突时，如何处理？我们看一下这个例子： I font-family: impact I think East of Eden is Steinbecks best novel.该例中样式表规则要求浏览器使用Impact，但是传统的HTML标签要求用Times字体，一个很明显的传统。根据正式的样式表规定，应该优先执行样式表规则。字体样式欢迎进入串接样式表第2天的课程，昨天我们已经学习了如何使用及在网页中加入串接样式表，今天我们将深入学习串接样式表每一项精彩绝伦的特点。今天我们主要学习字体，即如何控制字号，字模及加入特殊效果。想想如果只用HTML标签你能做到这些吗？接着往下读。今天要学习的

25、CSS特点包括： 字模系列 字号 字重 字体风格 字体参数 文字变形 文字修饰 字体 按照字体名称调用字体第1个问题：你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的名称就行了吗？很可惜，事情还不是这么简单，字体在各个操作平台之上叫的名称可能会有变化。比如，Courier在MAC机上叫做COurier New。在一台机器上可能叫Italic的字体在另一台机器上可能就叫做Oblique。你仔细研究之后会发现更多的这样的例子。所以，我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。而你必须确定使你所用的字体名称就是计算机所以的字体名称。那么你怎么确定计算机对一种字体的确切名称是什

26、么呢？这取决于于计算机所用的操作平台。 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.如