CSS三大特性之继承性

原创 2016年08月25日 23:50:17

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>





版权声明:本文为博主原创文章,未经博主允许不得转载。

css的三大特性(继承,层叠,优先级)

一,继承 24-css三大特性之继承性.html div{ color: red; font-size:...
  • haha_hello
  • haha_hello
  • 2017年02月10日 17:51
  • 1113

CSS样式表继承详解

原文链接:http://www.cnphp.info/css-style-inheritance.html 最近在恶补css样式表的基础知识。上次研究了css样式表之冲突问题详解 。这...
  • liliiii
  • liliiii
  • 2015年05月22日 14:41
  • 457

[CSS]CSS的继承性、层叠性、权重

CSS像艺术家一样优雅,像工程师一样严谨继承性CSS样式具有继承性,所谓的继承性,就是给某些元素设置样式时,后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 color属性设置字体颜色,后代自...
  • xf616510229
  • xf616510229
  • 2016年12月13日 22:33
  • 1181

CSS元素的继承性

继承性:在CSS中当在某个元素中定义了某个属性值时,其包含的各种元素都会使用这个值,不是所有的CSS 属性都会具有继承性,合理的使用CSS的各种继承性,可以更方便的对各种效果进行控制。     ...
  • woshisap
  • woshisap
  • 2013年01月08日 14:48
  • 1380

css样式的层叠和继承

CSS的层叠 1)浏览器求索css层叠的优先级      元素内嵌样式(用元素的全局属性style定义的样式)>文档内嵌样式(定义在style元素中的样式)>外部样式(用link元素导入的样式)>...
  • bboyjoe
  • bboyjoe
  • 2015年07月03日 14:11
  • 857

HTML+CSS之CSS的继承、层叠和特殊性 (6)

本文继续学习CSS的继承、层叠和特殊性。
  • delphiwcdj
  • delphiwcdj
  • 2015年03月03日 23:57
  • 5992

【CSS】哪些样式属性可以继承

不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-wid...
  • hicoldcat
  • hicoldcat
  • 2017年03月21日 16:04
  • 1023

CSS的三大特性记录

CSS三大特性包括继承性、层叠性、优先级。
  • chenlinwei5
  • chenlinwei5
  • 2017年02月06日 21:33
  • 161

CSS 哪些属性默认会继承, 哪些不会继承

不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-widt...
  • liaozhongping
  • liaozhongping
  • 2015年08月02日 09:29
  • 2302

w3c标准 - Css - (2)继承

w3c标准 - Css - (2)继承 Css有全局作用域和局部作用域,全局作用域就相当于我们为整个html文档定义的属性和浏览器自己默认的属性设置,就像下图中黄色框标注的部分,局局部作用域就像红色标...
  • It_rod
  • It_rod
  • 2017年03月12日 15:17
  • 343
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS三大特性之继承性
举报原因:
原因补充:

(最多只允许输入30个字)