高级CSS—继承

高级CSS—继承

Transcript

1. Css Css Css Css继承 CSS CSS CSS CSS
2. 偶也， 偶也， 偶也， 偶也， 我们从文档树 我们从文档树 我们从文档树 我们从文档树 （ （ （ （DOM DOM DOM DOM tree tree tree tree） ） ） ） 开始 开始 开始 开始
3. 在我们研究继承性之前 我们需要弄清楚 document document document document tree tree tree tree
4. 我们认为所有的HTML结构为一棵树 一棵树 一棵树 一棵树
5. 文档树结构是由HTML HTML HTML HTML元素 元素 元素 元素组成
6. 文档树我们可以把他理解成家庭关系 家庭关系 家庭关系 家庭关系
7. 一个祖先元素 (暂且这么说吧，发现翻译成根元素是不对的) 连接并牵引出所有的元素 祖先
8. 一个后代元素 后代元素 后代元素 后代元素 牵引出所有元素 但他处于文档树低一级 后代元素 Descendants
9. 我们亦可将 body body body body元素 元素 元素 元素 理解为父元素 父元素
10. Also， 低一级的ul ul ul ul元素 元素 元素 元素 理解为子元素 子元素
11. 兄弟元素（LI） 和他的兄弟姐妹们 有同一个爸爸 同一个爸爸 同一个爸爸 同一个爸爸（UL） 相对父元素 兄弟姐妹们
12. Next, Next, Next, Next, 我们得看 我们得看 我们得看 我们得看 CSS CSS CSS CSS规则 规则 规则 规则
13. 在我们研究继承性之前， 应该需要理解 CSS规则的基本原理.
14. CSS规则会告诉浏览器 如何去表现 HTML页面中的每个元素的特点
15. CSS CSS CSS CSS规则 规则 规则 规则由 由 由 由5 5 5 5个要素 个要素 个要素 个要素构成 构成 构成 构成
16. 通过 通过 通过 通过选择器 选择器 选择器 选择器 来选择 来选择 来选择 来选择HTML 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 Now Now… … … … 什么是 什么是 什么是 什么是 继承 继承 继承 继承? ? ? ?
22. 当有特定的CSS属性 传承 传承 传承 传承给后代 （儿子，孙子and so on）元素就是继承 继承 继承 继承
23. 我们在实践中来看看继承,来看下面的 HTML HTML HTML HTML code code code 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> <em> <em> <em> 元素 元素 元素 元素
27. 但是为什么em元素也是 红色的 红色的 红色的 红色的？ ？ ？ ？ 问题是我并没有给他任何 属性， 囧 。 。 。
28. 因为em元素从P那里 继承了 继承了 继承了 继承了 color:red属性 （做儿子还有点儿好处的）
29. Why Why Why Why？ ？ ？ ？ 为什么要有继承 为什么要有继承 为什么要有继承 为什么要有继承
30. 继承被设计是用来简化开发 简化开发 简化开发 简化开发
31. 否则， 我们需要去单独定义 所有的 所有的 所有的 所有的后代元素，look, p { color: red; } p em { color: red; }
32. css文件将会变得非常大 非常大 非常大 非常大， 开发和维护将极为困难 同时 下载速度 下载速度 下载速度 下载速度也将受到很大影响
33. ALL ALL ALL ALL？ ？ ？ ？ 所有的 所有的 所有的 所有的css css css css 属性都会继承吗？ 属性都会继承吗？ 属性都会继承吗？ 属性都会继承吗？
34. Absolutely Absolutely Absolutely Absolutely no!!! no!!! no!!! no!!!
35. 如果所有CSS属性 都会被继承， 那对开发者来说是非常严重的问题！ ！ 非常严重的问题！ ！ 非常严重的问题！ ！ 非常严重的问题！ ！
36. 开发者需要去掉 去掉 去掉 去掉 后代元素 并不需要的属性。
37. What? What? What? What? 例如： 如果border属性 会被继承的话， 将会发生什么 将会发生什么 将会发生什么 将会发生什么？ ？ ？ ？
38. Okey, 我们来给P元素一个border border border border属性 p { border: 1px solid red; }
39. 在P元素里的em元素也会有 红色的边框？ 红色的边框？ 红色的边框？ 红色的边框？ <em> <em> <em> <em> element element element element
40. .幸运的是， .边框并没有被继承， .em元素并没有红色边框 <em> <em> <em> <em> element element element element
41. 通俗的讲，有利于 有利于 有利于 有利于简化开发的 属性都会被继承
42. So, So, So, 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 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 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？ ？ ？ ？ 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 P P的 的 的 的80% 80% 80% 80%
61. 所以解释成文档应该像 下面这样 下面这样 下面这样 下面这样: : : : <em> <em> <em> <em> element element element element
62. 然而事实却不是这样的， em元素与P元素的大小是一样 <em> <em> <em> <em> 元素 元素 元素 元素
63. ？ ？ ？ ？ 那么font-size属性的继承到底 怎样执行的呢
64. 我们来看看三个实例 三个实例 三个实例 三个实例
65. 我们还是使用与之前 一样的 HTML代码: <p> Lorem <em>ipsum</em> dolor sit amet consect etuer. </p>
66. 欧克，这里的文档结构也是一样的.
67. Example Example Example Example 1: 1: 1: 1: Pixels Pixels Pixels Pixels（单位） （单位） （单位） （单位）
68. 我们给p元素的 font-size属性的值为 14px 14px 14px 14px. p { font-size: 14px; }
69. Px Px Px Px属性值 属性值 属性值 属性值(14px) (14px) (14px) (14px)会 会 会 会重写 重写 重写 重写 浏览器默认的 浏览器默认的 浏览器默认的 浏览器默认的font-size font-size font-size font-size的值（约为 的值（约为 的值（约为 的值（约为16px 16px 16px 16px）。 ）。 ）。 ）。 新的属性值会被继承。 新的属性值会被继承。 新的属性值会被继承。 新的属性值会被继承。
70. 元素 属性值 计算后的属性值 默认font size 约16px <body> 未单独定义 约 16px <p> 14px 14px <em> 未单独定义 继承值 = 14px 所以em元素继承了14px属性值.
71. Example Example Example Example 2: 2: 2: 2: 百分比 百分比 百分比 百分比
72. 给p 元素 font-size属性值为 85% 85% 85% 85%. p { font-size: 85%; }
73. 浏览器默认的 浏览器默认的 浏览器默认的 浏览器默认的font-size font-size font-size font-size值为 值为 值为 值为16px 16px 16px 16px， ， ， ， 那么计算出值为 那么计算出值为 那么计算出值为 那么计算出值为16px x 85% =13.6px
74. 元素 属性值 计算后的属性值 默 认 的 font size 约16px <body> 未单独定义 约16px <p> 85% 16px x 85% = 13.6px <em> 未单独定义 继承属性值 = 13.6px 所以em元素会继承13.6px 这个计算出来的值
75. Example Example Example Example 3: 3: 3: 3: EMs EMs EMs EMs
76. 给<p>元素 font-size属性值为 .85em .85em .85em .85em p { font-size: .85em; }
77. 欧克，我们再来算一算哦 欧克，我们再来算一算哦 欧克，我们再来算一算哦 欧克，我们再来算一算哦 16px x .85em = 13.6px
78. 元素 属性值 计算后的属性值 默认 font size 约 16px <body> 未单独定义 约16px <p> .85em 16px x .85em = 13.6px <em> 未单独定义 继承属性值 = 13.6px 所以 所以 所以 所以em em em em元素继承属性值为 元素继承属性值为 元素继承属性值为 元素继承属性值为 13.6px 13.6px 13.6px 13.6px .
79. 这些实例都太简单了。 在有比较多的标签 而相对复杂的实例里是这样吗？
80. Example Example Example Example 4: 4: 4: 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 约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 font-size font-size font-size font-size属性继承情况如下
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. And，新的font-family font-family 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. And，新的font-size font-size 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 We We We’ ’ ’ ’re re re re done! done! done! done! 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/） 本译文仅供技术交流使用，转载请说明出处，禁止从事商业用途