28 第二章 就会花掉很多时间。而且如果突然要转向一个不同的设计方向时,可能花在清理 原有的残留物上的时间会与实际用于创作设计T作上的时间一样多。 而样式表能提供·种简单、方便、强有力的方式米摆脱这个困境。CSS给设计者 的一个最大的便利,就是能将一套样式应用于同种类型和所有元素的这一能力。 这可能说得还不够明白,但考虑:编辑CSS中的某一行就能够改变所有标准的颜 色。不喜欢使用蓝色吗?改变一行代码,所有的标题都可变为紫色,或黄色,或 褐色,或是其他任何喜欢的颜色。设计时间和繁琐的工作也因此而减少了,而且 能更好地将注意力集中在创新上。下次开会时,如某个人想看到不同颜色的标 谁,只需编辑网质的样式,再重新载入即可。!变化后的结釆就摆在所有入的 面前,仅仅花了儿秒钟的时间就完成了,再也不需要开下一次会了! 当然,CSS不能解决所有的问题一例如,不能用它来改变GIF的颜色,但它 能使工作变得比过去更容易。这是通过选择符( selector)和结构( structure)来 实现的,选择符用于产生变化,而变化又充分利用了结构。 基本规则 CSS的主要功能就是将某些规则应用于文档中同一类型的元素这样可以减少网 页设计者大量的工作。例如,将所有H2元素的文本变成灰色。如果直接使用 HTML,必须在所有H2元素中插人< FONT color="gray">,</FONm标答,像 下面这样 <H2><FONT COLOR="gray >This is H2 text</FONT></H2> 如果文档中有许多玿2元素,这可能会是很乏味的工作。如果后来又决定要将所有 H2元素变为绿色而非灰色,那么事情就变得更复杂了,必须找到所有的H2元素, 然后将其FO标签的值修改为灰色 在CSS里,可以避免这样的麻烦,用更加容易的方式能得到一样的效果。只需要 在文档的样式表里定义下面这样一条规则即可 H2 (color: gray; t
选择符与结构 29 这就称为一条规则(rwle),就这么一条简单的规则就能使所有H2元素的顏色变 为灰色。如果想要变换成另外一种颜色,那么只需修改夲条规则就可以影响文档 中所的H2元素 H2 [color silver 规则结构 为了理解得更为透彻,让我们来分析…下规则的结构。 每条规则有两个部分:选择符和声明( declaration)。每条声明实际上是属性和值 的组合。每个样式表就是由一系列规则组成的,但规并不总是出现在样式表里。 首先,让我们来分解下面的一条规则,如图2-1所示 选择符 声明 4〖co0oi:2le 属性 值 图21规则的结构 正如图中所示,规则的左边就是选择符。所谓选择符就是规则中用于择文档中 要应用样式的那些元素。在本例中,H元素被选中了。如果上例中的选择符为P 那么所有的P元素(段落)就会被选择,而H元素不受影响。 规则的右面部分是声明。它是由CSS属性及其值组成的。在图2-1中,声明部分 说明此规则会使文档的某部分变成紫色。而将应用此规则的元素就是选择符所指 示的(本例中是所有的H元素) 简单的选择符 选择符通常是…个HTML元素,但也可以是其他的。例如,如果个CSS文件包 含XML文档的样式,它看起来可能如下所示
30 笫二章 QUOTE Icolor: gray: 以[ color:'red;) BOOKTITLE (color: purple; H MYElement icolor: red: 1 换句话说,最基本的选择符是一个文档中的某个元秦。在XML里,可以是任何 东西。另~方面,如果是为HTML定制样式,常常是使用某个HTML的元素,像 B,H3,MM,A或者是BDDY元素,如下 BODY Icolor: black: J Hl color: purple; k 13(color: gray 1 STRONG [color: red; y EM Icolor: maroon; 这种样式的结果如图22所示,带有明显的灰度级。 This is h1 text This is H3 text This is a paragraph with strong text andemphaized tewt thin止 图22一个文档的简单样式 将样式应用于元素的能力显然是很强大的,它可以更容易地使元素的样式由一种 变成另一种。假设我们有个网页,其中所有H2元素都为灰色 H2 (color: gray: 1 看上去还不错,但看的次数越多,它就显得不那么好看了。最终还是决定让段落 文本显示灰色而不是H2文本。没问题!所有要做的工作就是将选择符由H2改为 P,这样就能将原来2元素的样式转换到P(段落)元素: P Icolor: gray: 刚才我们讨论了规则的左边,在继续深入讨论选择符的一些附加特性之前,让我 们来看看右边的声明部分
选择符与结构 31 声明 声明的格式是固定的,某个属性( property)后跟·个冒号,然后是其取值。最 后,这条声明以分号(;)作为终结。而值叫以是单个关键字( keyword)或者是 由空日符所分开的一串关键字组成的。如果有一个不正确的属性被用于声明中, 那么,整条声明将被忽略。而且后续的声明也将被忽略,因为即使值是正确的, 属性也不正确: brain-size: 2cp 如果某个值不正确、多数情况下只有那个值被忽略——一尽管它可能使整条规则 作废。然而,这种可能性对多数浏览器来说是很小的,因为大部分都能忍受CSS 中的一定的错误:它们只是丢掉不认识的值,使用声明中的剩余部分,而不是忽 略整条规则(这听起来好像是做了件礼貌的事,但对于制作者来说也更容易培养 坏的编写习惯)。 如果使用多个关键字作为一个属性的值,通常用空白符将它们分开。并不是每个 属性都接受多个关键字,但大部分都可以:例如,font属性。如果想要使段落的 文本采用中等尺寸的 Helvetica字体,那么规则应该如下所示 P [ Eont: medium Helvetica; 注意 medium和 Helvetica之闾的空格,两边各为一个关键字(第一个是字体尺 寸,第二个是字体名)。这…空格使得用户代理能分辨关键字,从而正确地使用它 们。最后的分号表示规则结尾。 之所以要将这些以空格符分开的单词当作关键字,是因为它们全部合起来才形成 属性的值。例如,下面这条虚构的规则: rainbow: red orange yellow green blue indigo violet 当然,没有像 rainbow这样的属性,而且上面的许多颜色也是无效的,但它对于 我们举例还是有用的。所以我们对于 rainbow这个属性所得到的值就是red orange yellow green blue indigo violet。这七个关键宇合在…起成为 个值。也可以重新定义其值: rainbow: infrared red orange yellow green blue indigo violet ultraviolet
笫二章 现在 rainbow就有了一个不同的值,它是由九个而不是七个关键字组成的。尽管 这两个值看似相似,但它们就像0和1一样是不同的值。 在有…些例子中,关键字不是由空格分隔的。font就是一个很好的例子,而且 只有这一个地方两个关键字由正斜杠(/)分开。如下 H2 ( font: large/150% sans-serif; j 斜杠分开了字体大小和行高。这是在font声明中斜杠唯一能出现的地方。所有其 他关键字还是由空格来分开。 这些就是一个简单声明需要注意的地方,正如简单的选择符那样,没有什么可以 多说的,尽管我们并不局限于这样简单的操作。下面就让我们来看看如何能得到 更强大的CSS。 分组 迄今为止,事情就这么筒单——如果只想将一个样式应用于某个选择符,就是 这样轻而易举。毫无疑问,我们要求的不仅仅是这些;有时,我们或许需要让同 条规则应用于多个元素,也就是多个选择符,或者要将更多的样式应用于一个 或一组元素。 分组选择符 假设文档中的H2元素和P元素都应是灰色的文本。最简便的方式就是像下面的 这样 H2, P icolor: gray; i 通过将H2和P元素同时放在规则的左边并且用逗号分隔它们,右边为规则定义 的样式( color:gray;),规则将被同时应用于两个选择符。逗号告诉浏览器在 这一条规则中包含两个不同的选择符。如果漏掉了逗号,将会赋予这条规则完全 不同的意义。我们将在“上下文选择符”节中对此展开讨论