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/ ...
随机推荐
- jQyery实现轮播器
看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直 ...
- 【codevs1034】 家园
http://codevs.cn/problem/1034/ (题目链接) 题意 给出一张n个点的图,有m架飞船按照固定的航班运行,没单位时间移动一次,并且没收航班都有自己的容纳量.问从0号点将K个人 ...
- 【poj1985】 Cow Marathon
http://poj.org/problem?id=1985 (题目链接) 题意 求树上两点间最长距离.题目背景以及输入描述请见poj1984. Solution 树的直径. 代码 // poj198 ...
- 【bzoj2809】 Apio2012—dispatching
http://www.lydsy.com/JudgeOnline/problem.php?id=2809 (题目链接) 题意 给出一棵树,每个节点有两个权值${c}$,${L}$,分别代表花费和领导力 ...
- SQL Server数据同步的研究（单向/双向）
思路: 1.做中间件(简单:定时采集:复杂:分布式,订阅中心的形式,如微信的中间件:https://github.com/tencent-wechat/phxsql) 2.采用触发器的形式,有数据触发 ...
- 本地连接虚拟机上面的redis
想做一个抓取系统,想到用redis存储临时数据可能会比较好些,就想着装个虚拟机,在虚拟机上面安装redis,通过本地来访问虚拟机上面的redis. 虚拟机和redis安装成功之后,发现本地怎么都连接不 ...
- 提高SQL的查询效率
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使 ...
- Unity 依赖注入知识点
三种依赖注入方法,构造器注入.属性注入.方法注入 可以配置Config文件,来实现不用修改代码.需要先将接口与实体关联,然后使用时会自动加载对应实体. namespace WeChatConsole ...
- VC++ 比较两个字符串是否相等,字母大小写相关。
1.strcmp 这是用于ANSI标准字符串的函数(如string和char *),此函数接受两个字符串缓冲区做为参数,如果两个字符串是相同的则返回零.否则若第一个传入的字符串的值大于第二个字符串返回 ...
- 【Beta】第三次任务发布
后端(补做) #86 了解社区新建文章.添加评论(回复)的机制.整理成API文档,包括如何请求新建文章.新建评论(回复).如何获取文章内容和评论内容. 验收条件:文档PM要能看懂. 前端(补做) #8 ...