层叠和继承

Go to Previous Section:
CSS如何工作这是开始学CSS 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。

资料: 层叠和继承

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。

对于层叠来说，共有三种主要的样式来源：

浏览器对HTML定义的默认样式。
用户定义的样式。
开发者定义的样式，可以有三种形式：
- 定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。
- 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
- 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。

示例

就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。

有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的userContent.css 样式文件并放到“用户配置”的文件夹中。

另外，还有一部分样式来自外链的wiki服务器上的样式表。

在浏览器中打开前面写的例子页面，你会发现  元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。

而 元素是红色的，这是你在自己的样式表中定义的样式。

同时， 作为  的子元素，也继承了  的样式。同样的，  也从 <body> 中继承了许多的样式。

再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。

更多细节

CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。

这就意味着，作为开发者，你很难准确的预知页面最终在用户电脑上的显示效果。

如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：Assigning property values, Cascading, and Inheritance。

编辑你之前创建的style.css文件。
把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。不过，加在css文件的头部会更符合逻辑一些，因为在页面中  是  的父级元素:
```
p {color: blue; text-decoration: underline;}
```
现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。 从它的父级元素  上继承到了下划线的样式。

但是， 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素  的蓝色.

修改前
Cascading Style Sheets

修改后
Cascading Style Sheets

挑战

改动一下样式表，完整如下效果：只在红色的字母上加下划线：

Cascading Style Sheets

参考答案

把定义在  标签上的下划线样式移到  标签上。改后代码如下：

p {color: blue; }
strong {color: red; text-decoration: underline;}

Go to Next Section:
选择器到目前为止，你在样式表中所有的样式都是为标签上的， 和 ，你可以尝试着改变一下页面中它们的样式。下一节会介绍怎样通过更有效的方式定义样式。