Web开发学习心得3——CSS的语法与层叠

来源:互联网 时间:1970-01-01

这篇主要讨论CSS的语法及层叠的概念,有关CSS布局方面的内容下篇讨论。

如前两篇文章所述,CSS是专门用来负责文档的展现的,那既然如此,CSS就一定能够控制每种元素的展现,于是,就有了第一类语法——元素选择符。

元素选择符语法如下:

element

{

样式规则

}

这个非常好理解,所谓元素选择符,就是说文档中所有该元素,都以该样式规则显示。

非常好,有了元素选择符,就能够很大程度上控制文档的展现了。然而,人们很快就碰到了新的问题:我有两个相同的元素,但是我希望两个元素以不同的样式展现。为了满足该要求,于是,就有了第二类语法——类选择符。

类选择符语法如下:

.class(注意class前面的小数点)

{

样式规则

}

该选择符表示,所有属于该类的元素都以该样式规则展现。那么,什么叫属于该类,怎么样才属于该类呢?这就需要元素添加一个“class”属性,并将属性值指定为该类选择符名。

有了这些,就能指定文档中任何元素的样式了。然而,人们发现,文档中常常会包含某些唯一的区块,如页眉、页脚等,这些区块的样式常常只允许应用到该唯一的区块,虽然可以用类选择符来实现(给该区块一个不同于页面其他元素的唯一的类名),但是,如果有专门的语法来实现这种唯一,那无疑能使CSS更清晰。于是,就有了第三类语法——id选择符。

id选择符语法如下:

#id(注意id前面的#号)

{

样式规则

}

该选择符表示,该id的元素以该样式规则展现。id选择符需要元素添加一个“id”属性,并给予唯一的名字作为属性值,即同一文档不允许有两个或以上的元素拥有相同的id值。

以上3种选择符,就构成了CSS最基本的语法。基于这3种选择符,又衍生出一些其他的规则,捡一些常见的简单说明如下:

“选择符1 选择符2”(注意空格分隔符):表示选择符1下的所有子孙选择符2。如“p .red”表示元素选择符p的子孙中类名为red的所有元素。

“选择符1>选择符2”(注意大于号分隔符:表示选择符1下的所有儿子选择符2(注意只限于儿子)。如“p>.red”表示元素选择符p的儿子中类名为red的所有元素。

“选择符1类选择符2”(注意选择符之间紧挨):表示选择符1中所有属于类选择符2的元素。如“p.red”表示<p>元素中属于red的所有元素。

“选择符1id选择符2”(注意选择符之间紧挨):表示选择符1中id为选择符2的元素。如“p#red”表示<p>元素中id为red的元素。

另外,如果两个选择符的样式规则一样,可以简写为“选择符1,选择符2”(注意逗号分隔符),如“p,.red”表示元素选择符p与类选择符.red拥有同样的样式。

了解了CSS的规则之后,我们再来讲讲层叠的概念。

所谓层叠,就是指子孙元素继承祖先元素的样式属性的行为,大部分的属性都能继承,但也有部分属性不能继承,如padding,margin,float等。这个就不多说了,这里主要讲讲在一个元素的一个样式属性被多个选择符选择的时候,如何判断最终应用哪个属性值的问题。

《Head First HTML and CSS XHTML》中讲到一种方法是这样的:根据选择符计算出一个数字,数字最大的那个就是最终要应用的样式,如果存在多个相同的最大值,那么取位置最后面的那个。

那么怎么根据选择符来计算那个数字呢?方法如下:

如果选择符中包含元素选择符,那么就给那个数字加1,有几个元素选择符,就加几个1;

如果选择符中包含类选择符,那么就给那个数字加10,有几个类选择符,就加几个10;

如果选择符中包含id选择符,那么就给那个数字加100,有几个id选择符,就加几个100。

我们来举几个具体的例子:

p

.red

#header

p.red

p#header

p img

ul li p

#go p.red

001

010

100

011

101

002

003

111

注意,以逗号隔开的选择符并不能将其当作一个整体来计算,而要拆开分别计算。如p, .red,它相当于一个p(001)和一个.red(010),而不是整体011。

另外,10个元素选择符并不顶一个类选择符,10个类选择符也不顶一个id选择符,实际上,任意多个元素选择符都不顶一个类选择符,任务多个类选择符也不顶一个id选择符。以上规则可以用如下通俗的方式描述:首先比较id选择符的个数;其次比较类选择符的个数;再其次比较元素选择符的个数;最后,如果3者都相等,那么取靠后定义的那个。


相关阅读:
Top