1. 什么是css继承?
css样式的继承值得是,特定的css属性向下传递到子元素。
下面看一下css的例子:
.TestInheritDiv {
color: red;
}
<div class="TestInheritDiv">
<p>This is used to test the css.<em>The test is in child</em></p>
</div>
从上面的例子可以看到,我们仅仅定义了拥有class属性值为TestInheritDiv的div元素设置字体颜色为红色,但是其内部的p元素以及p元素的子元素em的字体均设置为红色。这就是继承。
2. 继承
Css有全局作用域和局部作用域,全局作用域就相当于我们为整个html文档定义的属性和浏览器自己默认的属性设置,就像下图中黄色框标注的部分,局局部作用域就像红色标注的地方。还有像类选择器,属性选择器,其实这些属性针对当前应用到的元素都是一个相对应的全局作用域,因为这个不是仅仅是对应某一个标签,而是对应到某一类标签,其实也可以理解成,这个属性的设置没有设置到具体的某一个元素上,例如一个class属性,那它就相当于是在html元素定义的属性,所有的匹配这个class的元素都会应用这个属性,当然不是所有的属性都会继承,后面会有介绍。
(1)继承属性总结
背景属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
background | 设置背景属性 | No | Yes | ||
background-color | 规定要使用的背景颜色 | No | Yes | ||
background-position | 规定背景图像的位置 | No | Yes | ||
background-size | 规定背景图片的尺寸 | No | Yes | ||
background-origin | 规定背景图片的定位区域 | No | Yes | ||
background-repeat | 规定如何重复背景图像 | No | Yes | ||
background-clip | 规定背景的绘制区域 | No | Yes | ||
background-attachment | 规定背景是否固定或者随着页面的其余部分滚动 | No | Yes | ||
background-image | 规定要使用的背景图像 | No | Yes | ||
文本属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
color | 设置文本颜色 | Yes | Yes | ||
direction | 规定文本的方向 | Yes | Yes | ||
line-height | 设置行高 | Yes | Yes | ||
letter-spacing | 设置字符间距 | Yes | Yes | ||
text-align | 对齐元素中的文本 | Yes | Yes | ||
text-decoration | 向文本中添加修饰 | No | Yes | ||
text-indent | 缩进元素中文本的的首行 | Yes | Yes | ||
text-shadow | 设置文本阴影 | Yes | Yes | ||
text-transform | 控制元素中的字母 | Yes | Yes | ||
white-space | 设置元素中空白的处理方式 | Yes | Yes | ||
word-spacing | 设置字间距 | Yes | Yes | ||
字体属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
font | 简写属性 | Yes | Yes | ||
font-family | 设置字体系列 | Yes | Yes | ||
font-size | 设置字体的尺寸 | Yes | Yes | ||
font-style | 设置字体风格 | Yes | Yes | ||
font-variant | 以小型大写字体或者正常字体显示文本 | Yes | Yes | ||
font-weight | 设置字体的粗细 | Yes | Yes | ||
列表属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
list-style | 简写属性,用于把所有用于列表的属性设置在一个声明中 | Yes | Yes | ||
list-style-image | 将图片设置为列表项标志 | Yes | Yes | ||
list-style-position | 设置列表项中列表项标志的位置 | Yes | Yes | ||
list-style-type | 设置列表项标志的类型 | Yes | Yes | ||
表格属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
border-collapse | 设置是否把表格单元合并为单一的边框 | Yes | Yes | ||
border-spacing | 设置分隔单元格边框的距离 | Yes | Yes | ||
caption-side | 设置表格标题的位置 | Yes | Yes | ||
empty-cells | 设置是否显示表格中的空单元格 | Yes | Yes | ||
table-layout | 设置显示单元、行和列的算法 | Yes | Yes | ||
轮廓属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
outline | 在一个声明中设置所有的轮廓属性 | No | Yes | ||
outline-color | 设置轮廓的颜色 | No | Yes | ||
outline-style | 设置轮廓的样式 | No | Yes | ||
outline-width | 设置轮廓的宽度 | No | Yes | ||
盒子属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
padding | 简写属性,作用是在一个声明中设置元素的所在内边距属性 | No | Yes | ||
padding-bottom | 设置元素的下内边距 | No | Yes | ||
padding-left | 设置元素的左内边距 | No | Yes | ||
padding-right | 设置元素的右内边距 | No | Yes | ||
padding-top | 设置元素的上内边距 | No | Yes | ||
border | 简写属性,用于把对四个边的属性设置在一个声明中。 | No | Yes | ||
border-style | 用于设置元素所有边框的样式,或者单独的为各边设置边宽样式 | No | Yes | ||
border-width | 简写属性,用于元素的所有边框设置宽度,或者单独的为各边边框设置宽度 | No | Yes | ||
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或者为4个边分别设置颜色 | No | Yes | ||
margin | 简写属性,在一个声明中设置所有外边距属性 | No | Yes | ||
margin-bottom | 设置元素的下外边距 | No | Yes | ||
margin-left | 设置元素的左外边距 | No | Yes | ||
margin-right | 设置元素的右外边距 | No | Yes | ||
margin-top | 设置元素的上外边距 | No | Yes | ||
定位属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 | No | Yes | ||
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | No | Yes | ||
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | No | Yes | ||
bottom | 定义了定位元素下外边距边界与其包含块下边 界之间的偏移。 | No | Yes | ||
left | 定义了定位元素左外边距边界与其包含块左边 界之间的偏移。 | No | Yes | ||
overflow | 设置当元素的内容溢出其区域时发生的事情。 | No | Yes | ||
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 | No | Yes | ||
vertical-align | 设置元素的垂直对齐方式。 | No | Yes | ||
z-index | 设置元素的堆叠顺序。 | No | Yes | ||
尺寸属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
height | 设置元素的高度 | No | Yes | ||
line-height | 设置行高 | Yes | Yes | ||
max-height | 设置元素的最大高度 | No | Yes | ||
max-width | 设置元素的最带宽度 | No | Yes | ||
min-height | 设置元素的最小高度 | No | Yes | ||
min-width | 设置元素的最小宽度 | No | Yes | ||
width | 设置元素的高度 | No | Yes | ||
分类属性 | |||||
属性名 | 解释 | 继承性 | 是否属性值中拥有inherit | ||
clear | 设置一个元素的侧面是否允许其他浮动的元素 | No | Yes | ||
cursor | 规定当指向某元素之上时显示的指针类型 | Yes | Yes | ||
display | 设置是否及如何显示元素 | No | Yes | ||
float | 定义元素在哪个方向浮动 | No | Yes | ||
position | 把元素放置到一个静态的,相对的,绝对的,或者固定的位置 | No | Yes | ||
visibility | 设置元素是否可见或不可见 | Yes | Yes | ||
(2)下面的我会对着分类中的一些属性值进行举例
a. 首先是background属性:大家看一下下面的代码:
<div background-style="background-div">
<div background-style="no-div"></div>
<p background-style="background-p">This the content in element p.</p>
</div>
[background-style="background-div"] {
background: green;
/*visibility: hidden;*/
}
[background-style="no-div"] {
width: 200px;
height: 300px;
/*background: inherit;
visibility: visible;*/
}
[background-style="background-p"] {
/*background: inherit;
visibility: visible;*/
}
首先是将最外层的div设置属性,背景颜色是green,先看一下当前代码执行的结果,可以看到外层div的背景色是hreen,但是里层的div以及p标签没有自动继承外层的背景颜色,
为了将更好的展示效果,我再给内层标签加上inherit属性的同时将外层的visibility设为hidden,然后将内层的visibility设置为visible,这样我们看到的效果就不会受到外层div的影响.
Note: 我们也可以看到inherit的作用,继承父元素的属性。
b. Color属性
<div text-style="text-div">
<div text-style="no-div">
<span>The content is in the div</span>
</div>
<p text-style="text-p">This the content in element p.</p>
</div>
[text-style="text-div"] {
color: red
}
[text-style="no-div"] {
/*color: inherit;*/
}
[text-style="text-p"] {
/*color: inherit;*/
}
先看一下在没有inherit的情况下页面的显示以及应用在element上的样式,可以看出在文本属性里具有继承性的属性是不用自己加上属性就可以继承父元素上的文本属性。
然后我们在加上inherit的效果
其实可以看到页面上的效果是没有变化的,有变化的是样式上内容的变化,此时应用的样式应用的color:inherit,相信大家也有疑问,既然具有继承性的属性自己可以继承那对于当前的属性还有inherit岂不是多此一举吗?其实我也有这个疑问,我的理解是:
代码上能地表明要继承于父元素的样式属性,可以在我们查看元素属性时一眼看出来这个元素的属性是哪一个。还有一种情况是受到浏览器默认样式的影响的情况下,需要显示的要求继承父元素的属性,而不是浏览器的属性值,这个示例可以看后面的list-style-type.
代码上能地表明要继承于父元素的样式属性,可以在我们查看元素属性时一眼看出来这个元素的属性是哪一个。还有一种情况是受到浏览器默认样式的影响的情况下,需要显示的要求继承父元素的属性,而不是浏览器的属性值,这个示例可以看后面的list-style-type.
c. text-decoration
<div text-style="text-div">
<div text-style="no-div">
<span>The content is in the div</span>
</div>
<p text-style="text-p">This the content in element p.</p>
</div>
[text-style="text-div"] {
text-shadow: 10px 10px 5px red;
}
[text-style="no-div"] {
}
[text-style="text-p"] {
}
我们看一下文本属性里的这个和别人不一样的两个属性text-decoration,我们看一下页面上的显示
在上面的总结中标识的是text-decoration是没有继承性的,但是现在我们看到的效果是子元素中仍然应用了父元素的样式,这是为什么呢?相信大家细致的发现了黄色框标注的情况,chorme浏览器可能看到结果不太明显,但是还可以看到text-decoration是具有透明度的。
我们再看一下上面ie浏览器上的显示,大家已经发新在子元素中根本就没有一行代码类似于color属性的继承于父元素的,这是什么原因呢,其实这个属性确实是没有继承的,w3c上的解释是:text-decoration如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。
所以对这个属性我们的理解还是不能继承的,只是在子元素没有设置的时候,会向下延伸,这里不能说是继承了,毕竟属性本身行为与继承属性的行为不同。
所以对这个属性我们的理解还是不能继承的,只是在子元素没有设置的时候,会向下延伸,这里不能说是继承了,毕竟属性本身行为与继承属性的行为不同。
d. list-style-type
<div list-style="list-div">
<ul list-style="list-ul">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
[list-style="list-div"] {
list-style-type: circle;
}
[list-style="list-ul"] {
/*list-style-type: circle;*/
}
从上面表格中可以看出list-style-type属性是具有继承性的,然后看一下当前页面上的展示
当前页面上按照属性继承的情况来看应该是显示的是列表的style应该是空心圆,但是显示的实心园,相信大家也看到在浏览器的样式上面红色框标注的地方,因为当前元素应用的是user agent style,所以子元素没有继承到父元素的属性,这个时候inherit就可以排上用场了,可以让子元素继承父元素的属性,而不是适应浏览器的属性。