CSS样式表优先级
使用CSS样式表一共有2种方式：内部和外部，其中内部分为行内样式和嵌入式，外部分为导入式和链接式。
如果需要在不同的方式中设定同一个属性的时候，样式的优先级别就出现了。
测试代码如下：
red.css：
- p{
- color:red;
- }
test.html：
此时，显示文字颜色为灰色，说明行内样式优先级别最高：
去掉行内样式之后，显示为蓝色，说明页面嵌入式样式的优先级是仅次于行内样式的：
以上说明页面内部样式的优先级别是高于外部样式的。使用外部样式又有两种方式，分为导入式和链接式。
增加一个样式表：green.css
- p{
- color:green;
- }
分以下两种情况：
情况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样式表优先级的更多相关文章
- css样式表和选择器的优先级以及position元素属性值的区别
css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
- 0811 css样式表基本
CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 1. 样式表分类 ①内联样式表 和html联合显示,控制精确,但是可重用性差 ...
- CSS样式的优先级
1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- HTML——CSS样式表&布局页面
CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...
- 【2017-03-24】CSS样式表
CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...
- css样式表的选择器与分类
css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...
随机推荐
- hdu 4454 Stealing a Cake 三分法
很容易想到三分法求解,不过要分别在0-pi,pi-2pi进行三分. 另外也可以直接暴力枚举…… 代码如下: #include<iostream> #include<stdio.h&g ...
- VS2013与MySql建立连接；您的项目引用了最新实体框架；但是，找不到数据链接所需的与版本兼容的实体框架数据库 EF6使用Mysql的技巧
因为之前都是看别人的项目,而没有自己从头到尾建立一个项目,所以这次尝试搭建时就出现了问题,主要是ASP.Net MVC项目中VS2013和MySql的连接. 第一个问题: 数据库表已建好,相应的数据库 ...
- [itint5]两有序数组的中位数
这个题和leetcode的基本一样.用了更好点的思路.在A中折半猜是不是中位数,A中没有后在B中猜.最后猜到B[j]<=A[i]<=B[j+1],此时,无论奇偶(2k+1或者2k个),A[ ...
- POJ2506——Tiling
Tiling Description In how many ways can you tile a 2xn rectangle by 2x1 or 2x2 tiles? Here is a samp ...
- python-append()方法
append() 方法向列表的尾部添加一个新的元素.只接受一个参数. >>> mylist = [1,2,3,4] >>> mylist [1, 2, 3, 4] ...
- ActiveMQ之 TCP通讯机制
ActiveMQ支持多种通讯协议TCP/UDP等,我们选取最常用的TCP来分析ActiveMQ的通讯机制.首先我们来明确一个概念: 客户(Client):消息的生产者.消费者对ActiveMQ来说都 ...
- 给TextView中的text上下左右添加一张图片
1,在xml中配置使用,android:drawableLeft 等 其它的有:android:drawableTop,android:drawableBottom,android:drawableR ...
- NFC(12)使用Android Beam技术传输文本数据及它是什么
Android Beam技术是什么 Android Beam的基本理念就是两部(只能是1对1,不可像蓝牙那样1对多)NFC设备靠近时(一般是背靠背),通过触摸一部NFC设备的屏幕,将数据推向另外一部N ...
- 各开源协议BSD,GPL,LGPL,Apache 2.0,mit等简介＊
快速阅读 分类 子分类 开源约定 BSD original BSD license.FreeBSD license.Original BSD license 为所欲为 Apache Licence 2 ...
- Oracle EBS Report 输出字符字段前部＂0＂被Excel自动去掉问题
Oracle EBS 提供多种报表的开发和输出形式,由于MS Excel在处理数据方面的优势明显,报表输出用Excel打开是很常见的开发项. 但是正是由于Excel的"过于智能而不智能&q ...