举例详解CSS中的继承
CSS的继承是由所使用的样式属性定义的。换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的。
什么是CSS继承
每一个元素都是文档树的一部分,除了最顶级的HTML元素,每个元素都有其对应的父级元素,每一个父级元素的CSS属性值都可以被应用到它的子元素中去。
举个栗子,H1标签包含着一个EM标签:
EM就是H1标签的子元素,任何H1中继承的CSS属性值会自动在EM标签中生效,比如:
- h1{font-size: 120%;}
由于font-size是默认继承的CSS属性,"很大的"字体也会和H1一样,被放大到120%。
如何使用CSS继承
最简单的方法就是知道CSS所有属性中那些是默认被继承的,如果这个属性被继承,就会知道它会在元素所有子元素中生效。
我们经常在非常顶级的元素上定义基础样式,比如BODY标签,如果在body中设置字体,因为继承,文档中所有元素都会应用这个字体:
- h1{font-size: 120%;}
使用「inherit」值
每个CSS属性的值都包括inherit,属性被定义这个值后,即使这个属性不是默认继承,也会应用父级元素这个CSS属性的值,比如:
- body { margin: 1em; }
- 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中的继承的更多相关文章
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
- 举例详解CSS中的的优先级
计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...
- 举例详解Python中的split()函数的使用方法
这篇文章主要介绍了举例详解Python中的split()函数的使用方法,split()函数的使用是Python学习当中的基础知识,通常用于将字符串切片并转换为列表,需要的朋友可以参考下 函数:sp ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 转: 详解css中的display属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...
- (转)实例详解CSS中position的fixed属性使用
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...
- CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法
:nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...
随机推荐
- Java中-XMX -xmn 是什么的缩写
这个应该是 eclipse 的配置文件 eclipse.ini 中的配置语句.在配置文件中直接传递给 java vm 的参数并不多,调用形式是这样的: 1 eclipse [normal argume ...
- printf("%*s\n", 1, ""); 使用"printf();" 的格式化输出动态制定等宽度输出。
#include <stdio.h> #include <string.h> int main() { const char the_text[] = "this i ...
- SPCOMM 接收数据不完整!该如何解决
SPCOMM 接收数据不完整!该如何解决 SPCOMM 接收数据不完整!我作了一个 读取地磅数据的程序,是用spcomm接收的! 总共有五台地磅,其他4台地磅数据读取都正常.但是有一台接收数据的时 ...
- Java中的大数处理类BigInteger和BigDecimar浅析
这两个类位于java.math包内,要使用它们必须在类前面引用该包:import java.math.BigInteger;和import java.math.BigDecimal; BigInteg ...
- 巧用Freemarker的自定义方法
要想使用Freemarker支持的自定义方法,需要实现freemarker.template.TemplateMethodModel接口,然后将方法对象放入到Freemarker的数据模型中,这样在f ...
- SQL Server中易混淆的数据类型
1)char.varchar.text和nchar.nvarchar.ntextchar和varchar的长度都在1到8000之间,它们的区别在于char是定长字符数据,而varchar是变长字符数据 ...
- poj 1789 Truck History 最小生成树
点击打开链接 Truck History Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 15235 Accepted: ...
- dbf导入Oracle
如果想通过拷贝数据文件来恢复数据库的话:1.要确定源数据库和目标数据库的安装目录等完全一致,os一致2.把源数据库的控制文件,spfile,密码文件拷贝到目标数据库的相同目录下3.通过源数据库的con ...
- Android--ListView显示列表数据
简单的显示 import android.os.Bundle; import android.app.ListActivity; import android.view.View; import an ...
- 基于RBAC模型的通用企业权限管理系统
1. 为什么我们需要基于RBAC模型的通用企业权限管理系统 管理信息系统是一个复杂的人机交互系统,其中每个具体环节都可能受到安全威胁.构建强健的权限管理系统,保证管理信息系统的安全性是十分重要的.权限 ...