1. CSS
Css
Css继承

2. 偶也，
我们从文档树
（DOM tree）
tree）
开始

3. 在我们研究继承性之前
我们需要弄清楚
document tree

4. 我们认为所有的HTML结构为一棵树

5. 文档树结构是由HTML元素
HTML 元素组成
HTML元素

6. 家庭关系
文档树我们可以把他理解成家庭关系

7. 一个祖先元素
(暂且这么说吧，发现翻译成根元素是不对的)
连接并牵引出所有的元素
祖先

8. 后代元素
一个后代元素
牵引出所有元素
但他处于文档树低一级
后代元素
Descendants

9. 我们亦可将
body元素
body元素
理解为父元素
父元素

10. Also，
低一级的ul元素
ul
ul元素
理解为子元素
子元素

11. 兄弟元素（LI）
和他的兄弟姐妹们
同一个爸爸
有同一个爸爸（UL）
相对父元素
兄弟姐妹们

12. Next,
我们得看
CSS规则
CSS规则

13. 在我们研究继承性之前，
应该需要理解
CSS规则的基本原理.

14. CSS规则会告诉浏览器
如何去表现
HTML页面中的每个元素的特点

15. CSS规则由5个要素构成
CSS规则
规则由 个要素构成

16. 通过选择器
通过选择器
来选择HTML页面中的
来选择HTML
HTML页面中的
元素
p { color: red; }
选择 选择器

17. 声明块
包含所有的东西当然也包含方括号
p { color: red; }
声明块

18. 声明
告诉浏览器如何在页面中表现已
被选择的元素
p { color: red; }
声明

19. 属性
p { color: red; }
属性

20. 对应属性的属性值
p { color: red; }
属性值

21. Now…
Now…
什么是
继承?
继承?

22. 当有特定的CSS属性
传承
传承给后代
继承
（儿子，孙子and so on）元素就是继承

23. 我们在实践中来看看继承,来看下面的
HTML code
<p>
Lorem <em>ipsum</em> dolor
sit amet consect etuer.
</p>

24. em元素是包含在p元素里.

25. 看下面的CSS代码
Em元素并没有
单独特定的去定义他
p { color: red; }

26. 在浏览器中查看
P与em元素表现是一样的
<em> 元素

27. 但是为什么em元素也是
红色的？
红色的？
问题是我并没有给他任何
属性， 囧 。 。
。

28. 因为em元素从P那里
继承了
color:red属性
（做儿子还有点儿好处的）

29. Why？
Why？
为什么要有继承

30. 简化开发
继承被设计是用来简化开发

31. 否则，
我们需要去单独定义
所有的
所有的后代元素，look,
p { color: red; }
p em { color: red; }

32. 非常大
css文件将会变得非常大
非常大，
开发和维护将极为困难
同时 下载速度
下载速度也将受到很大影响

33. ALL？
ALL？
所有的css
所有的css
属性都会继承吗？

34. Absolutely no!!!

35. 如果所有CSS属性
都会被继承，
非常严重的问题！
那对开发者来说是非常严重的问题！！

36. 去掉
开发者需要去掉
后代元素
并不需要的属性。

37. What?
例如：
如果border属性
会被继承的话，
将会发生什么？
将会发生什么？

38. Okey,
border
我们来给P元素一个border
border属性
p { border: 1px solid red; }

39. 在P元素里的em元素也会有
红色的边框？
<em> element

40. .幸运的是，
.边框并没有被继承，
.em元素并没有红色边框
<em> element

41. 有利于
通俗的讲，有利于
有利于简化开发的
属性都会被继承

42. So,
哪些属性会被继承

43. 会被继承
下面已列出会被继承
会被继承的
属性…

44. 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, speak-
numeral, speak-punctuation, speak, speech-
rate, stress, text-align, text-indent, text-
transform, visibility, voice-family, volume, white-
space, widows, word-spacing

45. 啊，啊，啊!
会有这么多属性哦
最讨厌背东西了

46. 如此简单，
我们来个排列组合，
惊喜的发现，
属性系列
是有几个主要的属性系列
属性系列组成

47. 相关属性都会被继承
Text相关
Text相关

48. 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, speak-
numeral, speak-punctuation, speak, speech-
rate, stress, text-align, text-indent, text-
transform, visibility, voice-family, volume, white-
space, widows, word-spacing

49. List相关属性都会被
List相关
继承

50. 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, speak-
numeral, speak-punctuation, speak, speech-
rate, stress, text-align, text-indent, text-
transform, visibility, voice-family, volume, white-
space, widows, word-spacing

51. 更重要的是，color属性会被继承

52. 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, speak-
numeral, speak-punctuation, speak, speech-
rate, stress, text-align, text-indent, text-
transform, visibility, voice-family, volume, white-
space, widows, word-spacing

53. font-size？
font-size？
Font-size会被继承吗
Font-size会被继承吗

54. absolutely “yes”.
然而font-size被继承不同于其他的属性

