学科分类
目录
HTML5+CSS3

CSS层叠性和继承性

CSS是层叠式样式表的简称,层叠性和继承性是其基本特征。对于网页设计师来说,应深刻理解和灵活运用这两种特性。

1、层叠性

所谓层叠性是指多种CSS样式的叠加。例如当使用内嵌式CSS样式表定义<p>标签字号大小为12像素,链入式定义<p>标签颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加。

需要注意的是,标签选择器p和类选择器.special都定义了段落文本1的字号,而实际显示的效果是类选择器.special定义的16px。这是因为类选择器的优先级高于标签选择器,对于优先级这里只需了解,在后面会具体讲解。

2、继承性

继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。例如定义主体元素body的文本颜色为黑色,那么页面中所有的文本都将显示为黑色,这是因为其他的标签都嵌套在<body>标签中,是<body>标签的子标签。

继承性非常有用,它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性,只需将它应用于父元素即可,例如下面的代码:

p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;}

就可以写成:

body{ color:black;}

第二种写法可以达到相同的控制效果,且代码更简洁(第一种写法中有一些陌生的标签,了解即可,在后面的章节将会详细介绍)。

恰当地使用继承可以简化代码,降低CSS样式的复杂性。但是,如果在网页中所有的元素都大量继承样式,那么判断样式的来源就会很困难,所以对于字体、文本属性等网页中通用的样式可以使用继承。例如,字体、字号、颜色、行距等可以在body元素中统一设置,然后通过继承影响文档中所有文本。

并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性:

● 边框属性

● 外边距属性

● 内边距属性

● 背景属性

● 定位属性

● 布局属性

● 元素宽高属性

注意:

当为body元素设置字号属性时,标题文本不会采用这个样式,读者可能会认为标题没有继承文本字号,这种想法是不正确的。标题文本之所以不采用body元素设置的字号,是因为标题标签h1-h6有默认字号样式,这时默认字号覆盖了继承的字号。

点击此处
隐藏目录