【CSS】我的样式哪里来的?—— css的继承性

在之前我们写css的时候,曾经出现过如下这样一种情况:

6继承性.html(head部分)

 1     <style>
 2         div {
 3             background-color: #ccc;
 4             font-size: 30px;
 5             font-family: "微软雅黑";
 6             color: red;
 7             height: 300px;
 8             font-weight: 700;
 9         }
10     </style>

6继承性.html(body部分)

1     <div>
2         <ul>
3             <li>item1</li>
4             <li>item2</li>
5             <li>item3</li>
6         </ul>
7     </div>

实现效果:

 

 Q:从网页中我们可以看出<li></li>标签更改了样式,但是在代码里我们并没有对其进行任何设置,那么他的样式是哪里来的呢??

     我们在css里更改了<div></div>标签的样式,这两者之间有没有什么关系呢??

     因为我们使用的是谷歌浏览器,所以我们可以右键“检查”来亲自看一下源代码,看看到底发生了什么。

 左边是html代码,右边style标签下是css,我们可以通过选中左边的某一个标签,来看一下该标签上的css样式。我们选中li标签,注意到右边css中有一行提示

 意思是继承于ul标签,但是ul标签我们也没有设置css啊,于是继续往下翻,我们注意到另一行提示

 继承自div标签。。破案了。。原来li标签的样式是来自于他的祖辈div标签。并且我们注意到不是所有的div样式都进行了继承,浏览器也进行了不同的颜色区分。

这就是css的继承性。

 最后总结一下,所谓继承性,就是指css中有一部分属性可以被继承,比如文字和文本的属性color,font-size,font-family,font-*、text-*。即便标签本身不设置,也能被加载。

 

posted @ 2019-09-16 10:16  GG-Boy改  阅读(253)  评论(0编辑  收藏  举报