前提:上周六(8.27)做字节笔试题时,对CSS继承不甚了了,下来查阅资料后,有了此篇文章。
文章思路以下:
-
CSS所有属性分为默认继承和默认不继承
-
CSS所有属性有三种状态
- CSS官方规范 (大哥)
- 浏览器的用户代理样式 (二哥)
- 开发人员自己写的样式文件 (小弟)
-
.CSS四个通用属性值(inherit,initial,unset,revert)
1.默认继承和默认不继承
1.1默认继承
| 标题 | 属性 |
|---|---|
| 所有元素默认继承 | visibility,cursor |
| 文本元素 | letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-indent、text-align、text-shadow、text-transform、direction |
| 列表元素 | list-style |
1.2默认不继承
| 标题 | 属性 |
|---|---|
| 文本元素 | vertical-align、text-decoration、text-overflow |
| 其他略 |
2.CSS属性三种状态
2.1 CSS官方规范
2.2 浏览器的用户代理样式表
2.3 技术人员自己写的样式文件
3.CSS四个通用属性值
| 属性值 | 作用 |
|---|---|
| inherit | 开启继承 |
| initial | 重置元素属性值为CSS官方规范的值(不是浏览器的用户代理样式) |
| unset | 如果是默认继承属性,该样式作用等同于inherit,否则作用等同于initial |
| revert | 效果等同于unset,不过样式恢复时,不会重置到CSS官方规范,而是重置到浏览器代理样式或者技术人员自己写的样式文件 |
3.1 实例
background-color:inherit (为该属性开启了继承,该属性继承父元素的background-color)
left:initial (重置元素属性值为**CSS官方规范**的值,为auto)