CSS三大特性之继承性

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/k491022087/article/details/52319252

CSS有三大特性,分别是继承性,层叠性,优先级,这里讲解继承性

继承性是指指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性,例如下面的代码,div中包含2个p标签,1个span标签,当给div设置字体颜色为红色时,他的子标签会继承父元素的属性,因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>苹果</p>
        <p>香蕉</p>
        <span>葡萄</span>
    </div>
</body>
</html>

显示结果如下:

但是继承也会有其特殊性主要有以下三种:

1> a 标签的字体颜色不能被继承,例如将上面代码的div标签中代码改为如下的代码后,a标签的字体颜色是不会改变的,通过页面的F12可以查看得到,a标签是有一个默认的       color-webkit-link;字体颜色属性,所以给父元素设置颜色是不能改变a标签字体的颜色

<div>
    <p>苹果</p>
    <p>香蕉</p>
    <span>葡萄</span>
    <a href="#">这是a标签</a>
</div>


2> h标签字体的大下也是不能被继承的,如下代码给父元素在设置一个字体属性20px,在div中添加一个h2标签,在浏览器中可以发现h2标签中的字体大小不会改变,因为h2标签中也有一个默认的默认的font-size1.5em;字体大小属性,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>苹果</p>
        <p>香蕉</p>
        <span>葡萄</span>
        <a href="#">这是a标签</a>
        <h2>这是h2标签</h2>
    </div>
</body>
</html>


3> div 标签的高度如果不设置由内容来决定(没有内容高度为0),宽度默认由父元素继承过来,下面的代码就很好的演示了div的宽高,在每个div标签后面添加了一个br标签来强制换行,因为如果不使用br标签来强制换行的话,div就会紧紧挨着一起,看不不出来div的高度,第一个div因为没有内容,所以在浏览器上不显示出来,而第二div里面添加了一句话,但是高度是由里面的内容撑出来的,第三个div里面也是一句话,并且在内容当中使用了一个br标签来强制换行,这样就会发现该div的高度会比第二div的高度要高,如果继续向div标签里面添加内容,高度也会随之相应的变高。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <br/>
    <div>这是div标签</div>
    <br/>
    <div>这也是<br/>div标签</div>
</body>
</html>





阅读更多

没有更多推荐了,返回首页