css属性继承
很多时候在编辑css样式的时候,多多少少会遇到一些冲突问题。有些时候这些冲突是因为你给一个元素多个相同属性,但属性值不同,有些时候是因为css属性自带的继承问题,那么今天我们就来详细聊聊css属性的继承。
<style type="text/css">
body{
font-size: 14px;
font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
}
</style>
<body>
<div>
<p>我是一段文字</p>
<span>我是一段文字</span>
</div>
</body>
上面的例子表明上看是给body这个元素文字大小为14像素,文字字体是”\5FAE\8F6F\96C5\9ED1”, Helvetica, sans-serif,但是我们发现,当我们不去单独设置div、p、span这些标签里面的样式的时候,body下面所有元素里面的文字,都会有上述样式,那么这就是子级元素从父级元素继承的css属性。
css继承在不知不觉中影响着我们的代码,这样的影响不能说不好,也不能说有多坏,只不过是在适当的时候用就是高效的,有时候又会影响我们的正常书写,只要我们知道有这样的一个继承,并且去注意就好。
那么哪些css属性是可以继承的呢?
文本相关属性:
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
列表相关属性:
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
哪些又是不可继承的属性呢?
不可继承的:
display、margin、border、padding、background、height、
min-height、max-height、width、min-width、max-width、overflow、
position、left、right、top、bottom、z-index、float、clear、
table-layout、vertical-align、page-break-after、
page-bread-before和unicode-bidi
所有元素可继承:visibility和cursor
终端块状元素可继承:text-indent和text-align