网站css样式调整之css的继承方式

作者:日期:2016-07-24 17:08:21 点击:802 css

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

哪些又是不可继承的属性呢?

不可继承的:

displaymarginborderpaddingbackgroundheight

min-heightmax-heightwidthmin-widthmax-widthoverflow

positionleftrighttopbottomz-indexfloatclear

table-layoutvertical-alignpage-break-after

page-bread-before和unicode-bidi
所有元素可继承:visibilitycursor

终端块状元素可继承:text-indenttext-align
 

上一篇: 网站css样式调整之文字样式的控制

下一篇: 元素的基础属性之display