css那些事儿(3)样式优先级和样式表的管理

1.样式覆盖

css那些事儿(3)样式优先级和样式表的管理
1 p {
2     color:#0000FF; /* 将文字定义为蓝色 */
3 }
4 p {
5     color:#FF0000;
6 }
css那些事儿(3)样式优先级和样式表的管理

同一选择器,同一属性,后面定义的会覆盖前面定义的。

2.样式继承

css那些事儿(3)样式优先级和样式表的管理
1 body {
2     font-size:12px;
3 }
4 p {
5     color:#FF0000;
6 }
css那些事儿(3)样式优先级和样式表的管理

p也将用body定义的文字属性。

3.根据样式定义的优先级

网页中定义样式分为四种,按优先顺序排序:

  • html标签中style属性,
  • 开发者写的css文件(包括.css文件和<style></style>标签两种形式)
  • 使用浏览器浏览网页的用户定义的样式,
  • 浏览器默认的样式。

另外,允许开发者(用户)对样式有更多的控制力,可以使用!important关键字对属性设置声明,其优先级高于以上四种。

!imoprtant的使用方式:

css那些事儿(3)样式优先级和样式表的管理
1 p {
2     color:blue !important;
3 }
css那些事儿(3)样式优先级和样式表的管理

 

4.根据选择器的优先级

  • 标签选择器、伪类及伪对象:优先积分1
  • 类选择器、属性选择器:优先积分10
  • ID选择器:优先积分100
  • 其他选择器(通配符等):0

根据以上优先积分,统计样式表中出现的每个选择器的个数,再相加,最终得出的分数就是某个选择器的优先级别。

例如:

p = 1

p.myColor = 1+10 = 11

.myColor = 10

#myColor = 100

再次说明:!important关键字 > style属性 > 以上选择器

5.不同引入方式的覆盖

css样式引入html页面4种方式:

  • style属性:行间样式
  • <style></style>标签:内嵌样式表
  • <link/>标签:外联样式表
  • @import url():导入样式表,

其中行间样式和内嵌样式表,如果需要修改样式,会修改html页面,不推荐使用。

外联样式表是最长使用的,可以吧样式和html页分离

导入样式表可以达到分离的效果,但是浏览器解析是最后再解析的,所以可能会有打开页面的过程中无样式,直到页面加载完才会加载样式的情况出现。

导入样式表可以在一个样式文件中再次导入其他的样式表,从而可以用一个样式表管理所有样式表,降低html文档的复杂性。

在样式表中导入多个样式表文件时,必须放在最前面。

因为先考虑导入样式的文件,再考虑样式表,所以样式表中的样式会覆盖导入样式文件中的样式。

实际情况:

情形1:

html

 

css那些事儿(3)样式优先级和样式表的管理
1 <link rel="stylesheet" href="样式的覆盖.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
2 <style type="text/css">
3 p {
4     color:red;
5 }
6 </style>
css那些事儿(3)样式优先级和样式表的管理

 

样式的覆盖.css

css那些事儿(3)样式优先级和样式表的管理
1 p{
2     color:green;
3 }
css那些事儿(3)样式优先级和样式表的管理

实际颜色:红色

情形2:

css那些事儿(3)样式优先级和样式表的管理
1 <style type="text/css">
2 p {
3     color:red;
4 }
5 </style>
6 <link rel="stylesheet" href="样式的覆盖.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
css那些事儿(3)样式优先级和样式表的管理

样式的覆盖.css 同情形1

实际颜色:绿色

情形3:

html

css那些事儿(3)样式优先级和样式表的管理
<style type="text/css">
@import url("样式的覆盖.css");
p {
    color:red;
}
</style>
css那些事儿(3)样式优先级和样式表的管理

红色,不管@import放在前面还是后面

情形4:

html 同情形2

样式的覆盖.css

css那些事儿(3)样式优先级和样式表的管理
1 @import url("样式的导入.css");
2 p{
3     color:green;
4 }
css那些事儿(3)样式优先级和样式表的管理

样式的导入.css

css那些事儿(3)样式优先级和样式表的管理
1 p{
2     color:blue;
3 }
css那些事儿(3)样式优先级和样式表的管理

绿色

情形5:

html 同情形2

样式的覆盖.css 同情形4

样式的导入

css那些事儿(3)样式优先级和样式表的管理
1 p{
2     color:blue !important;
3 }
css那些事儿(3)样式优先级和样式表的管理

绿色,!important此时没有提升优先级的效果

6.样式表的规划与管理

简单站点可以只使用一个css样式文件。

大型复杂站点,可以将css样式文件分为2部分:页面的全局定义以及处理页面基本布局的css样式文件、处理细节方面的css样式文件。

全局文件在布局确定之后就很少再需要去动,减少修改样式过程中意外地破坏页面布局等的可能性。

细节文件还可以再细分,比如表单的、文字信息、列表等。但不建议这样做,因为会增加http请求的次数。

 

css那些事儿(3)样式优先级和样式表的管理,布布扣,bubuko.com

css那些事儿(3)样式优先级和样式表的管理

上一篇:Git&Github常用知识整理(2)


下一篇:开发者需要了解的WebKit