55. 被计算出来的值会被继承
而不是其初始值

56. 在解释font-size如何来继承之前，
我们需要知道font-size
为什么
为什么不是直接继承？

57. 让我们来用之前的
一个简单的htm代码实例开始
<p>
Lorem <em>ipsum</em> dolor
sit amet consect etuer.
</p>

58. 来看下面HTML结构

59. 这里我 仅仅 仅仅只给 p元素定 义了
font-size属性，
而em并没有单独定义
p { font-size: 80%; }

60. Font-size的属性值为80%，
那么em元素的font-size属性值
P
应该为P的80%

61. 所以解释成文档应该像
下面这样:
下面这样:
<em> element

62. 然而事实却不是这样的，
em元素与P元素的大小是一样
<em> 元素

63. ？
那么font-size属性的继承到底
怎样执行的呢

64. 三个实例
我们来看看三个实例

65. 我们还是使用与之前
一样的
HTML代码:
<p>
Lorem <em>ipsum</em> dolor
sit amet consect etuer.
</p>

66. 欧克，这里的文档结构也是一样的.

67. Example 1:
Pixels（单位）
Pixels（单位）

68. 我们给p元素的
font-size属性的值为 14px
14px.
p { font-size: 14px; }

69. Px属性值(14px)会重写
Px属性值(14px)会
属性值(14px)
浏览器默认的font-size的值（约为16px）。
浏览器默认的font-size 的值（约为16px
font-size的值（约为16px）。
新的属性值会被继承。

70. 所以em元素继承了14px属性值.
元素 属性值 计算后的属性值
默认font size 约16px
<body> 未单独定义 约 16px
<p> 14px 14px
<em> 未单独定义 继承值 = 14px

71. Example 2:
百分比

72. 给p 元素 font-size属性值为 85%
85%.
p { font-size: 85%; }

73. 浏览器默认的font-size值为16px，
浏览器默认的font-size 值为16px
font-size值为 16px，
那么计算出值为
那么计算出值为16px x 85% =13.6px

74. 所以em元素会继承13.6px
这个计算出来的值
元素 属性值 计算后的属性值
默 认 的 font 约16px
size
<body> 未单独定义 约16px
<p> 85% 16px x 85% = 13.6px
<em> 未单独定义 继承属性值 = 13.6px

75. Example 3:
EMs

76. 给<p>元素 font-size属性值为 .85em
p { font-size: .85em; }

77. 欧克，我们再来算一算哦
16px x .85em = 13.6px

78. 所以em元素继承属性值为
所以em
em元素继承属性值为
13.6px .
元素 属性值 计算后的属性值
默认 font size 约 16px
<body> 未单独定义 约16px
<p> .85em 16px x .85em = 13.6px
<em> 未单独定义 继承属性值 = 13.6px

79. 这些实例都太简单了。
在有比较多的标签
而相对复杂的实例里是这样吗？

80. Example 4:

81. 所有的标签都定义了font-size
单位为百分比的
属性值.
body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }

82. 浏览器默认的font-size为16px
body元素font-size属性值为85%
计算出16px x 85% =13.6px
这个值将被后代继承后代继承
除非后代元素重新定义

83. font-size
font-size属性继承情况如下
元素 属性值 计算font-size
默认font size 约16px
<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

84. 使用继承来提高
我们的效率

85. 开发者能用继承性来写出
高效的CSS文件

86. For example,
我们可以对body元素设置
color, font-size and font-family 属性
body {
color: #222;
font-family: arial,
helvetica, sans-serif;
font-size: 90%;
}

87. 所有的后代元素 都会继承来自上面对
body的属性设置.

88. 重写
如果需要，您可以重写
重写新的属性。

89. body {
color: #222;
font-family: arial,
helvetica, sans-serif;
font-size: 90%;
}
h1, h2, h3 { color: green; }
h4, h5, h6 { color: black; }

90. font-family
And，新的font-family
font-family属性

91. body {
color: #222;
font-family: arial,
helvetica, sans-serif;
font-size: 90%;
}
h1, h2, h3 { color: green; }
h4, h5, h6 { color: black; }
h1, h2, h3, h4, h5, h6 {
font-family: georgia,
times, serif;
}

92. font-size
And，新的font-size
font-size属性

93. }
h1, h2, h3 { color: green; }
h4, h5, h6 { color: black; }
h1, h2, h3, h4, h5, h6 {
font-family: georgia,
times, serif;
}
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }
#footer { font-size: 90%; }

94. We’re done!
We’
:
Connect:
Name:Alex
E-mail:paintyang@hotmail.com
Site:http://ued.iciba.com/
QQ:303683080
声明：
本文翻译自http://www.slideshare.net/maxdesign/css-inheritance-a-simple-stepbystep-tutorial?from=ss_embed
作者：Russ Weakley（http://www.slideshare.net/maxdesign/）
本译文仅供技术交流使用，转载请说明出处，禁止从事商业用途