4.3　为什么是层叠样式表

其实，CSS样式的定义方式有四种，当一个元素出现重复的样式声明时，最终生效的样式是由它们的优先级来决定的。这种允许样式的重复定义和优先级设置就构成了样式的层叠性，因此，CSS的全称是层叠样式表。

4.3.1　四种定义样式的方式

这一节我们来具体看看这四种样式的定义方式，以及它们的优先级，如图4.8所示。其中优先级的值越大，优先级就越高，意味着对最终样式的影响越大。

四种样式的具体说明见表4.1。

以上四种样式定义，除了内联样式是直接在目标元素内定义，此时不要指定目标元素，其余三种方式都采用元素选择器和声明块的定义方式：

其中，元素选择器是指对哪一个元素应用样式，如上例中的span元素。声明块则是由若干行的样式声明语句组成的，其中每一条声明语句是由“属性名：值”的形式构成。

对于外部样式还需要引入外部的css文件，一般它都是加在head内部：

在html文件中引入的外部文件位置都是在＜head＞内部定义的，依靠＜link＞标记来表示要连接的外部文件，内部的rel属性表明连接的外部对象是一个样式表（stylesheet），href属性则是外部文件的路径。

不同样式的使用秘籍

CSS有四种定义样式的方式，到底该用哪一种，还是全用？

正确的做法是，浏览器默认是一直都存在的，不存在选择性。对于其他三种则有分别的适用情况：（1）初学阶段，网页内容非常简单，又希望样式声明和HTML内容在同一个页面，推荐适用内部样式定义。

（2）对于中型到大型网站项目，推荐使用外部样式，原因很简单，为了便于代码的重复使用，即“代码复用”。因为很多样式可以在多个项目或网页通用，因此，只需要定义一次，其他地方引入即可。

（3）如果个别元素的样式非常重要且特殊，你希望提高它的优先级，则采用内联样式。

4.3.2　样式冲突怎么办

有时，不得不用到两种以上的方式声明CSS。那么，就会不可避免地遇到样式冲突问题，到底该听谁的？这里总结了两种常见的冲突情况：

情况1：对某一个元素，使用三种方式定义相同的样式。

请看下面的例子，代码如下：

my.css中定义的样式如下：

上述代码希望给二级标题设置字体颜色样式，请问标题文字最终显示为什么颜色？

根据优先级法则的判定：

应该是绿色。

当然，如果你想强制改变默认的优先级规则，也可以给某个样式的属性声明后添加空格和关键字!important，试着修改内部样式如下：

再试试看二级标题颜色还是绿色吗？

情况2：同一级别下，重复定义的样式，谁后定义听谁的。

修改上述例子，删除内联样式，并添加一个新的内部样式。因此，二级标题的样式只有两个，具体如下代码所示：

你猜猜标题会是黄色还是蓝色呢？自己检查一下看看，再对对口诀。

样式不起作用

如果你给一个元素设计了CSS样式，却未得到期望的效果，则先要排除属性拼写等语法错误，然后去查看是否有重复定义的样式？如果有，则要根据优先级判定一下，是不是你期望的样式优先级太低了。最后，可以在浏览器的开发者工具中选中目标元素，查看样式，会发现某些样式虽然声明了，但是却没有被应用，因此，就会被画线，（见图4.9中的画线部分的样式）。