CSS权威指南(第四版)读书笔记——第3章 特指度和层叠之继承

前端技术 everyinch 134℃ 0评论

特指度对理解声明是如何应用到文档上的很重要,此外,还有一个重要的概念,即继承。继承指某些样式不仅应用到所指的元素上,还应用到元素的后代上。例如,为h1元素设定的颜色还会应用到h1中的文本上,即使文本包含在子元素中。

h1 {color: gray;}

<h1>Meerkat <em>Central</em></h1>

h1中的常规文本和em中的文本都将显示为灰色,因为em元素从h1元素的样式中继承了color属性。

继承对无序列表也适用。假设为ul元素应用color: gray;样式:

ul {color: gray;}

我们希望应用到ul上的这个样式也应用到其中的列表项目,以及列表项目的内容上。得益于继承,事实的确如此,如图3-3所示。

图3-3:继承样式

通过文档的树状图更容易理解继承的工作方式。图3-4是一个十分简单的文档的树状图,文档中有两个列表:一个无序列表,一个有序列表。

图3-4: 一个简单的树状图

把声明color : gray;应用到ul元素上后,那个元素将使用声明的样式渲染。这个值再沿着树状图向下传播到后代元素,直到没有后代为止。属性值绝不向上传播,即元素的样式绝不传给祖辈元素。

继承是CSS的根基之一,通常无需刻意考虑。不过,有几点要留意。

首先,很多属性是不继承的,这通常是为了避免得到意外的结果。例如,border属性(设定元素的边框)就不继承。

图3-5: 边框不继承的原因

此外,基于同样的原因,多数盒模型属性也不继承,包括外边距、内边距、背景和边框。

其次,继承的值没有特指度,连零都没有。

分析下述规则和标记片段,与图3-6所示的结果比较一下。

* {color: gray;}

h1#page-title {color: black;}

<h1 id=”page-title”>Meerkat <em>Central</em></h1>

<p>

Welcome to the best place on the web for meerkat information!

</p>

图3-6:零特指度战胜无特指度

因为通用选择符应用于全部元素,而且特指度为零,所以它声明的颜色gray击败继承的颜色black(由于继承的值根本没有特指度)。

继承的值没有特指度是很关键的一点,决不能忽略。例如,假设我们使用下面的样式表把“工具栏”中的所有文本显示为黑底白字:

#toolbar {color: white; background: black;}

只要id为toolbar的元素中都是纯文本,就能得到所要的效果。然而,如果工具栏中都是超链接(a元素),那么超链接将显示为用户代理自带的样式。在Web浏览器中,很可能显示为蓝色,因为浏览器的内部样式表中可能有这么一个规则:

a:link {color: blue;}

如果不想使用默认样式,必须像下面这样声明:

#toolbar {color: white; background: black;}

#toolbar a:link {color: white;}

这里,有个规则直接选择工具栏中的a元素,得到的结果如图3-7所示。

图3-7:直接把样式应用到相关元素上

此外,使用前一章介绍的inherit也能得到相同的结果。把规则改成下面这样:

#toolbar {color: white; background: black;}

#toolbar a:link {color: inherit;}

现在得到的结果跟图3-7一样。

分享&收藏

转载请注明:陈童的博客 » CSS权威指南(第四版)读书笔记——第3章 特指度和层叠之继承

喜欢 (3)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>