首页 >web前端 >css教程 >css属性继承有哪些?css中可继承的属性和不可继承属性的总结

css属性继承有哪些?css中可继承的属性和不可继承属性的总结

不言
不言原创
2018-07-27 16:30:0415785浏览

所谓继承就是指html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性。那么,css哪些属性能继承,哪些属性不能继承呢?下面我们就来看看css中属性继承的内容。

首先我们来看一下css优先级:

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。

常用的css不可继承的属性

display:规定元素应该生成的框的类型

text-decoration:规定添加到文本的装饰

text-shadow:文本阴影效果

white-space:空白符的处理

盒子模型的属性:width、height、margin 、border、padding

背景属性:background

定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

常用的css可继承的属性:

font:组合字体

font-family:规定元素的字体系列

font-weight:设置字体的粗细

font-size:设置字体的尺寸

font-style:定义字体的风格

text-indent:文本缩进

text-align:文本水平对齐

line-height:行高

color:文本颜色

visibility:元素可见性

光标属性:cursor

所有元素可以继承的

1、元素可见性:visibility

2、光标属性:cursor

内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

text-indent、text-align

inherit(继承)值

每一个属性可以指定值为“inherit”,即:对于给定的元素,该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值,它可以通过显式地指定“inherit”而得到加强,例如:

p { font-size: inherit; }

继承的局限性

继承虽然减少了重复定义的麻烦,但是,有些属性是不能继承的,例如border(边框)、margin(边距)、padding(补白)和背景等。

这样设定是有道理的,例如,为一个e388a4556c0f65e1904146cc1a846bee设定了边框,如果此属性也继承的话,那么在这个e388a4556c0f65e1904146cc1a846bee内所有的元素都会有边框,这无疑会产生一个让人眼花缭乱的结果。同样的,影响元素位置的属性,例如margin(边距)和padding(补白),也不会被继承。

  同时,浏览器的缺省样式也在影响着继承的结果。例如:

body { font-size: 12px; }

c1a436a314ed609750bd7c7d319db4da2级标题的文字不是12px。// 2e9b454fa8428549ca2e64dfac4625cd H2中文字将是标题2样式的文字而非12px大小的文字。

  这是因为浏览器的缺省样式设定了c1a436a314ed609750bd7c7d319db4da的CSS规则。

同时,有些老版本的浏览器可能对继承支持的不太好,例如某些浏览器当遇到f5d188ed2c074f8b944552db028f98a1的时候,就会丢失所有的继承的属性。

 css属性一旦继承了不能被取消,只能重新定义样式。

 相关文章推荐:

CSS继承元素属性_html/css_WEB-ITnose

css中属性值继承如何使用

 css中属性值继承介绍

以上是css属性继承有哪些?css中可继承的属性和不可继承属性的总结的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn