概念
yuhuo2021-06-28CssCss基础
1. 应用位置
<html>
<head>
<!-- 外部样式（必须放在head标签内） -->
<link rel="stylesheet" type="text/css" href="./style.css">
<style type="text/css">
/* 外部样式 */
@import "./style.css";
/* 文档样式 */
body {
color: black;
}
</style>
</head>
<!-- 内联样式 -->
<body style="color: black;">
</body>
</html>
2. 层叠优先级
!important > 选择器优先级 > 位置优先级 > 继承
同等优先级下， 后定义 > 前定义
- 位置优先级：内联样式 > 文档样式 > 外部样式 > 浏览器样式
- 选择器优先级：内联选择器 > id 选择器 > 类选择器 > 标签选择器...（特指度↑ 优先级↑）
3. 继承
可继承的属性：
- 字体相关：
font-family、font-style、font-size、font-weight等； - 文本相关：
text-align、text-indent、text-shadow、letter-spacing、word-spacing、word-break、white-space、line-height、color、hyphens等； - 列表相关：
list-style、list-style-image、list-style-type、list-style-position等； - 其他属性：
visibility、cursor等；
相关属性值：
inherit：强制继承父元素对应属性的属性值；initial：应用该属性的默认值；unset：可继承使用继承 ，否则使用默认值（相当于不设置）；revert：还原为浏览器默认设置；
注意
继承只会向下传播给后代，只有当 html 没设背景时，body 的 background 属性会完全转移到 html 上，body 自身背景失效。
注意
initial 和 revert 的区别，比如 font-weight 默认值是 400，但是在 <b> 元素中浏览器默认设置 font-weight 的值为 bold。即对一个 <b> 元素而言：
font-weight: initial; = font-weight: 400;
font-weight: revert; = font-weight: bold;
4. 上右下左省略规则
对于属性值为 *top* *right* *bottom* *left* 4个值组成的，有通用省略规则：
从右往左省略，左值省略时同右值，下值省略时同上值，右下左值省略时同上值。
示例：
a b c=a b c ba b=a b a ba=a a a a
5. 厂商前缀
-moz-：FireFox-ms-：IE-webkit-：Chrome，Safari