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/ ...
随机推荐
- 【学习笔记&训练记录】数位DP
数位DP,即对数位进行拆分,利用数位来转移的一种DP,一般采用记忆化搜索,或者是先预处理再进行转移 一个比较大略的思想就是可以对于给定的大数,进行按数位进行固定来转移记录答案 区间类型的,可以考虑前缀 ...
- Enum遇到下拉框
package com.zj.tool; public enum WeekDay { Mon(), Tue(), Wed(), Thu(), Fri(), Sat(), Sun(); /**定义枚举类 ...
- nginx ssl证书安装配置
原理图: - 客户端生成一个随机数 random-client,传到服务器端(Say Hello) - 服务器端生成一个随机数 random-server,和着公钥,一起回馈给客户端(I got it ...
- AngularJs $resource 高大上的数据交互
$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...
- jquery获取复选框的值
勾选checkbox,并把勾选的值显示在某个div中 <!DOCTYPE html > <html> <head> <meta charset="U ...
- Ubuntu学习总结-04 搭建JAVA开发环境
JAVA开发环境是一种跨平台的程序设计语言,可以在windows.LINUX等操作系统上进行开发. 1 下载JDK 从以下地址下所需的jdk安装包 . http://www.oracle.com/te ...
- 逐行读取txt文件
header("Content-type:text/html; charset=utf-8"); $handle = fopen('test.php', 'r') or die(' ...
- Jquery 基本知识(一)
1. DOM对象:通过例如getElementById方法获取到DOM树中的元素就是DOM对象 jQuery对象:通过jQuery包装DOM对象后产生的对象 --- 注意:jQuery对象和DOM对象 ...
- firefox怎么修改tls协议号
如果目前正在运行火狐26,你可能已经注意到,浏览器仅支持SSL 3.0和TLS 1.0,默认不开启TLS 1.1或TLS 1.2.另外我们知道Firefox 27 已经实现了对TLS 1.2的支持. ...
- awk过滤数据
awk -F ',' '{if($2 ~/\./ ) {print $1,$2 }}' 20160905_names > ttt1 awk -F ',' '{if($2 !~/[0-9]+\.[ ...