CSS 可继承属性总结
CSS中有一类属性具有继承性，即父元素设置的这些属性值会自动传递给子元素。了解这些可继承属性对于高效编写CSS非常重要。
文本相关属性
字体属性
font-family- 字体族font-size- 字体大小font-style- 字体样式（italic等）font-weight- 字体粗细font-variant- 字体变体（small-caps等）font- 字体简写属性
文本属性
color- 文本颜色line-height- 行高letter-spacing- 字符间距word-spacing- 单词间距text-align- 文本对齐方式text-indent- 首行缩进text-transform- 文本转换（uppercase等）text-decoration- 文本装饰（但注意a标签默认不继承text-decoration）direction- 文本方向white-space- 空白处理方式
列表属性
list-style-type- 列表项标记类型list-style-position- 列表项标记位置list-style-image- 列表项标记图像list-style- 列表简写属性
表格属性
border-collapse- 表格边框合并方式border-spacing- 表格边框间距caption-side- 表格标题位置empty-cells- 空单元格显示方式
其他属性
cursor- 鼠标指针样式visibility- 元素可见性quotes- 引号样式orphans- 控制分页时段落最小行数widows- 控制分页时段落末尾最小行数
不可继承的常见属性
以下是一些常见的不可继承属性：
- 盒模型属性：
width,height,margin,padding,border等 - 定位属性：
position,top,right,bottom,left,z-index等 - 背景属性：
background,background-color,background-image等 - 显示属性：
display,float,clear等
继承控制
可以使用以下值显式控制继承行为：
inherit- 强制继承父元素的值initial- 使用属性的初始值unset- 如果是可继承属性则继承，否则使用初始值
实际应用技巧
- 在
body或:root上设置基础字体、颜色等，让整个页面继承 - 对于需要覆盖继承值的情况，直接在元素上设置新值
- 使用
inherit关键字可以明确表示要继承父元素的值
理解CSS属性的继承特性可以帮助减少重复代码，创建更一致的设计系统。