CSS继承含义
CSS继承是指设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。
可以被继承的属性
- 字体系列属性:
font-family:
规定元素的字体系列。font-weight:
设置字体的粗细。font-size:
设置字体的尺寸。font-style:
设置字体的风格。font-variant:
设置小型大写字母的字体显示文本,所有的额小写字母都会转换成大写字母,但是与其他文本对比,字体尺寸更小。font-size-adjust:
为某个元素规定一个aspect值,可以保持首选字体的x-height。
- 文本系列属性:
text-indent:
文本缩进。text-align:
文本水平对齐。line-height:
行高。word-spacing:
改变单词(字)之间的间隙。letter-spacing:
改变字符之间的间隙。text-transform:
控制文本大小。direction:
规定文字的书写方向。color:
文本的颜色。 注意:a链接可以继承其父元素的color属性,但是不显示,被浏览器默认样式覆盖了。
- 元素可见属性:
visibility
。 - 表格布局属性:
caption-side、border-collapse、border-spacing、empty-cells、table-layout、
。 - 列表布局属性:
list-style-type、list-style-image、list-style-position、list-style
- 生成内容属性:
quotes
。 - 光标属性:
cursor
。 - 页面样式属性:
page、page-break-inside、windows、orphans
- 声音样式属性:
speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、animuth、elevation
。
没有继承性的属性:
display:
规定元素生成框的属性。- 文本属性:
vertical-align:
垂直文本属性。text-decoration
:规定添加到文本的装饰text-shadow
:文本阴影效果white-space
:空白符的处理unicode-bidi
:设置文本的方向
- 盒子模型属性:
bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
- 背景属性:
background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性:
float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- 生成内容属性:
content、counter-reset、counter-increment
- 轮廓样式属性:
outline-style、outline-width、outline-color、outline
- 页面样式属性:
size、page-break-before、page-break-after
- 声音样式属性:
pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
所有元素可以继承的属性
- 元素可见属性:
visibility
- 光标属性:
cursor
内联元素可以继承的属性:
- 字体系列属性。
- 除
text-align、text-indent
之外的文本系列属性。
块级元素可以继承的属性:
text-align、text-indent