CSS - 样式继承与覆盖
2016-12-09 本文已影响594人
葶寳寳
样式继承（分类）
- 文本相关属性
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent, texttransform,word-spacing
font-size是比较特殊的，他可以按相对值进行继承。这个特性会广泛应用于响应式设计相关的屏幕适配技术。
- 列表相关属性
list-style-image, list-style-position,
list-style-type, list-style
- 还有一个color属性
注： 不需要记住所有的，用的时候现查就可以了。当然你得记住几个重要分类。
样式覆盖
-
根据引用方式确定优先级
优先级依次提高：外部链接 < 写在style标签里 < 内联属性也就是“内联属性”里的会覆盖前面两种，“写在style标签里”的会覆盖写在外部文件里，用“外部链接”引进来的。
如果在同一个级别里，几乎只有一个规则，后写的覆盖先写的。栗子：
//这是写在外部文件里的
h1 { color: #ffffff;}
//这是写在html里的
<head>
<link rel="stylesheet" href="styles.css" />
<style> h1 { color: #444245; } </style>
</head>
<body>
<h1 style="color:#123456">我的颜色到底是啥？</h1>
</body>
最后看到的颜色是#123456,因为内联属性设置的值优先级最高，所以覆盖了前面。
- 后写覆盖先写
栗子：
//这是写在外部文件style.css里的
h1 { color: #ffffff;}
h1 { color: #dddadd;}
//这是写在html里的
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>我的颜色到底是啥？</h1>
</body>
#dddadd最后为#dddadd 因为后写的会覆盖先写的，几乎所有的解释型语言都是这样的.
- 选择器优先级
CSS的样式覆盖，在选择器不同的情况下，我们给每种选择器制定一个权值，计算命中一个元素的所有选择器的总权值，值高者获胜
元素选择器： 1
类选择起器： 10
ID选择器： 100
内联选择器： 1000
栗子：
//HTMl部分：
<section id="content">
<p class="abstract">这里是Abstract</p>
<p>这里是普通的</p>
</section>
//CSS部分：
#content p { color: red}
.abstract { color: black;}
p的color最后为red.因为#content p 的权值是101， .abstract的权值是10
-
important
在样式上加了important，前面所有的规则都忽略 加了important的代码样子如下：
p { color: white !important;}
栗子：
// HTMl部分：
<section id="content">
<p class="abstract" style="color: blue;">这里是Abstract</p>
<p>这里是普通的</p>
</section>
//CSS部分：
#content p { color: red}
.abstract { color: black !important;}
p的color属性为black， 因为.abstract里设置的color属性标记为 !important了。所它忽视一切的规则。
