CSS的继承是由所使用的样式属性定义的。换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的。
什么是CSS继承

每一个元素都是文档树的一部分,除了最顶级的HTML元素,每个元素都有其对应的父级元素,每一个父级元素的CSS属性值都可以被应用到它的子元素中去。

举个栗子,H1标签包含着一个EM标签:

EM就是H1标签的子元素,任何H1中继承的CSS属性值会自动在EM标签中生效,比如:

CSS Code复制内容到剪贴板
  1. h1{font-size: 120%;}

由于font-size是默认继承的CSS属性,"很大的"字体也会和H1一样,被放大到120%。
如何使用CSS继承

最简单的方法就是知道CSS所有属性中那些是默认被继承的,如果这个属性被继承,就会知道它会在元素所有子元素中生效。

我们经常在非常顶级的元素上定义基础样式,比如BODY标签,如果在body中设置字体,因为继承,文档中所有元素都会应用这个字体:

CSS Code复制内容到剪贴板
  1. h1{font-size: 120%;}

使用「inherit」值

每个CSS属性的值都包括inherit,属性被定义这个值后,即使这个属性不是默认继承,也会应用父级元素这个CSS属性的值,比如:

CSS Code复制内容到剪贴板
  1. body { margin: 1em; }
  2. p { margin: inherit; }

继承使用计算值(Computed Values)

计算值指的是这个值相对于网页中其他值来定义,这个对于继承属性尤其重要。如果在body中定义font-size:1em,文档中所有元素字体大小并不都是1em,这是因为像H1-H6这类元素的font-size的值是相对大小。H1默认是网页中字体最大的元素,当设置body元素字体大小时,H1-H6会根据这个「平均」大小的字体计算实际的字体大小。

再举一个例子:

按照之前所述,font-size是默认被继承的CSS属性,然而span字体的大小并不是p的80%,而是和p一样大,正是因为继承使用的是计算值,如果p的父级元素的字体大小为30px,p的字体大小计算值为24px,span继承的则是24px,而不是80%。

更多关于计算值可以阅读CSS Computed Value。
background被「继承」

查看backgruound属性,会看到它的继承性是no,也就是默认不被继承的。但是浏览器依旧默认「继承」了这个属性,比如写这么一段:

“很大的”依旧有了黄色的背景,这是因为background属性的初始值(initial value)是transparent(透明),所以看到的黄色背景其实是h1标签的背景。

举例详解CSS中的继承的更多相关文章

  1. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  2. 举例详解CSS中的的优先级

    计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...

  3. 举例详解Python中的split()函数的使用方法

    这篇文章主要介绍了举例详解Python中的split()函数的使用方法,split()函数的使用是Python学习当中的基础知识,通常用于将字符串切片并转换为列表,需要的朋友可以参考下   函数:sp ...

  4. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  5. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  6. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  7. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  8. (转)实例详解CSS中position的fixed属性使用

    关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...

  9. CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法

    :nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...

随机推荐

  1. Java中-XMX -xmn 是什么的缩写

    这个应该是 eclipse 的配置文件 eclipse.ini 中的配置语句.在配置文件中直接传递给 java vm 的参数并不多,调用形式是这样的: 1 eclipse [normal argume ...

  2. printf("%*s\n", 1, ""); 使用"printf();" 的格式化输出动态制定等宽度输出。

    #include <stdio.h> #include <string.h> int main() { const char the_text[] = "this i ...

  3. SPCOMM 接收数据不完整!该如何解决

    SPCOMM 接收数据不完整!该如何解决   SPCOMM 接收数据不完整!我作了一个 读取地磅数据的程序,是用spcomm接收的! 总共有五台地磅,其他4台地磅数据读取都正常.但是有一台接收数据的时 ...

  4. Java中的大数处理类BigInteger和BigDecimar浅析

    这两个类位于java.math包内,要使用它们必须在类前面引用该包:import java.math.BigInteger;和import java.math.BigDecimal; BigInteg ...

  5. 巧用Freemarker的自定义方法

    要想使用Freemarker支持的自定义方法,需要实现freemarker.template.TemplateMethodModel接口,然后将方法对象放入到Freemarker的数据模型中,这样在f ...

  6. SQL Server中易混淆的数据类型

    1)char.varchar.text和nchar.nvarchar.ntextchar和varchar的长度都在1到8000之间,它们的区别在于char是定长字符数据,而varchar是变长字符数据 ...

  7. poj 1789 Truck History 最小生成树

    点击打开链接 Truck History Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 15235   Accepted:  ...

  8. dbf导入Oracle

    如果想通过拷贝数据文件来恢复数据库的话:1.要确定源数据库和目标数据库的安装目录等完全一致,os一致2.把源数据库的控制文件,spfile,密码文件拷贝到目标数据库的相同目录下3.通过源数据库的con ...

  9. Android--ListView显示列表数据

    简单的显示 import android.os.Bundle; import android.app.ListActivity; import android.view.View; import an ...

  10. 基于RBAC模型的通用企业权限管理系统

    1. 为什么我们需要基于RBAC模型的通用企业权限管理系统 管理信息系统是一个复杂的人机交互系统,其中每个具体环节都可能受到安全威胁.构建强健的权限管理系统,保证管理信息系统的安全性是十分重要的.权限 ...