CSS3+DIV网页样式与布局案例课堂（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.5 调用CSS方法的优先级问题

如果同一个页面，采用了多种CSS使用方式，例如使用行内样式、链接样式和内嵌样式，它们共同作用于同一个标记，就会出现优先级问题，即究竟哪种样式设置有效果。例如内嵌样式设置字体为宋体，链接样式设置为红色，那么二者会同时生效，假如都设置字体颜色，情况就会复杂。

2.5.1 案例7——行内样式和内嵌样式比较

例如，有这样一种情况：

<style>
.p{color:red}
</style>
<p style = " color:blue ">段落应用样式</p>

在样式定义中，段落标记<p>匹配了两种样式规则，一种使用内嵌样式定义颜色为红色，一种使用p行内样式定义颜色为蓝色。但是，标记内容最终会以哪一种样式显示呢？

【例2.7】（案例文件：ch02\2.7.html）

<!DOCTYPE html>
<html>
<head>
<title>优先级比较</title>
<style>
.p{color:red}
</style>
</head>
<body>
<p style = " color:blue ">解落三秋叶，能开二月花。过江千尺浪，入竹万竿斜。</p>
</body>
</html>

在IE 11.0浏览器中浏览效果如图2-13所示，段落以蓝色字体显示，可以知道行内样式优先级大于内嵌样式优先级。

图2-13 行内样式和内嵌样式优先级比较

2.5.2 案例8——内嵌样式和链接样式比较

以相同例子测试内嵌样式和链接样式的优先级，将设置颜色样式的代码单独放在一个CSS文件中，使用链接样式引入。

【例2.8】（案例文件：ch02\2.8.html）

<!DOCTYPE html>
<html>
<head>
<title>优先级比较</title>
<link href="2.8.css" type="text/css" rel="stylesheet">
<style>p{color:red}
</style></head>
<body>
<p>远上寒山石径斜，白云深处有人家。停车坐爱枫林晚，霜叶红于二月花。</p>
</body>
</html>

【例2.8】（案例文件：ch02\2.8.css）

p{color:yellow}

在IE 11.0浏览器中浏览效果如图2-14所示，段落以红色字体显示。

图2-14 内嵌样式与链接样式优先级比较

从上面的代码中可以看出，内嵌样式和链接样式同时对段落p修饰，段落显示红色字体。可以知道，内嵌样式优先级大于链接样式。

2.5.3 案例9——链接样式和导入样式比较

现在进行链接样式和导入样式比较测试，分别创建两个CSS文件，一个作为链接，一个作为导入。

【例2.9】（案例文件：ch02\2.9.html）

<!DOCTYPE html>
<html>
<head>
<title>优先级比较</title>
<style>
@import "2.9_2.css"
</style>
<link href="2.9_1.css" type="text/css" rel="stylesheet">
</head><body>
<p>尚有绨袍赠，应怜范叔寒。不知天下士，犹作布衣看。</p>
</body>
</html>

【例2.9】（案例文件：ch02\2.9_1.css）

p{color:green}

【例2.9】（案例文件：ch02\2.9_2.css）

p{color:purple}

在IE 11.0浏览器中浏览效果如图2-15所示，段落以绿色显示。从结果中可以看出，此时链接样式优先级大于导入样式优先级。

图2-15 链接样式与导入样式优先级比较

上一章目录下一章