课时84.继承性(掌握)

1.什么是继承性?

作用:给父元素设置一些属性,子元素也可以使用,这个我们称之为继承性。

结果是页面字体颜色变红了,我们给div设置了颜色为红色,p就使用了这个属性,这就是CSS的继承性。

注意点:

1.并不是所有的属性都可以继承,只有以color/font-/text-/line开头的属性才可以继承

我们先来看看开发者属性的另外一些东西

我们这里有一个inherited from div

意思是从div中继承了这个属性

接下来,我们来验证不是以color/font-/text/line开头的属性不能继承,我们在style中添加一个font-size:30px;我们发现

这个字体大小也被继承了

然后我们再添加一个background:skyblue;

我们发现color和font-size特别亮,background不亮,说明根本没有被继承过来。

2.在CSS的继承中不仅仅是儿子可以继承,只要是后代都可以继承

我们发现我是段落也变为蓝色了,字体也变为30px了,颜色也是红色了,这是的p不是儿子,只是div的一个后代,什么是后代,只要某一个标签被放到另一个标签里面了,它就是另一个标签的后代了。

3.CSS继承性中的特殊性

3.1 a标签的文字颜色和下划线是不能继承的

字体没有变为红色我们再来看一下下划线问题

我们再style中添加去掉下划线的语句

我们发现a标签还是有下划线的,也因此可以验证了我们的一个说法,a标签不能通过继承来改变下划线

3.2 h标签的文字大小是不能继承的

理论上我设置了div,通过继承性应该可以改变h1的大小,而实际上却没有更改大小

那么我们该怎么设置h1的大小呢?

我们只能通过这个方式来修改

在谷歌浏览器的开发者工具中查看:

没有被继承的要么显示非常暗,要么就会被划掉

而且如果真正被继承的,上面一定有一句inherited from....

应用场景:

一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。

我们通常设置body{}

我们为什么要给body设置呢?

因为我们之前讲过,body中的内容都是用户要查看的内容,其它标签都是写在body里面的,所以要设置了body,其它的也都设置了。

在以后的开发中,我们经常会给body设置一些页面上共性的东西,例如文字大小,颜色等等。

猜你喜欢

转载自www.cnblogs.com/luckyshuangshuang/p/9171536.html
今日推荐