css样式引入优先级?

css中的优先级讲的有

  1.选择器的优先级。

  2.样式引入的优先级。

今天要研究的是样式引入的优先级。网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何。

  四种样式的优先级别是:行内样式最高、

      ?优先级?  内嵌样式>链接样式>导入样式?

在这四种的优先中,行内样式最高(内嵌样式),大家都是认可的。但剩下的3中就会是我们想的那样吗?

测试代码如下。很简单,先测试内联样式 。一段文本,给设置个color:red;红色。

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    p{color:red;}
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p>
</body>
</html>

 浏览器显示如下。没什么问题。

在接着来看看,用link的方式引入一个外部样式。

  引入方式如下。

<link rel="stylesheet" href="Noname1.css">
<style>
    p{    color:red;}
</style>

  外部样式看下列代码:

p{
    color:blue;
}

浏览器显示如下:为什么什么显示的不是蓝色?

显示还是红色,难道就是  内联样式>连接样式?接下来调换了调用的下位置。代码如下。

<style>
    p{    color:red;}
</style>
<link rel="stylesheet" href="Noname1.css">

浏览器显示如下。

这样浏览器显示的却是蓝色,这时候我们就能看出个大概了。

优先就是个顺序解析问题,谁的引入样式在前面,后面的样式就会被覆盖前面的样式。也就是说,哪个样式离标签越近,哪个样式的优先就越高。

然后接下要解决的就是@import的问题了。

解释是这样:

@import既可以为页面引入外部样式表,也可以在一个样式表中引入另一个样式表。

例如:

[email protected] url("style.css");一个样式表中引入另一个样式表。

2.<style type="text/css">

@import "mytest/div+css/mytest.css";

</style>

 也就是用style,或者是使用外部样式文件再去引入多个样式文件。

第一种中,直接在style标签内容中使用。@import。

另开一个css样式文件,代码如下:

p{
    color:yellow;
}

html代码如下:

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
    @import "Noname2.css";
</style>

</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p>
</body>
</html>

浏览器显示没有问题:

接着使用在使用link标签去测试优先级。

先放在前面。引入代码如下:

<link rel="stylesheet" href="Noname1.css">
<style>
    @import "Noname2.css";
</style>

浏览器显示看到的是还是上面讲到,谁越靠近p标签,就会采用谁的样式。有个词叫上面来着。近水楼台先得月。。。

在看看放在后面会如何。

<style>
    @import "Noname2.css";
</style>
<link rel="stylesheet" href="Noname1.css">

浏览器显示如下。

没有什么问题。还是一样,近水楼台先得月。。

四种样式的优先级别是:

   行内样式最高、

   内嵌样式  与  链接样式(哪个更靠近标签,哪个样式的优先级就越高)

     导入样式?

  @import的优先级问题就请等下篇。

时间: 2024-08-03 03:14:27

css样式引入优先级?的相关文章

css样式引入

1.  css样式引入HTML方法:四种方式          样式优先级:行内样式>内嵌式(内部样式)>外部样式(链接式+导入式)(后两者是就近原则) 行内样式:在标签中标记style属性 <p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p> 内嵌式(内部样式表):在<head></head>标签对中添加<style></style>标签

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

[程序员入行必备]CSS样式之优先级

专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,经常出现设定的样式被"覆盖",不能生效的情况. 浏览器是依据怎样的优先次序判断CSS样式的优先级的呢? 总结如下: 样式的来源 样式有多处来源,有网页开发作者设定的.有浏览器默认的.还有网页用户设定的.各种样式声明逐层叠加,或继承.或覆盖.或叠加计算,影响元素的展现效果. 样式的来源依次有: 1.浏览器默认样式: 2.用户样式: 3.作者链接样式: 4.作者页内嵌入样

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器 特殊性 (a,b,c,d) Style= ”” 1,

Web前端面试指导(十三):css样式的优先级是怎么样的?

题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! 解答思路 样式优先级规则 1.优先级顺序为:!important>style>权重值 2. 如果权重相同,则最后定义的样式的起作用,应该避免这种情况出现 权重规则 标签的权重为1 class的权重为10 id的权重为100 权重取值示例

css样式代码优先级

特殊性 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式

CSS样式之优先级

说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器的权重优先级:     Important > 内联样式 > ID > 类.伪类.属性选择器 > 标签.伪元素 > 通配符 今儿,我们重点来看看第2点—样式选择器. 请看以下代码: <!DOCTYPE html> <head> <title>c

CSS怎样改变行内样式(通过外部级联样式表) css !important用法CSS样式使用优先级判断

CSS样式优先级 行内>内部>外部 使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!important一般都是用于对低版本的除了iE 6 ,用来做hack的,后面缀上了!important的css语句,让浏览器首选执行这个语句,因为css有继承的样式,加上!importanrt可以覆盖父级的样式. IE6不认识它的,IE7和别的浏览器中可以用,用来处理浏览器的兼容性 .padding-l-r p span

CSS样式呈现优先级

经常出现CSS样式不生效的问题. 比如我先对p{},然后在其中一个标签写了个.p_style{}怎么都不生效,于是想到了CSS的呈现优先级. 经过自己测试, 属性style=""     >       ID(#id{})           >          元素(p{})               >            类Class(.p_style{})