这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。
资料: 层叠和继承
一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试.
对于层叠来说，共有三种主要的样式来源：
- 浏览器对HTML定义的默认样式。
- 用户定义的样式。
- 开发者定义的样式，可以有三种形式：
- 定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式
- 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效
- 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。
用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。
示例
就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入
自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样
式，也可以建立一个单独的userContent.css 样式文件并放到“用户配置”的>文件夹中。另外，还有一部分样式来自外链的wiki服务器上的样式表。
在浏览器中打开前面写的例子页面，你会发现 <strong> 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式
而<strong> 元素是红色的，这是你在自己的样式表中定义的样式。
同时，<strong> 作为 <p> 的子元素，也继承了 <p> 的样式。同样的， <p> 也从 <body>中继承了许多的样式。
再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。
对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。
动手: 使用继承
- 编辑你之前创建的style.css文件。
- 把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中
<p>是<strong>的父级元素:
p {color: blue; text-decoration: underline;}
但是，<strong> 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 <p> 的蓝色.
修改前
修改前.png
修改后
修改后.png
网友评论