上面的4个小节分别介绍了CSS控制页面的4种不同方法,各种方法都有其自身的特点。这4种方法如果同时运用到同一个HTML文件的同一个标记上,就会出现优先级的问题。如果在各种方法中设置的属性不一样,例如内嵌式设置字体为宋体,行内式设置颜色为红色,那么显示结果会让二者同时生效,为宋体红色字。但当各种方法同时设置一个属性时,例如都设置字体的颜色,情况就会比较复杂,如下所示。
首先创建两个CSS文件,其中第一个命名为red.css,其内容为:
p {
color:red;
}
第2个命名为green.css,其内容为:
p {
color:green;
}
这两个CSS的作用分别将文本段落文字的颜色设置为红色和绿色,接着创建一个HTML文件,代码如下:
<html>
<head>
<title>页面标题</title>
<style type="text/css">
p{
color:blue;
}
@import url(red.css);
</style>
</head>
<body>
<p style="color:gray;">观察文字的颜色</p>
</body>
</html>
从代码中可以看到,在内嵌式的样式规则中,将p段落文字的颜色设置为蓝色,而行内样式又将p段落文字的颜色设置为灰色。此外,通过导入的方式引入了red.css,这将文字颜色设置为红色,那么这时这个段落文字到底会显示为什么颜色呢?在浏览器中的效果如下图所示。
可以看到,结果是灰色,即以行内样式为准的。接下来,将行内样式代码删除,再次在浏览器观察,可以看到效果如下图所示。
可以看到,结果是蓝色,即以嵌入样式为准。接着把嵌入的代码删除,仅保留导入的命令,这时在浏览器中将看到红色的文字。从而说明,在行内、嵌入和导入这3种方式之间的优先级关系是:
行内式 > 嵌入式 > 导入式
接下来,在代码中增加链接方式引入的CSS文件,分别尝试如下两种情况。
情况1:
<head>
<style type="text/css">
@import url(red.css);
</style>
<link href="green.css" type="text/css" rel="stylesheet">
</head>
情况2:
<head>
<link href="green.css" type="text/css" rel="stylesheet">
<style type="text/css">
@import url(red.css);
</style>
</head>
这两种情况的区别在于哪种方式的样式表放在前面。经过尝试可以发现,谁放在后面就以谁为准。
因此,结合前面的结论,如果我们把导入式和链接式统称为外部样式,那么优先级规则应该写为:
(1)行内式 > 嵌入式 > 外部样式;
(2)外部样式中,出现在后面的优先级高于出现在前面的。
此次,这个规则已经比较完善了,然而还没有结束。现在如果将<head>部分的代码为:
<head>
<style type="text/css">
p {color:blue;}
</style>
<style type="text/css">
@import url(red.css);
</style>
</head>
将导入式的命令和嵌入式的样式放在两个<style>中,这时在浏览器中的效果,文字会显示为红色,这就说明这时将不再遵循嵌入式优先于导入式的规则了。再例如对于如下代码:
<head>
<style type="text/css">
p {color:blue;}
</style>
<link href="green.css" type="text/css" rel="stylesheet">
<style type="text/css">
@import url(red.css);
</style>
</head>
这说明优先级最高的是最后面的导入式,其次是链接式,最后才是嵌入式。因此,如果在<head>中存在多个<style>标记,那么这些<style>标记和链接式之间将由先后顺序决定优先级,而在同一个<style>内部,才会遵循嵌入式优先于导入式的规则。
虽然各种CSS样式加入页面的方式有先后的优先级,但在建设网站时,最好只使用其中的1-2种,这样既有利于后期的维护和管理,也不会出现各种样式“冲突”的情况,便于设计者理顺设计的整体思路。
转载地址:
http://www.xuekaifa.com/article/20110210/000417.html
分享到:
相关推荐
CSS高级特性--CSS优先级 CSS优先级 01 CSS优先级 网页制作时,对统一元素,应用不同的背景,会出现什么情况? 思考 background-color:pink; background-color:blue; background-color:red; 【结论】 定义CSS样式时,...
css样式优先级比较实例, css样式优先级比较实例, css样式优先级比较实例
css样式应用优先级实用PPT课件.pptx
CSS 优先级小结 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑。
使用DIV+CSS做网站时CSS样式的优先级
css样式应用优先级实用PPT学习教案.pptx
最权威的CSS样式优先级,本人整理过的,做过笔记。
css的导入方式以及优先级 测试
主要介绍了关于CSS选择器优先级的判断并附结果截图,需要的朋友可以参考下
CSS 控制页面样式的4种方式和优先级问题
那么应该如何处理 CSS 优先级问题呢,下面我总结了一些解决 CSS 优先级问题的常用法则。 样式距离 我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式,此时的优先级是: 外部样式 < 内部...
important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不支持!important呢? 首先我们来看看!important这个属性的作用:!important是用来提升样式优先级的,我们知道样式是有优先级...
CSS优先级总结.pdf
CSS中选择器优先级顺序实战讲解.pdf
CSS标签选择器优先级.pdf
通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 – MDN ),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...
主要帮助大家深入理解CSS选择器优先级的相关内容,通过八个小例子分析比较CSS选择器优先级,感兴趣的小伙伴们可以参考一下
css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助
介绍CSS中,单个选择器,以及复合选择器的权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器的权重,区别其优先级,判 断最终样式的覆盖效果。
本文介绍了CSS中提升优先级属性!important的用法问题总结,分享给大家,具体如下: 一、语法 选择器{样式:值!import;} 二、说明 提升指定样式规则的应用优先权,即!important为开发者提供了一个增加样式权重的方法,...