CSS03——样式继承与层叠
CSS03样式继承与层叠
原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/taotaoyouarebaby/article/details/8764521
继承：指应用在一个标签上的CSS属性被传到嵌套标签上的过程。
body{
font-family: Arial, Serif;
}
body的子标签就能够继承body的字体属性。
继承的优先级：最近的祖先样式胜出。
直接应用的样式胜出。
//html结构
<body>
<p>
<strong></strong>
</p>
</body>
//css内容
body{font-family: Arial; color:#FF99BA;}
p{color: #616161; font-size:18px;}
strong{font-size: 24px; font-family:Times;}
p将只会继承body的font-family属性；strong只会继承p的color属性。
层叠：样式的属性就用规则。指定浏览器如何处理同一标签中应用的多个样式（样式冲突）。
属性冲突规则（同一标签的多个样式）：优先级1. 权重大的胜出。
2. 相同权重：后导入的样式>先导入的样式。
权重：www.w3.org/TR/CSS21/cascade.html#specificity
样式类别
权重
标签样式、伪元素(eg:first-line)
1
类样式、伪类(eg:link)
10
ID样式
100
派生样式
所涉及样式的权重总和。
内联样式（行内样式）
1000
属性后加!important，IE6不支持。
在该属性上忽略权重值。利用此处的属性值。
内联样式：
A：<span id="demo" style="color:red "></span>
B：JS控制的内联样式style对象，
document.getElementById("demo").style.color="red";这两者属于同一级别，不过一般情况是JS控制的内联样式优先级高，这与先后顺序申明有关系与本质无关，因为往往DOM操作是在DOM树加载完毕之后。
！important
#nav a{color:red;} /*权重本大于下面的标签选择器*/
a{color:blue !important;} /*则所有a元素都为blue.*/
示例：
selector
id
class
tag
total权重
p
0
0
1
1
.byline
0
1
0
10
p.byline
0
1
1
11
#banner
1
0
0
100
#banner p
1
0
1
101
#banner .byline
1
1
0
110
a:link
0
1
1
11
p:first-line
0
0
2
2
h2 strong
0
0
2
2
#wrapper #content .byline a:hover
2
2
1
221
工具：Firefox扩展:View Formatted Source(https://addons.mozilla.org/zh-cn/firefox/
addon/view-formatted-source-format-s/).
，继承来的属性没有权重，或者说是权重为0。
选择性覆盖网站全局样式(global.css)设置了h1，但在主页想修改h1(home.css)。
<link rel=”stylesheet” type=”text/css” href=”global.css” />
<link rel=”stylesheet” type=”text/css” href=”home.css” />
原理：规则2.
CSS reset(浏览器内建样式重置)：//reset.css
/* reset browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
ol {
margin-left: 1.4em;
list-style: decimal;
}
ul {
margin-left: 1.4em;
list-style:square;
}
img {
border: 0;
}
/* end reset browser styles */