CSSCssCss继承
偶也,我们从文档树(DOM tree)     tree)   开始
在我们研究继承性之前  我们需要弄清楚 document tree
我们认为所有的HTML结构为一棵树
文档树结构是由HTML元素       HTML 元素组成       HTML元素
家庭关系文档树我们可以把他理解成家庭关系
一个祖先元素(暂且这么说吧,发现翻译成根元素是不对的)  连接并牵引出所有的元素                  祖先
后代元素               一个后代元素                牵引出所有元素              但他处于文档树低一级                          后代元素Descendants
我们亦可将 body元素 body元素理解为父元素          父元素
Also,低一级的ul元素      ul      ul元素 理解为子元素             子元素
兄弟元素(LI)        和他的兄弟姐妹们         同一个爸爸        有同一个爸爸(UL)                     相对父元素兄弟姐妹们
Next,我们得看CSS规则CSS规则
在我们研究继承性之前,      应该需要理解CSS规则的基本原理.
CSS规则会告诉浏览器       如何去表现HTML页面中的每个元素的特点
CSS规则由5个要素构成CSS规则   规则由 个要素构成
通过选择器     通过选择器       来选择HTML页面中的       来选择HTML           HTML页面中的                元素      p { color: red; }选择   选择器
声明块包含所有的东西当然也包含方括号p { color: red; }        声明块
声明告诉浏览器如何在页面中表现已    被选择的元素p { color: red; }            声明
属性 p { color: red; }         属性
对应属性的属性值p { color: red; }                    属性值
Now… Now…什么是   继承?    继承?
当有特定的CSS属性       传承       传承给后代                    继承(儿子,孙子and so on)元素就是继承
我们在实践中来看看继承,来看下面的HTML code<p>    Lorem <em>ipsum</em> dolor    sit amet consect etuer.</p>
em元素是包含在p元素里.
看下面的CSS代码        Em元素并没有      单独特定的去定义他p { color: red; }
在浏览器中查看P与em元素表现是一样的<em> 元素
但是为什么em元素也是    红色的?    红色的?问题是我并没有给他任何         属性, 囧 。 。                。
因为em元素从P那里继承了color:red属性(做儿子还有点儿好处的)
Why? Why?为什么要有继承
简化开发继承被设计是用来简化开发
否则,   我们需要去单独定义所有的所有的后代元素,look,p { color: red; }p em { color: red; }
非常大   css文件将会变得非常大            非常大,       开发和维护将极为困难同时 下载速度   下载速度也将受到很大影响
ALL?  ALL?  所有的css  所有的css属性都会继承吗?
Absolutely no!!!
如果所有CSS属性     都会被继承,        非常严重的问题!那对开发者来说是非常严重的问题!!
去掉开发者需要去掉后代元素       并不需要的属性。
What?        例如:  如果border属性 会被继承的话,将会发生什么?将会发生什么?
Okey,           border  我们来给P元素一个border           border属性  p { border: 1px solid red; }
在P元素里的em元素也会有   红色的边框?<em> element
.幸运的是,  .边框并没有被继承,  .em元素并没有红色边框<em> element
有利于通俗的讲,有利于     有利于简化开发的属性都会被继承
So, 哪些属性会被继承
会被继承下面已列出会被继承      会被继承的  属性…
azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation,   empty-cells, font-family, f...
啊,啊,啊!会有这么多属性哦    最讨厌背东西了
如此简单,  我们来个排列组合,  惊喜的发现,       属性系列是有几个主要的属性系列       属性系列组成
相关属性都会被继承Text相关Text相关
azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation,   empty-cells, font-family, f...
List相关属性都会被List相关继承
azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation,   empty-cells, font-family, f...
更重要的是,color属性会被继承
azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation,   empty-cells, font-family, f...
font-size?font-size?Font-size会被继承吗Font-size会被继承吗
absolutely “yes”.然而font-size被继承不同于其他的属性
被计算出来的值会被继承而不是其初始值
在解释font-size如何来继承之前,我们需要知道font-size为什么为什么不是直接继承?
让我们来用之前的 一个简单的htm代码实例开始<p>    Lorem <em>ipsum</em> dolor    sit amet consect etuer.</p>
来看下面HTML结构
这里我 仅仅  仅仅只给 p元素定 义了       font-size属性,       而em并没有单独定义p { font-size: 80%; }
Font-size的属性值为80%,那么em元素的font-size属性值      P应该为P的80%
所以解释成文档应该像 下面这样: 下面这样:<em> element
然而事实却不是这样的,em元素与P元素的大小是一样<em> 元素
?那么font-size属性的继承到底             怎样执行的呢
三个实例我们来看看三个实例
我们还是使用与之前         一样的        HTML代码:<p>    Lorem <em>ipsum</em> dolor    sit amet consect etuer.</p>
欧克,这里的文档结构也是一样的.
Example 1:Pixels(单位)Pixels(单位)
我们给p元素的 font-size属性的值为 14px                14px.p { font-size: 14px; }
Px属性值(14px)会重写    Px属性值(14px)会      属性值(14px)浏览器默认的font-size的值(约为16px)。浏览器默认的font-size 的值(约为16px       font-size的值(约为16px)...
所以em元素继承了14px属性值.元素            属性值     计算后的属性值默认font size   约16px<body>        未单独定义   约 16px<p>           14px    14px<em...
Example 2:  百分比
给p 元素 font-size属性值为 85%                    85%. p { font-size: 85%; }
浏览器默认的font-size值为16px, 浏览器默认的font-size 值为16px       font-size值为 16px,那么计算出值为那么计算出值为16px x 85% =13.6px
所以em元素会继承13.6px           这个计算出来的值元素           属性值      计算后的属性值默 认 的    font 约16pxsize<body>       未单独定义    约16px<p>      ...
Example 3:   EMs
给<p>元素 font-size属性值为 .85em  p { font-size: .85em; }
欧克,我们再来算一算哦16px x .85em = 13.6px
所以em元素继承属性值为          所以em            em元素继承属性值为               13.6px .元素             属性值      计算后的属性值默认 font size   约 16p...
这些实例都太简单了。   在有比较多的标签而相对复杂的实例里是这样吗?
Example 4:
所有的标签都定义了font-size           单位为百分比的              属性值.body { font-size: 85%; }h1 { font-size: 200%; }h2 { font-size: 150%; }
浏览器默认的font-size为16pxbody元素font-size属性值为85%计算出16px x 85% =13.6px  这个值将被后代继承后代继承   除非后代元素重新定义
font-size         font-size属性继承情况如下元素            属性值     计算font-size默认font size   约16px<body>        85%     16px x 85% = ...
使用继承来提高我们的效率
开发者能用继承性来写出  高效的CSS文件
For example,我们可以对body元素设置color, font-size and font-family 属性body {    color: #222;    font-family: arial,    helvetica, sa...
所有的后代元素 都会继承来自上面对body的属性设置.
重写如果需要,您可以重写        重写新的属性。
body {    color: #222;    font-family: arial,    helvetica, sans-serif;    font-size: 90%;}h1, h2, h3 { color: green; }h4,...
font-familyAnd,新的font-family      font-family属性
body {    color: #222;    font-family: arial,    helvetica, sans-serif;    font-size: 90%;}h1, h2, h3 { color: green; }h4,...
font-sizeAnd,新的font-size      font-size属性
}h1, h2, h3 { color: green; }h4, h5, h6 { color: black; }h1, h2, h3, h4, h5, h6 {     font-family: georgia,     times, ser...
We’re done!                 We’        : Connect:   Name:Alex   E-mail:paintyang@hotmail.com   Site:http://ued.iciba.com/ ...
Upcoming SlideShare
Loading in …5
×

Inheritance css继承

986 views

Published on

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
  • Inheritance css继承
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
986
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Inheritance css继承

  1. 1. CSSCssCss继承
  2. 2. 偶也,我们从文档树(DOM tree) tree) 开始
  3. 3. 在我们研究继承性之前 我们需要弄清楚 document tree
  4. 4. 我们认为所有的HTML结构为一棵树
  5. 5. 文档树结构是由HTML元素 HTML 元素组成 HTML元素
  6. 6. 家庭关系文档树我们可以把他理解成家庭关系
  7. 7. 一个祖先元素(暂且这么说吧,发现翻译成根元素是不对的) 连接并牵引出所有的元素 祖先
  8. 8. 后代元素 一个后代元素 牵引出所有元素 但他处于文档树低一级 后代元素Descendants
  9. 9. 我们亦可将 body元素 body元素理解为父元素 父元素
  10. 10. Also,低一级的ul元素 ul ul元素 理解为子元素 子元素
  11. 11. 兄弟元素(LI) 和他的兄弟姐妹们 同一个爸爸 有同一个爸爸(UL) 相对父元素兄弟姐妹们
  12. 12. Next,我们得看CSS规则CSS规则
  13. 13. 在我们研究继承性之前, 应该需要理解CSS规则的基本原理.
  14. 14. CSS规则会告诉浏览器 如何去表现HTML页面中的每个元素的特点
  15. 15. CSS规则由5个要素构成CSS规则 规则由 个要素构成
  16. 16. 通过选择器 通过选择器 来选择HTML页面中的 来选择HTML HTML页面中的 元素 p { color: red; }选择 选择器
  17. 17. 声明块包含所有的东西当然也包含方括号p { color: red; } 声明块
  18. 18. 声明告诉浏览器如何在页面中表现已 被选择的元素p { color: red; } 声明
  19. 19. 属性 p { color: red; } 属性
  20. 20. 对应属性的属性值p { color: red; } 属性值
  21. 21. Now… Now…什么是 继承? 继承?
  22. 22. 当有特定的CSS属性 传承 传承给后代 继承(儿子,孙子and so on)元素就是继承
  23. 23. 我们在实践中来看看继承,来看下面的HTML code<p> Lorem <em>ipsum</em> dolor sit amet consect etuer.</p>
  24. 24. em元素是包含在p元素里.
  25. 25. 看下面的CSS代码 Em元素并没有 单独特定的去定义他p { color: red; }
  26. 26. 在浏览器中查看P与em元素表现是一样的<em> 元素
  27. 27. 但是为什么em元素也是 红色的? 红色的?问题是我并没有给他任何 属性, 囧 。 。 。
  28. 28. 因为em元素从P那里继承了color:red属性(做儿子还有点儿好处的)
  29. 29. Why? Why?为什么要有继承
  30. 30. 简化开发继承被设计是用来简化开发
  31. 31. 否则, 我们需要去单独定义所有的所有的后代元素,look,p { color: red; }p em { color: red; }
  32. 32. 非常大 css文件将会变得非常大 非常大, 开发和维护将极为困难同时 下载速度 下载速度也将受到很大影响
  33. 33. ALL? ALL? 所有的css 所有的css属性都会继承吗?
  34. 34. Absolutely no!!!
  35. 35. 如果所有CSS属性 都会被继承, 非常严重的问题!那对开发者来说是非常严重的问题!!
  36. 36. 去掉开发者需要去掉后代元素 并不需要的属性。
  37. 37. What? 例如: 如果border属性 会被继承的话,将会发生什么?将会发生什么?
  38. 38. Okey, border 我们来给P元素一个border border属性 p { border: 1px solid red; }
  39. 39. 在P元素里的em元素也会有 红色的边框?<em> element
  40. 40. .幸运的是, .边框并没有被继承, .em元素并没有红色边框<em> element
  41. 41. 有利于通俗的讲,有利于 有利于简化开发的属性都会被继承
  42. 42. So, 哪些属性会被继承
  43. 43. 会被继承下面已列出会被继承 会被继承的 属性…
  44. 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. 45. 啊,啊,啊!会有这么多属性哦 最讨厌背东西了
  46. 46. 如此简单, 我们来个排列组合, 惊喜的发现, 属性系列是有几个主要的属性系列 属性系列组成
  47. 47. 相关属性都会被继承Text相关Text相关
  48. 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. 49. List相关属性都会被List相关继承
  50. 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. 51. 更重要的是,color属性会被继承
  52. 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. 53. font-size?font-size?Font-size会被继承吗Font-size会被继承吗
  54. 54. absolutely “yes”.然而font-size被继承不同于其他的属性
  55. 55. 被计算出来的值会被继承而不是其初始值
  56. 56. 在解释font-size如何来继承之前,我们需要知道font-size为什么为什么不是直接继承?
  57. 57. 让我们来用之前的 一个简单的htm代码实例开始<p> Lorem <em>ipsum</em> dolor sit amet consect etuer.</p>
  58. 58. 来看下面HTML结构
  59. 59. 这里我 仅仅 仅仅只给 p元素定 义了 font-size属性, 而em并没有单独定义p { font-size: 80%; }
  60. 60. Font-size的属性值为80%,那么em元素的font-size属性值 P应该为P的80%
  61. 61. 所以解释成文档应该像 下面这样: 下面这样:<em> element
  62. 62. 然而事实却不是这样的,em元素与P元素的大小是一样<em> 元素
  63. 63. ?那么font-size属性的继承到底 怎样执行的呢
  64. 64. 三个实例我们来看看三个实例
  65. 65. 我们还是使用与之前 一样的 HTML代码:<p> Lorem <em>ipsum</em> dolor sit amet consect etuer.</p>
  66. 66. 欧克,这里的文档结构也是一样的.
  67. 67. Example 1:Pixels(单位)Pixels(单位)
  68. 68. 我们给p元素的 font-size属性的值为 14px 14px.p { font-size: 14px; }
  69. 69. Px属性值(14px)会重写 Px属性值(14px)会 属性值(14px)浏览器默认的font-size的值(约为16px)。浏览器默认的font-size 的值(约为16px font-size的值(约为16px)。 新的属性值会被继承。
  70. 70. 所以em元素继承了14px属性值.元素 属性值 计算后的属性值默认font size 约16px<body> 未单独定义 约 16px<p> 14px 14px<em> 未单独定义 继承值 = 14px
  71. 71. Example 2: 百分比
  72. 72. 给p 元素 font-size属性值为 85% 85%. p { font-size: 85%; }
  73. 73. 浏览器默认的font-size值为16px, 浏览器默认的font-size 值为16px font-size值为 16px,那么计算出值为那么计算出值为16px x 85% =13.6px
  74. 74. 所以em元素会继承13.6px 这个计算出来的值元素 属性值 计算后的属性值默 认 的 font 约16pxsize<body> 未单独定义 约16px<p> 85% 16px x 85% = 13.6px<em> 未单独定义 继承属性值 = 13.6px
  75. 75. Example 3: EMs
  76. 76. 给<p>元素 font-size属性值为 .85em p { font-size: .85em; }
  77. 77. 欧克,我们再来算一算哦16px x .85em = 13.6px
  78. 78. 所以em元素继承属性值为 所以em em元素继承属性值为 13.6px .元素 属性值 计算后的属性值默认 font size 约 16px<body> 未单独定义 约16px<p> .85em 16px x .85em = 13.6px<em> 未单独定义 继承属性值 = 13.6px
  79. 79. 这些实例都太简单了。 在有比较多的标签而相对复杂的实例里是这样吗?
  80. 80. Example 4:
  81. 81. 所有的标签都定义了font-size 单位为百分比的 属性值.body { font-size: 85%; }h1 { font-size: 200%; }h2 { font-size: 150%; }
  82. 82. 浏览器默认的font-size为16pxbody元素font-size属性值为85%计算出16px x 85% =13.6px 这个值将被后代继承后代继承 除非后代元素重新定义
  83. 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. 84. 使用继承来提高我们的效率
  85. 85. 开发者能用继承性来写出 高效的CSS文件
  86. 86. For example,我们可以对body元素设置color, font-size and font-family 属性body { color: #222; font-family: arial, helvetica, sans-serif; font-size: 90%;}
  87. 87. 所有的后代元素 都会继承来自上面对body的属性设置.
  88. 88. 重写如果需要,您可以重写 重写新的属性。
  89. 89. body { color: #222; font-family: arial, helvetica, sans-serif; font-size: 90%;}h1, h2, h3 { color: green; }h4, h5, h6 { color: black; }
  90. 90. font-familyAnd,新的font-family font-family属性
  91. 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. 92. font-sizeAnd,新的font-size font-size属性
  93. 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. 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/)本译文仅供技术交流使用,转载请说明出处,禁止从事商业用途

×