Tweet
Tweet

Slide 1

Slide 1 text

Css Css Css Css继承 CSS CSS CSS CSS

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

我们在实践中来看看继承,来看下面的 HTML HTML HTML HTML code code code code

Lorem ipsum dolor sit amet consect etuer.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Absolutely Absolutely Absolutely Absolutely no!!! no!!! no!!! no!!!

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

让我们来用之前的 一个简单的htm代码实例开始

Lorem ipsum dolor sit amet consect etuer.

Slide 58

Slide 58 text

来看下面HTML结构

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

所以解释成文档应该像 下面这样 下面这样 下面这样 下面这样: : : : element element element element

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

我们还是使用与之前 一样的 HTML代码:

Lorem ipsum dolor sit amet consect etuer.

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

元素 属性值 计算后的属性值 默认font size 约16px 未单独定义 约 16px

14px 14px 未单独定义 继承值 = 14px 所以em元素继承了14px属性值.

Slide 71

Slide 71 text

Example Example Example Example 2: 2: 2: 2: 百分比 百分比 百分比 百分比

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

元素 属性值 计算后的属性值 默 认 的 font size 约16px 未单独定义 约16px

85% 16px x 85% = 13.6px 未单独定义 继承属性值 = 13.6px 所以em元素会继承13.6px 这个计算出来的值

Slide 75

Slide 75 text

Example Example Example Example 3: 3: 3: 3: EMs EMs EMs EMs

Slide 76

Slide 76 text

给

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

元素 属性值 计算后的属性值 默认 font size 约 16px 未单独定义 约16px

.85em 16px x .85em = 13.6px 未单独定义 继承属性值 = 13.6px 所以 所以 所以 所以em em em em元素继承属性值为 元素继承属性值为 元素继承属性值为 元素继承属性值为 13.6px 13.6px 13.6px 13.6px .

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Example Example Example Example 4: 4: 4: 4:

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

元素 属性值 计算font-size 默认font size 约16px 85% 16px x 85% = 13.6px

200% 继承值为 13.6px x 200% = 27.2px

150% 继承值为 13.6px x 150% = 20.4px

未单独定义 继承值为 = 13.6px 未单独定义 继承值为 = 13.6px font-size font-size font-size font-size属性继承情况如下

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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; }

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

} 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%; }

Slide 94

Slide 94 text

We We We We’ ’ ’ ’re re re re done! done! done! done! Connect: : : : Name:Alex E-mail:[email protected] 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/） 本译文仅供技术交流使用，转载请说明出处，禁止从事商业用途