使用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. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

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

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

  5. 0811 css样式表基本

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

  6. CSS样式的优先级

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

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

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

  8. HTML——CSS样式表&amp;布局页面

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

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

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

随机推荐

  1. PHP数组/Hash表的实现/操作、PHP变量内核实现、PHP常量内核实现 - [ PHP内核学习 ]

    catalogue . PHP Hash表 . PHP数组定义 . PHP变量实现 . PHP常量实现 1. PHP Hash表 0x1: 基本概念 哈希表在实践中使用的非常广泛,例如编译器通常会维护 ...

  2. java netty之ServerBootstrap的启动

    通过前面的几篇文章,对整个netty部分的架构已经运行原理都有了一定的了解,那么这篇文章来分析一个经常用到的类:ServerBootstrap,一般对于服务器端的编程它用到的都还算是比较的多..看一看 ...

  3. PL/sql语法单元

    1.字符集 PL/SQL的字符集包括: 所有大小写字母:包括A~Z和a~z. 数字:包括0~9. 空白字符:包括制表符.空格和回车符 其他常用英文符号 2.标识符 标识符用于定义PL/sql变量.常量 ...

  4. C#基础性问题

    解决方案.项目.类之间的关系: 一个解决方案可以包含多个项目.一个项目可以包含多个类 解决方案:公司 项目:部门 类:员工 .sln:解决方案文件,里面包含着整个解决方案的信息,可以双击运行. .cs ...

  5. Google 多源码管理工具 gclient

    google的chromium项目是用gclient来管理源码的checkout, update等. gclient是google专门为这种多源项目编写的脚本,它可以将多个源码管理系统中的代码放在一起 ...

  6. 【OpenCV十六新手教程】OpenCV角检测Harris角点检测

    本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/29356187 作者:毛星云(浅墨) ...

  7. hdu1828(线段树——矩形周长并)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1828 分析:与面积不同的地方是还要记录竖的边有几个(num记录),并且当边界重合的时候需要合并(用lb ...

  8. tensorflow+入门笔记︱基本张量tensor理解与tensorflow运行结构

    Gokula Krishnan Santhanam认为,大部分深度学习框架都包含以下五个核心组件: 张量(Tensor) 基于张量的各种操作 计算图(Computation Graph) 自动微分(A ...

  9. [Swift]LeetCode915.将分区数组分成不相交的间隔 | Partition Array into Disjoint Intervals

    Given an array A, partition it into two (contiguous) subarrays left and right so that: Every element ...

  10. 关于gitee代码上传下载

    1.在gitee上面创建新分支: 2.复制本地ssh秘钥(C:\Users\Administrator\.ssh) 添加到 gitee设置页面的ssh:(如果之前没有秘钥,就执行ssh-keygen ...