什么是继承？
要想了解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继承值冲突的属性值都会覆盖继承的属性值！！！
相关推荐
2. **CSS样式表简介** CSS（Cascading Style Sheets）是用于控制网页外观和布局的样式语言。它可以改变字体、颜色、间距、布局和更多视觉效果。在本任务中，我们将用CSS来定义`<div>`的样式，以实现特定的布局设计...
**CSS样式表详解** CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是增强对网页内容的控制，使得内容和表现分离，提高了网页设计的...
样式表的注释与继承 - **注释**：在CSS中，可以使用`/* comment */`插入注释，这对于维护和解释代码至关重要。 - **继承**：某些样式属性可以从父元素传递到子元素，这称为继承。例如，字体颜色和字体大小是常见的...
**CSS层叠样式表手册详解** CSS（Cascading Style Sheets）层叠样式表是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS使得网页设计者可以将样式与结构分离，提高了网页的可读性、...
**Qt5 样式表（Qt5 StyleSheet）详解** 在Qt框架中，样式表（StyleSheet）是一种强大的工具，用于自定义应用程序的外观和感觉。它类似于网页开发中的CSS（层叠样式表），允许开发者通过简单的语句来改变控件的视觉...
3. **预设样式表详解**： - `default.qss`：通常包含Qt控件的基本默认样式，提供一个基本的参考框架。 - `office2010.qss`：可能模仿Microsoft Office 2010的界面风格，提供一种现代且熟悉的外观。 - `levelfour....
CSS，全称为Cascading Style Sheets，中文译为层叠样式表，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是将内容与表现分离，使得网页设计更加灵活，维护更加方便...
### CSS属性继承详解 #### 一、引言 在网页设计与开发中，CSS（层叠样式表）是用于控制页面布局及外观的关键技术之一。其中，“CSS属性继承”是CSS一个非常重要的特性，它允许某些样式从父元素传递到子元素。这种...
**CSS2.0详解** CSS（层叠样式表）是一种用于...总结来说，CSS2.0是Web设计史上的里程碑，它不仅扩展了样式表的能力，还促进了网页设计的创新和多样化。理解和掌握CSS2.0的知识对于任何前端开发者来说都是至关重要的。
Qt样式表（QSS）是Qt框架中的一个核心特性，它允许我们使用类似CSS的语法来控制Qt应用程序的外观和布局，使得界面定制变得更为灵活和高效。 Qt样式表借鉴了Web开发中的CSS（层叠样式表）概念，但同时也针对桌面应用...
### CSS（层叠样式表）知识点详解 #### 一、CSS概述 - **定义**：CSS，即Cascading Style Sheets（层叠样式表），是一种用于控制网页样式和布局的语言。它与HTML相结合，使开发者能够高效管理和美化网页界面。 - *...
CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它能够让你将样式信息与结构信息分离，让页面的设计更加灵活且易于维护。下面是对CSS详解的一些...
CSS样式可以分为继承样式和非继承样式。继承样式是指子元素可以继承父元素的某些属性，从而无需为每个子元素单独设置即可实现样式的统一。以下介绍CSS中的默认可继承样式以及它们的作用。 1. color color属性定义了...
《CSS+DIV详解网站好帮手》是一本深入解析CSS（层叠样式表）与DIV（定位元素）技术的专业书籍，对于网页设计和开发人员来说，无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具，它们的合理运用能够...
首先，CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。它的主要作用是分离内容（HTML）和表现形式（CSS），使网页设计更加灵活和可维护。CSS通过选择器（如元素名、类名、ID...
首先，CSS作为网页样式表语言，是网页设计中的关键元素，它负责定义网页内容在浏览器中的展现方式。通过CSS，我们可以控制文本样式、颜色、布局、图像位置以及许多其他视觉效果。 在第1至第5章，你将学习到CSS的...
1. **内联样式**：直接在HTML元素中使用`style`属性添加CSS样式，但不推荐，因为不利于代码复用和维护。 2. **内部样式表**：将CSS写入`<style>`标签内，置于`<head>`中，适用于整个页面的样式统一。 3. **外部...
二、CSS样式表详解 1. 内联样式：直接在HTML元素的style属性中编写CSS，如`;">`，但不推荐，因为可维护性差。 2. 内部样式表：在HTML `<head>` 标签内使用 `<style>` 标签来定义CSS，适用于整个页面的样式。 3. ...
根据CSS样式表的放置位置不同，它们的作用范围也会有所不同。主要分为四种方式： 1. **内部（嵌入式）CSS样式表**：直接将CSS代码嵌入到HTML文档的`<head>`部分。 - 示例： ```html <style type="text/css"> ...
在CSS样式表中，通过对应的选择器来改变和定义这些元素的样式。 #### 5. 常见问题与解决方法 在使用CSS时，可能会遇到样式不显示的问题，这通常是由于CSS优先级、浏览器兼容性或者选择器的书写错误导致。通常解决...