温习CSS之CSS继承

112 阅读1分钟

前提:上周六(8.27)做字节笔试题时,对CSS继承不甚了了,下来查阅资料后,有了此篇文章。

文章思路以下:

  • CSS所有属性分为默认继承默认不继承

  • CSS所有属性有三种状态

    • CSS官方规范 (大哥)
    • 浏览器的用户代理样式 (二哥)
    • 开发人员自己写的样式文件 (小弟)
  • .CSS四个通用属性值(inherit,initial,unset,revert)

1.默认继承和默认不继承

1.1默认继承
标题属性
所有元素默认继承visibility,cursor
文本元素letter-spacing、word-spacing、white-space、line-heightcolor、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 浏览器的用户代理样式表

image.png

2.3 技术人员自己写的样式文件

image.png

3.CSS四个通用属性值

属性值作用
inherit开启继承
initial重置元素属性值为CSS官方规范的值(不是浏览器的用户代理样式)
unset如果是默认继承属性,该样式作用等同于inherit,否则作用等同于initial
revert效果等同于unset,不过样式恢复时,不会重置到CSS官方规范,而是重置到浏览器代理样式或者技术人员自己写的样式文件
3.1 实例
background-color:inherit  (为该属性开启了继承,该属性继承父元素的background-color)
left:initial  (重置元素属性值为**CSS官方规范**的值,为auto)

4.最后

文章用于自己熟记和查询,重要参考资料以下:

chokcoco
幻灵尔依