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

1.样式覆盖

p {
    color:#0000FF; /* 将文字定义为蓝色 */
}
p {
    color:#FF0000;
}

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

2.样式继承

body {
    font-size:12px;
}
p {
    color:#FF0000;
}

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

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

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

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

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

!imoprtant的使用方式：

p {
    color:blue !important;
}

 

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

 

<link rel="stylesheet" href="样式的覆盖.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<style type="text/css">
p {
    color:red;
}
</style>

 

样式的覆盖.css

p{
    color:green;
}

实际颜色：红色

情形2：

<style type="text/css">
p {
    color:red;
}
</style>
<link rel="stylesheet" href="样式的覆盖.css" type="text/css" media="screen" title="no title" charset="utf-8"/>

样式的覆盖.css 同情形1

实际颜色：绿色

情形3：

html

<style type="text/css">
@import url("样式的覆盖.css");
p {
    color:red;
}
</style>

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

情形4：

html 同情形2

样式的覆盖.css

@import url("样式的导入.css");
p{
    color:green;
}

样式的导入.css

p{
    color:blue;
}

绿色

情形5：

html 同情形2

样式的覆盖.css 同情形4

样式的导入

p{
    color:blue !important;
}

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

6.样式表的规划与管理

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

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

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

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