使用CSS样式表一共有2种方式：内部和外部，其中内部分为行内样式和嵌入式，外部分为导入式和链接式。

如果需要在不同的方式中设定同一个属性的时候，样式的优先级别就出现了。

测试代码如下：

red.css：

  1. p{
  2. color:red;
  3. }

test.html：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Test Document</title>
<style type="text/css">
p{
color:blue;
}
@import url(red.css);
</style>
</head>
<body>
<p style="color:gray;">文字颜色</p>
</body>

此时，显示文字颜色为灰色，说明行内样式优先级别最高：

去掉行内样式之后，显示为蓝色，说明页面嵌入式样式的优先级是仅次于行内样式的：

以上说明页面内部样式的优先级别是高于外部样式的。使用外部样式又有两种方式，分为导入式和链接式。

增加一个样式表：green.css

  1. p{
  2. color:green;
  3. }

分以下两种情况：

情况A：

<link href="green.css" type="text/css" rel="stylesheet">

<style type="text/css">

@import url(red.css);

</style>

情况B：

<style type="text/css">

@import url(red.css);

</style>

<link href="green.css" type="text/css" rel="stylesheet">

经过尝试后发现，外部样式以最后的样式为准。

经过上述测试，可以总结如下：

  • 行内样式 > 嵌入样式 > 外部样式
  • 外部样式中，出现在后面的样式优先级高于出现在前面的。

但是，是不是所有的情况都是如此呢？

将head中的样式代码改为下面的代码：

<style type="text/css">

p{

color:blue;

}

</style>

<style type="text/css">

@import url(red.css);

</style>

此时显示的字体颜色为红色：

再例如：

<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>中存在多个<style>标记，那么这些样式的先后顺序决定了优先级别，而同一 个<style>内部，才会遵循嵌入样式优先于导入样式的规则。

虽然各种使用方法有不同的优先级，但是在写样式的时候，最好只采用1～2种方式，这样利于后期的维护和管理，也不会出现样式冲突的情况。

CSS样式表优先级的更多相关文章

  1. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  2. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  3. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  4. 0811 css样式表基本

    CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 1. 样式表分类 ①内联样式表 和html联合显示,控制精确,但是可重用性差 ...

  5. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  6. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  7. HTML——CSS样式表&布局页面

    CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...

  8. 【2017-03-24】CSS样式表

    CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...

  9. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

随机推荐

  1. JAVA面试题：equals()方法和== 区别

    http://bbs.csdn.net/topics/390000725 总结: equals在没重写之前和==一样,重写之后,equals只要内容一样即为true equals跟==一般情况下是等价 ...

  2. HDU2896+AC自动机

    ac自动机 模板题 /* */ #include<stdio.h> #include<string.h> #include<stdlib.h> #include&l ...

  3. poj The Clocks 高斯消元

    由于数据量不大,所以这题有很多解法. 我用的是高斯消元化为逆矩阵解决的…… 代码如下: #include<stdio.h> #include<iostream> using n ...

  4. eclipse代码自动提示功能设置

    一 般默认情况下,Eclipse ,MyEclipse的代码提示功能是比Microsoft Visual Studio的差很多的,主要是Eclipse ,MyEclipse本身有很多选项是默认关闭的, ...

  5. 【mysql的编程专题⑥】视图

    视图是表的一个映射,是一张虚表,在结构上视图和普通的表没什么区别,一样可以用sql语句来增删改查; 视图创建后是一直存在数据库内 操作 创建视图 语法 CREATE [ALGORITHM]={UNDE ...

  6. python-append()方法

    append() 方法向列表的尾部添加一个新的元素.只接受一个参数. >>> mylist = [1,2,3,4] >>> mylist [1, 2, 3, 4] ...

  7. ［企业级linux安全管理］－ 安全管理基础（1）

    1. 操作条件:  (1)装有 Cent OS Linux 操作系统的虚拟机一台 2. 背景: 某企业有一台服务器,其信息如下: (1)  该服务器上存在管理员 root,密码为 root,另存有一些 ...

  8. ruby中Block, Proc 和 Lambda 浅析

    Block 与Proc的区别: Block是代码块,Proc是对象: 参数列表中最多只能有一个Block, 但是可以有多个Proc或Lambda; Block可以看成是Proc的一个类实例. Proc ...

  9. WCF 服务调用RFC 出现异常

    我在VS2010的WCF项目用connecter 3.0 调用 RFC  运行到       IDestinationConfiguration ID = new SAPConfig();       ...

  10. C#.NET开源项目、机器学习、商务智能

    所以原谅我,不能把所有的都发上来,太杂了,反而不好. 1..NET时间周期处理组件 这个组件很小,主要是对时间日期,特别是处理时间间隔以及时间范围非常方便.虽然.NET自带了时间日期的部分功能,但可能 ...