css那些事儿（3）样式优先级和样式表的管理
1.样式覆盖
1 p { 2 color:#0000FF; /* 将文字定义为蓝色 */ 3 } 4 p { 5 color:#FF0000; 6 }
同一选择器，同一属性，后面定义的会覆盖前面定义的。
2.样式继承
1 body { 2 font-size:12px; 3 } 4 p { 5 color:#FF0000; 6 }
p也将用body定义的文字属性。
3.根据样式定义的优先级
网页中定义样式分为四种，按优先顺序排序：
- html标签中style属性，
- 开发者写的css文件（包括.css文件和<style></style>标签两种形式）
- 使用浏览器浏览网页的用户定义的样式，
- 浏览器默认的样式。
另外，允许开发者（用户）对样式有更多的控制力，可以使用!important关键字对属性设置声明，其优先级高于以上四种。
!imoprtant的使用方式：
1 p { 2 color:blue !important; 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
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
1 p{ 2 color:green; 3 }
实际颜色：红色
情形2：
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 同情形1
实际颜色：绿色
情形3：
html
<style type="text/css"> @import url("样式的覆盖.css"); p { color:red; } </style>
红色，不管@import放在前面还是后面
情形4：
html 同情形2
样式的覆盖.css
1 @import url("样式的导入.css"); 2 p{ 3 color:green; 4 }
样式的导入.css
1 p{ 2 color:blue; 3 }
绿色
情形5：
html 同情形2
样式的覆盖.css 同情形4
样式的导入
1 p{ 2 color:blue !important; 3 }
绿色，!important此时没有提升优先级的效果
6.样式表的规划与管理
简单站点可以只使用一个css样式文件。
大型复杂站点，可以将css样式文件分为2部分：页面的全局定义以及处理页面基本布局的css样式文件、处理细节方面的css样式文件。
全局文件在布局确定之后就很少再需要去动，减少修改样式过程中意外地破坏页面布局等的可能性。
细节文件还可以再细分，比如表单的、文字信息、列表等。但不建议这样做，因为会增加http请求的次数。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
