CSS样式表继承详解
最近在恶补css样式表的基础知识。上次研究了css样式表之冲突问题详解 。这次是对 css 继承 特性的学习。
什么是css 继承？
要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。
文档树和家族树类似，也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧，笔者在这里就不一一赘述了。希望深入了解的朋友请google之。
那么CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。
下面举个例子，有如下html代码片段：
<p>
CSS样式表<em>继承特性</em>的演示代码
</p>
需要注意的是em是包含在p之内的。
当我们指定p的css样式时，看看em会有什么变化呢？
<style>
p { color:red; }
</style>
在浏览器中p 和 em 字体同时变红。我们并没有指定em的样式，但em继承了它的父亲元素p的样式特性。
也许各位看了以后觉得这是理所当然的，根本不值一哂^_^。其实，这就是继承。在不知不觉中影响这我们的代码（想像一下如果没有继承特性，你就需要为每一个元素定义颜色属性，这是多么痛苦的一件事情！！！=_=!）。
当然也不是所有的css属性都会被子类继承，例如border属性。继续利用上面的一段代码。我们为p元素添加border属性
p { border: 1px solid red; }
还好，p的border属性没有被em继承，否则是不是怪怪的呢？！^_^
那么，哪些属性是可以继承的呢？css样式表属性可以继承的有如下：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
吓？！这么多？！怎么记得住呢？别急，我们来理一理这些属性。
文本相关属性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
列表相关属性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
还有一个属性比较重要，color属性。
值得一说的是font-size。很显然font-size是可以被继承的。但是它的方式有一些特别。Font-size的子类继承的不是实际值，而是计算后的值。下面解释下为什么font-size会这么特别呢？
看一个例子：
<p>
字体大小属性<em>继承特性</em>的演示代码
</p>
为p定义字体大小为默认字体的80％。
p { font-size:80%}
如果font-size继承的是相对值，那么结果会怎么样呢？依照这样的逻辑，em的font-size为80％X80％=64%，网页看起来应该是这样的。
但，实际情况却不是如此。em内的文字并没有改变大小，而是和p保持一致。
下面举三个例子，让各位有个直观的认识
p { font-size:14px;}
由于浏览器默认字体大小是16px，而p定义了字体14px，所以em继承了p的字体大小属性，也是14px；
| 元素 | 值 | 计算后的值 |
|---|---|---|
| 默认字体大小 | 约16像素 | |
| <body> | 未指定 | 约16px |
| <p> | 14px | 14px |
| <em> | 未指定 | 继承值=14px |
p { font-size:85%;}
浏览棋默认字体大小16px,而p定义了字体大小(16px X 85% = 13.6px). 13.6px这个值将被子元素em继承。
| 元素 | 值 | 计算后的值 |
|---|---|---|
| 默认字体大小 | 约16像素 | |
| <body> | 未指定 | 约16px |
| <p> | 85% | 16px X 85% = 13.6px |
| <em> | 未指定 | 继承值=13.6px |
p { font-size:0.85em;}
浏览棋默认字体大小16px,而p定义了字体大小(16px X 0.85em = 13.6px). 13.6px这个值将被子元素em继承。
| 元素 | 值 | 计算后的值 |
|---|---|---|
| 默认字体大小 | 约16像素 | |
| <body> | 未指定 | 约16px |
| <p> | 0.85em | 16px X 0.85em= 13.6px |
| <em> | 未指定 | 继承值=13.6px |
上面的例子都比较简答，再来个复杂的
body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
浏览棋默认字体大小16px,而body定义了字体大小(16px X 85% = 13.6px). 如果子元素没有指定字体大小13.6px这个值将被子元素继承。
| 元素 | 值 | 计算后的值 |
|---|---|---|
| 默认字体大小 | 约16像素 | |
| <body> | 85% | 16px X 85% = 13.6px |
| <h1> | 200% | 继承值＝13.6px X 200%= 27.2px |
| <h2> | 150％ | 继承值＝13.6px X 150%= 20.4px |
| <p> | 未指定 | 继承值=13.6px |
| <em> | 未指定 | 继承值=13.6px |
说到这里，CSS样式表的继承基本上讲完了。在实践中，还有一个特性值需要解释一下，这和继承的应用也是息息相关的。
样式表中的特性值描述了不同规则的相对权重，它的基本规则是：
◆统计选择符中的ID属性个数。
◆统计选择符中的CLASS属性个数。
◆统计选择符中的HTML标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。(注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
以下是一个按特性分类的选择符的列表：
H1{color:blue;} 特性值为：1
PEM{color:purple;} 特性值为：2
.apple{red;} 特性值为：10
P.bright{color:yellow;} 特性值为：11
P.brightEM.dark{color:brown;} 特性值为：22
#id316{color:yellow} 特性值为：100
从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。而继承属性的特性值为0；也就是说，任何一条与css继承值冲突的属性值都会覆盖继承的属性值！！！
这点是需要各位注意的，Enjoy it！！
CSS样式表继承详解的更多相关文章
- css样式之background详解
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- css样式之background详解（格子效果）
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- Qt样式表——选择器详解（父子关系）
在上一节中,小豆君给大家介绍了样式表的基本概念和大致用法.今天我们来详细了解下样式表中选择器的用法. 所谓选择器,就是指定你所设置的样式对哪个或哪些控件起作用. 到目前为止,Qt样式表支持CSS2中定 ...
- CSS样式----CSS样式表的继承性和层叠性（图文详解）
本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- 「万字图文」史上最姨母级Java继承详解
摘要:继承是面向对象软件技术中的一个概念.它使得复用以前的代码非常容易,能够大大缩短开发周期,降低开发费用. 本文分享自华为云社区<「万字图文」史上最姨母级Java继承详解丨[奔跑吧!JAVA] ...
- 深度理解CSS样式表，内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Spark Shell & Spark submit
Spark 的 shell 是一个强大的交互式数据分析工具. 1. 搭建Spark 2. 两个目录下面有可执行文件: bin 包含spark-shell 和 spark-submit sbin 包含 ...
- js-一种去掉数组中重复元素的方法
思路来源于某个同学的博客 function norepeat(arr){ return arr.filter(function(val,index,array) { return array.inde ...
- 【matlab】输出固定位数的数字
有时候需要集中处理数字,比如处理图片,并将它们编号为000001~009963 而matlab用fprintf输出时这些数字编号时,需要指定格式: %.nd n表示n位长度.%d表示10进制数字 e. ...
- 【UOJ#33】【UR#2】树上GCD 有根树点分治 + 容斥原理 + 分块
#33. [UR #2]树上GCD 有一棵$n$个结点的有根树$T$.结点编号为$1…n$,其中根结点为$1$. 树上每条边的长度为$1$.我们用$d(x,y)$表示结点$x,y$在树上的距离,$LC ...
- NuGet打包推送批处理以及MSBuild（通用版）
使用时注意每个批处理里面的依赖工具路径指向 源码:https://github.com/easonjim/NuGetRun bug提交:https://github.com/easonjim/NuGe ...
- Visual Studio 2015出现Cannot find one or more components. Please reinstall the application.的问题解决
cd C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE devenv.exe /resetuserdata devenv. ...
- 使用Github Pages创建自己的网站
这是一篇使用Github Pages创建自己网站的教程,操作很简单,相信,亲们肯定一学就会,但是大家也要有一定的github基础呀,所以小编给大家附上一个链接(http://www.cnblogs.c ...
- ECMall /app/buyer_groupbuy.app.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link: 2. 漏洞触发条件 0x1: POC ht ...
- Codeforces 711E ZS and The Birthday Paradox
传送门 time limit per test 2 seconds memory limit per test 256 megabytes input standard input output st ...
- 对JavaScript优化及规范的一些感想
变量...... 1.一个变量只存一种类型的数据,2.尽量减少对隐式转换的依赖,这样可增强程序的可读性,日后修改程序时不至于混乱,3.使用匈牙利命名法,4.使用局部变量时记得加 var 进行声明,不然 ...