|
作为本章的最后一节，这里主要讲解CSS的层叠属性。CSS的全名叫做“层叠样式表”，读者有没有考虑过，这里的“层叠”是什么意思？为什么这个词如此重要，以至于要出现在它的名称里。 CSS的层叠特性确实很重要，但是要注意，千万不要和前面介绍的“继承”相混淆，二者有着本质的区别。实际上，层叠可以简单地理解为“冲突”的解决方案。 例如有如下一段代码，示例文件位于网页学习网CSS教程资源“第1章\16.htm”。
代码中一共有5组p标记定义的文本，并在head部分声明了4个选择器，声明为不同颜色。下面的任务是确定每一行文本的颜色。 ● 第1行文本没有使用类别样武和ID*F式，因此这行文奉显示为标记选a*8p中定义的绿色。 ● 第2行文本使用了类别样式，因此这时已经产生了“冲突”。那么，是按照标记选择器p中定义的绿色显示，还是按照类别选择器中定义的红色显示呢？答案是类别选择器的优先级高于标记选择器，因此显示为类别选择器中定义的红色。 ● 第3行文本同时使用了类别样式和ID样式，这又产生了“冲突”。那么，是按照类别选择器中定义的红色显示，还是按照ID选择器中定义的蓝色显示呢？答案是ID选择器的优先级高于类别选择器，因此显示为ID选择器中定义的蓝色。 ● 第4行文本同时使用了行内样式和ID样式。那么这时又以哪一个为准呢？答案是行内样式的优先级高于ID样式的优先级，因此显示为行内样式定义的橙色。 ● 第5行文本中，使用了两个类别样武，应以哪个为准呢？答案是两个类型选择器的优先级相同，此时以前者为准，“.purple”定义在“.red”的前面，因此显示为“.purpIe”中定 因此，综上所述，上面这段代码的最示效果如图1所示。lodidance.com  图1 层叠特性示意图 总结：优先级规则可以表述为：行内样式 > ID样式 > 类别样式 > 标记样式 在复杂的页面中，某一个元素有可能会从很多地方获得样式，例如一个网站的某一级标题整体设置为使用绿色，而对某个特殊栏目需要使用蓝色，这样在该栏目中就需要覆盖通用的样式设置。在很简单的页面中，这样的特殊需求实现起来不会很难，但是如果网站的结构报复杂，就完全有可能使代码变得非常混乱，可能出现无法找到某一个元素的样式来自于哪条规则的情况。因此，必须要充分理解CSS中“层叠”的原理。 注意：计算冲突样式的优先级是一十比较复杂的过程，并不仅仅是上面这个简单的优先级规则可以完全描述的。但是读者可以把捶一个大的原则，就是。越特殊的样式．优先级越高”。 例如，行内样式仅对指定的一个元素产生影响，因此它非常特殊；使用了类别的某种元素，一定是所有该种元素中的一部分，因此它也一定比标记样式特殊；以此类推，ID是针对某一个元素的，因此它一定比应用于多个元素的类别样式特殊。特殊性越高的元素。优先级就越高。 最后再次提醒读者，千万不要混淆了层叠与继承，二者完全不同。 本章重点 本章重点介绍了4个方面的问题。先介绍了HTML和XHTML的发展历程以及需要注意的问题，然后介绍了如何将CSS引入HTML，接着讲解了CSS的各种选择器，及其各自的使用方法，最后重点说明了CSS的继承与层叠特性，以及它们的作用。 作为CSS设计的核心基础，请读者务必真正搞懂这些最基础和核心的基本原理。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/660.html |
