CSS 各种方式的优先级有关问题

2012-10-15

CSS 各种方式的优先级问题　　上面的4个小节分别介绍了CSS控制页面的4种不同方法，各种方法都有其自身的特点。

CSS 各种方式的优先级问题
　　上面的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

热点排行