CSS继承

黄盖
• 阅读 8816

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中设置字体,因为继承,文档中所有元素都会应用这个字体:

body {font-family: Arial, sans-serif; }

使用「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 Initial Value

本文翻译自CSS Inheritance,How CSS Inheritance Works in Web Documents

点赞
收藏
评论区
推荐文章
Alex799 Alex799
4年前
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
菜园前端 菜园前端
2年前
你真的了解的CSS3盒模型和CSS3特性知识吗
原文链接:什么是CSS3?CSS3是CSS一个新的标准,直接理解为是CSS的升级版,里面新增了很多样式(特性)。CSS3盒子模型:::warningCSS3盒子模型必须要掌握,否则你在实际开发中遇到样式错乱很难排查问题。:::旧版的IE浏览器与其它浏览器解
Wesley13 Wesley13
4年前
CSS扩展语言
CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有!//语法//<customprepertyname自定义属性名//<declarationvalue
Stella981 Stella981
4年前
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(csspreproces
Stella981 Stella981
4年前
CSS预编译器:Sass(入门),更快的前端开发
Sass扩展了CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass生成良好格式化的CSS代码,易于组织和维护。SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览
Wesley13 Wesley13
4年前
CSS基本语法及页面引用
css基本语法及页面引用(1)css基本语法css的定义方法是:选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:/css注释ctrlshift"/"/d
Wesley13 Wesley13
4年前
CSS基本用法介绍
CSS介绍css定义如何显示HTML元素.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).CSS语法css实列每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。css注释/这是注释/CSS的几种引入方
Stella981 Stella981
4年前
MediaWiki
1代码先进入到下面页面(也许你需要将localhost替换成其他的):http://localhost/mediawiki/index.php/MediaWiki:Common.css在此页你可以设置全局的css样式,在这里加入如下:toc{display:block;position:f
Wesley13 Wesley13
4年前
020_CSS3
目录如何学习CSS什么是CSS发展史快速入门css的优势三种CSS导入方式拓展:外部样式两种写法选择器基本选择器层次选择器结构伪类选择器属性选择器美化网页元素为什么要
Stella981 Stella981
4年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
liam liam
2年前
如何使用 Less:Less 教程,一步步带你入门
Less(LeanerStyleSheets的缩写)是一门向后兼容的CSS扩展语言。,它扩展了CSS(层叠样式表)的功能并提供了更灵活、更强大的样式定义和管理机制。通过使用Less,开发人员可以编写可维护、可重用的样式代码,并以简洁的语法实现复杂的样式效果