css中属性值继承的示例分析-创新互联
这篇文章主要介绍了css中属性值继承的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联公司专业为企业提供柏乡网站建设、柏乡做网站、柏乡网站设计、柏乡网站制作等企业网站建设、网页设计与制作、柏乡企业网站模板建站服务,十余年柏乡做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性。
1.css可以和不可以继承的属性
不可继承的: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。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。
2.值的继承
继承也是基于文档树的,文档树中元素的某些属性可以被其子元素继承,每一个CSS属性都定义了它能否被继承。要设定文档的某些缺省样式属性,可以在文档树的根上设定该属性,如果这个属性可以继承,则其后代元素将继承这个属性,例如color、font-size等属性。
3.“inherit(继承)”值
每一个属性可以指定值为“inherit”,即:对于给定的元素,该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值,它可以通过显式地指定“inherit”而得到加强,例如:
p { font-size: inherit; }
4.继承的局限性
继承虽然减少了重复定义的麻烦,但是,有些属性是不能继承的,例如border(边框)、margin(边距)、padding(补白)和背景等。
这样设定是有道理的,例如,为一个
同时,浏览器的缺省样式也在影响着继承的结果。例如:
body { font-size: 12px; }
2级标题的文字不是12px。
// H2中文字将是标题2样式的文字而非12px大小的文字。
这是因为浏览器的缺省样式设定了
的CSS规则。
同时,有些老版本的浏览器可能对继承支持的不太好,例如某些浏览器当遇到