网站css样式调整之css的继承方式
2016-07-24 17:08:21
734
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
