CSS Cascade [译]

1,303 views

Published on

Published in: Technology
2 Comments
5 Likes
Statistics
Notes
  • CSS Cascade [译]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • CSS Cascade [译]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,303
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
68
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

CSS Cascade [译]

  1. 1. CSS<br />CASCADE<br />[译]<br />
  2. 2. CSS规则的<br />背景资料<br />
  3. 3. CSS规则 告诉HTML如何<br />渲染元素<br />h2<br />{<br />color: blue;<br />margin: 1em;<br />}<br />
  4. 4. 选择器"选择" HTML 中将<br />被定义样式的元素.<br />h2<br />选择器<br />{<br /> color: blue;<br /> margin: 1em;<br />}<br />
  5. 5. 声明告诉浏览器<br />如何定义元素的样式.<br />h2<br />{<br />color: blue;<br />margin: 1em;<br />声明<br />}<br />
  6. 6. 属性是元素样式的<br />各个角度<br />h2<br />{<br />color: blue;<br />属性<br />margin: 1em;<br />}<br />
  7. 7. 属性值是属性对应的<br />具体样式<br />h2<br />{<br />color: blue;<br />margin: 1em;<br />属性值<br />}<br />
  8. 8. 样式表的<br />类型<br />
  9. 9. HTML 文档可以应用<br />三种样式<br />
  10. 10. 浏览器样式<br />浏览器给所有页面应用的样式, <br />也称浏览器"默认"样式.<br />
  11. 11. 用户定义样式<br />大部分现代浏览器允许用户<br />在浏览器中应用他们自定义<br />的样式<br />
  12. 12. 作者样式<br />站点作者可以对HTML文档<br />应用一个或多个样式<br />
  13. 13. 作者样式<br />
  14. 14. 作者可以通过三种方法给<br />HTML文档添加样式<br />
  15. 15. 内联样式通过HTML代码的<br />style属性应用到元素<br />使用style属性的内联样式<br /><body><br /><h2 style=“color: red;”><br />Heading here<br /></h2><br /><p><br />
  16. 16. 头部样式位于文档的头部<br />的style元素里<br /><style>元素里的头部样式<br /><head><br /><title>Document title</titl<br /><style type="text/css" medi<br />h2 { color: blue; }<br /></style><br />
  17. 17. 外部样式通过link或者<br />@import实现<br />使用link元素的外部样式<br /><title>Document title</titl<br /><link rel="stylesheet"<br />href=”my-styles.css”<br />type=”text/css"<br />media="screen” /><br />
  18. 18. CSS 规则<br />超负荷了!<br />
  19. 19. 浏览器需要处理来自浏览器, <br />用户和作者样式的CSS规则.<br />
  20. 20. 浏览器还需要处理来自各种<br />作者样式(外部, 头部和内联)<br />的CSS规则.<br />
  21. 21. 某些时候, 浏览器还需要处理<br />冲突的CSS规则.<br />
  22. 22. “冲突”是什么<br />意思?<br />
  23. 23. 冲突指的是多个CSS规则作<br />用在相同的元素和属性上.<br />h2 { color: blue; }<br />h2 { color: red; }<br />冲突的CSS 规则<br />
  24. 24. 冲突可以发生在不同类型样式的CSS规则上.<br />浏览器样式<br />h2 { color: blue; }<br />作者样式<br />h2 { color: red; }<br />
  25. 25. 冲突也可以发生在单个或多<br />个作者样式的CSS规则里.<br />作者样式1<br />h2 { color: blue; }<br />作者样式2<br />h2 { color: red; }<br />h2 { color: green; }<br />
  26. 26. 那哪条CSS规则<br />“赢”了呢?<br />
  27. 27. 需要四个步骤<br />来决定哪条CSS规则<br />“赢了”(即被应用到HTML文档)<br />
  28. 28. 第一步<br />
  29. 29. 收集所有应用到元素和属性<br />的来自于浏览器, 作者<br />和用户的样式声明<br />
  30. 30. 比如, 找到所有符合<br />以下条件的声明:<br />元素 = h2<br />属性 = color<br />
  31. 31. 收集到的声明<br />h2 { color: black; }<br />h2 { color: green; }<br />h2 { color: blue; }<br />#nav h2 { color: lime; }<br />Browser style sheet<br /> User style sheet<br /> Author style sheets<br />
  32. 32. 如果中有声明的来源超过三个来源中的一个, 进入步骤二.<br />
  33. 33. 第二步<br />
  34. 34. 将收集到的声明按来源(浏览器, <br />作者, 用户样式) 和重要性<br />(normal 或 !important) 分类.<br />
  35. 35. 什么是<br />!important?<br />
  36. 36. 作者可以指定任何声明为<br />“!important” .<br />h2 { color: red !important;}<br />!important<br />
  37. 37. “!important”声明可以<br />覆盖普通声明<br />(普通声明指的是不包含<br />!important的声明).<br />
  38. 38. 那么, 声明如何<br />分类?<br />
  39. 39. 优先级由低到高<br />1 浏览器样式<br />2 用户样式里的普通声明<br />3 作者样式里的普通声明<br />4 作者样式里的!important声明<br />5 用户样式里的!important声明<br />
  40. 40. 1. 浏览器样式<br />h2 { color: black; }<br />如果不存在其他声明,<br />浏览器声明获胜<br />Browser style sheet<br /> User style sheet<br /> Author style sheets<br />
  41. 41. 2. 普通用户样式<br />h2 { color: black; }<br />Browser style sheet<br />普通用户声明胜过浏览器声明<br />h2 { color: green; }<br />User style sheet<br />Author style sheets<br />
  42. 42. 3. 普通作者样式<br />h2 { color: black; }<br />Browser style sheet<br />普通作者声明胜过浏览器声明和普通用户声明<br />h2 { color: green; }<br />h2 { color: blue; }<br />User style sheet<br />Author style sheets<br />
  43. 43. 4. !important作者样式<br />h2 { color: black; }<br />Browser style sheet<br />!important 作者声明胜过所有普通声明<br />h2 { color: green; }<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br />User style sheet<br />Author style sheets<br />
  44. 44. 5. !important用户样式<br />h2 { color: black; }<br />Browser style sheet<br />!important 用户声明胜过 !important 作者声明<br />和所有普通声明<br />h2 { color: green; }<br />h2 { color: red !important;}<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br />User style sheet<br />Author style sheets<br />
  45. 45. 那如果两条声明的来源或重要性<br />相同,该怎么办呢?<br />
  46. 46. 有两条匹配的声明<br />h2 { color: black; }<br />h2 { color: green; }<br />Browser style sheet<br /> User style sheet<br />两条来源和重要性相同的声明<br />h2 { color: blue; }<br />h2 { color: lime; }<br />Author style sheets<br />
  47. 47. 如果声明的来源或重要性相同, <br />进入步骤三.<br />
  48. 48. 第三步<br />
  49. 49. 如果声明的来源和重要性都相同,<br />需要对声明的选择器进行评分,<br />来决定是哪条声明“赢了”.<br />
  50. 50. 选择器<br />#nav h2 { color: blue; }<br />h2.intro { color: red; }<br />选择器<br />
  51. 51. 四个分数连在一起(像链条一样) <br />得到最终的评分.<br />a,b,c,d<br />
  52. 52. 得分取决于选择器的优先级. <br />
  53. 53. 那优先级是如何<br />计算的?<br />
  54. 54. A. 是不是内联样式?<br /><h2 style=“color: red;”><br />This is a heading<br />a = 1 x </h2><br />inline styles<br />b = 0 x ID<p><br />c = 0 x classes Here is a paragraph of<br />d = 0 x element<br />Specificity = 1,0,0,0<br />
  55. 55. B. 统计选择器中ID的数量.<br />#nav{ color: red; }<br />a = 0 x inline styles<br />b = 1 x ID<br />c = 0 x classes<br />d = 0 x element<br />Specificity = 0,1,0,0<br />
  56. 56. C. 统计class,属性和<br />伪类的数量.<br /> .main { color: red; }<br />a = 0 x inline styles<br />b = 0 x ID<br />c = 1 x classes<br />d = 0 x element<br />Specificity = 0,0,1,0<br />
  57. 57. D. 统计元素名和伪元素的数量.<br />h2 { color: red; }<br />a = 0 x inline styles<br />b = 0 x ID<br />c = 0 x classes<br />d = 1 x element<br />Specificity = 0,0,0,1<br />
  58. 58. 优先级连接笔记<br />
  59. 59. “A” 始终优先于“B”, <br />“B”始终优先于“C”, <br />“C”始终优先于“D”.<br />
  60. 60. 不管选择器中有多少个ID , <br />只要一个内联样式就可以轻松获胜.<br />(除非ID的声明中使用了!important)<br />
  61. 61. External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />#one #two #three #four #five<br />#six #seven #eight #nine #ten<br />{ color: green; }<br /><h2 style=“color: purple;”><br />高亮的样式胜出因为优先级<br />1,0,0,0 胜过0,10,0,0<br />
  62. 62. 不管选择器中有多少个class , <br />只要一个ID就可以轻松获胜.<br />
  63. 63. External style sheets<br /> and header styles<br /> (Author styles)<br />.one .two .three .four .five<br />.six .seven .eight .nine .ten<br />{ color: green; }<br />#nav { color: lime; }<br />高亮的样式胜出因为优先级<br />0,1,0,0 胜过 0,0,10,0<br />
  64. 64. 不管选择器中有多少个元素名, <br />只要一个class就可以轻松获胜.<br />
  65. 65. External style sheets<br /> and header styles<br /> (Author styles)<br />div div div div div form<br />fieldset div label span<br />{ color: green; }<br />.intro { color: lime; }<br />高亮的样式胜出因为优先级<br />0,0,1,0 胜过 0,0,0,10<br />
  66. 66. 优先级的<br />复杂案例<br />
  67. 67. ID和元素<br />#nav h2 { color: red; }<br />a = 0 x inline styles<br />b = 1 x ID (#nav)<br />c = 0 x classes<br />d = 1 x element (h2)<br />Specificity = 0,1,0,1<br />
  68. 68. 元素和class<br />h2.intro { color: red; }<br />a = 0 x inline styles<br />b = 0 x ID<br />c = 1 x classes (.intro)<br />d = 1 x element (h2)<br />Specificity = 0,0,1,1<br />
  69. 69. ID, 元素和伪类<br />#navul li a:hover { color:<br />a = 0 x inline styles<br />b = 1 x ID (#nav)<br />c = 1 x pseudo-class (:hover)<br />d = 3 x elements (ul, li, a)<br />Specificity = 0,1,1,3<br />
  70. 70. 元素和伪元素<br />p:first-line { color: green<br />a = 0 x inline styles<br />b = 0 x ID<br />c = 0 x classes<br />d = 2 x element (p) and pseudo-element (:first-line)<br />Specificity = 0,0,0,2<br />
  71. 71. 元素和属性选择器<br />h2[title=“intro”] { color:<br />a = 0 x inline styles<br />b = 0 x ID<br />c = 1 x attribute selector ([title=“intro”])<br />d = 1 x element (h2)<br />Specificity = 0,0,1,1<br />
  72. 72. 如果还没 <br />分出胜负?<br />
  73. 73. 优先级相同的选择器<br />#nav h2 { color: red; }<br />#nav h2 { color: green; }<br />优先级 = 0,1,0,1<br />
  74. 74. 如果还没分出胜负, <br />进入步骤四.<br />
  75. 75. 第四步<br />
  76. 76. 如果两条声明有相同的<br />重要性、来源和优先级, <br />则后面的声明赢.<br />
  77. 77. 同等的声明<br />#nav h2 { color: green; }<br />#nav h2 { color: red; }<br />第二条声明获胜,因为他写在<br />第一条后面.<br />
  78. 78. 现在…<br />来些猜谜游戏<br />
  79. 79. 习题一<br />浏览器, 用户, 作者<br />
  80. 80. Part 1: 哪个赢了?<br />
  81. 81. Browser style sheet<br /> User style sheet<br /> External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: black; }<br />h2 { color: green; }<br />
  82. 82. Browser style sheet<br /> User style sheet<br />h2 { color: black; }<br />h2 { color: green; }<br />普通用户声明从来源上胜过浏览器声明<br />External style sheets<br />and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />
  83. 83. Part 2: 哪个赢了?<br />
  84. 84. Browser style sheet<br /> User style sheet<br /> External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: black; }<br />h2 { color: green; }<br />h2 { color: blue; }<br />
  85. 85. Browser style sheet<br /> User style sheet<br />External style sheets<br /> and header styles<br /> (Author styles)<br />h2 { color: black; }<br />h2 { color: green; }<br />h2 { color: blue; }<br />作者声明从来源上胜过浏览器和用户声明<br />HTML document with<br />inline styles<br />(Author styles)<br />
  86. 86. Part 3: 哪个赢了?<br />
  87. 87. Browser style sheet<br /> User style sheet<br /> External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: black; }<br />h2 { color: green; }<br />h2 { color: blue; }<br /><h2 style=“color: purple;”><br />
  88. 88. Browser style sheet<br />h2 { color: black; }<br />User style sheet<br />h2 { color:<br />普通内联声明胜过普通外部和头部声明,因为<br />优先级 1,0,0,0 胜过0,0,0,1<br />External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: blue; }<br /><h2 style=“color: purple;”><br />
  89. 89. Part 4: 哪个赢了?<br />
  90. 90. Browser style sheet<br /> User style sheet<br /> External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: black; }<br />h2 { color: green; }<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br /><h2 style=“color: purple;”><br />
  91. 91. Browser style sheet<br /> User style sheet<br />h2 { color: black; }<br />h2 { color: green; }<br />!important 作者样式 胜过普通浏览器、用户<br />和作者样式<br />External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br /><h2 style=“color: purple;”><br />
  92. 92. Part 5: 哪个赢了?<br />
  93. 93. Browser style sheet<br /> User style sheet<br /> External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: black; }<br />h2 { color: green; }<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br /><h2 style=“color: purple<br />!important;”><br />
  94. 94. Browser style sheet<br />h2 { color: black; }<br />User style sheet<br />!important 内联作者声明胜过 !important 外部作者<br />声明和头部声明,因为优先级 1,0,0,0 胜过 0,0,0,1<br />External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br /><h2 style=“color: purple<br />!important;”><br />
  95. 95. Part 6: 哪个赢了?<br />
  96. 96. Browser style sheet<br /> User style sheet<br /> External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: black; }<br />h2 { color: green; }<br />h2 { color: gray !important; }<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br /><h2 style=“color: purple<br />!important;”><br />
  97. 97. Browser style sheet<br />h2 { color: black;<br />!important 用户声明胜过 !important 作者声明<br />(不管他们是外部、头部还是内联)<br />User style sheet<br /> External style sheets<br /> and header styles<br /> (Author styles)<br />HTML document with<br /> inline styles<br /> (Author styles)<br />h2 { color: green; }<br />h2 { color: gray !important; }<br />h2 { color: blue; }<br />h2 { color: lime !important; }<br /><h2 style=“color: purple<br />!important;”><br />
  98. 98. 习题二<br />作者的外部, 头部和内联CSS<br />
  99. 99. Part 1: 哪个赢了?<br />
  100. 100. External style sheets<br /> and header styles<br /> (Author styles)<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />
  101. 101. 高亮的声明胜出,因为优先级<br />0,0,1,1 胜过 0,0,0,1<br />External style sheets<br /> and header styles<br /> (Author styles)<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />
  102. 102. Part 2: 哪个赢了?<br />
  103. 103. External style sheets<br /> and header styles<br /> (Author styles)<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />h2.news { color: green; }<br />
  104. 104. 高亮的声明和第一个声明优先级相同(0,0,1,1).<br />但是他写在后面,所以他胜出!<br />External style sheets<br /> and header styles<br /> (Author styles)<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />h2.news { color: green; }<br />
  105. 105. Part 3: 哪个赢了?<br />
  106. 106. External style sheets<br /> and header styles<br /> (Author styles)<br />#nav h2 { color: lime; }<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />h2.news { color: green; }<br />
  107. 107. 高亮的选择器胜出, 因为优先级<br />0,1,0,1 胜过 0,0,1,1 和0,0,0,1<br />External style sheets<br /> and header styles<br /> (Author styles)<br />#nav h2 { color: lime; }<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />h2.news { color: green; }<br />
  108. 108. Part 4: 哪个赢了?<br />
  109. 109. External style sheets<br /> and header styles<br /> (Author styles)<br />#nav h2 { color: lime; }<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />h2.news { color: green; }<br />div#nav h2 { color: lime; }<br />
  110. 110. 高亮的选择器胜出, 因为优先级<br />0,1,0,2 胜过 0,1,0,1 和 0,0,1,1 和0,0,0,1<br />External style sheets<br /> and header styles<br /> (Author styles)<br />#nav h2 { color: lime; }<br />h2.news { color: #eee; }<br />h2 { color: blue; }<br />h2.news { color: green; }<br />div#nav h2 { color: lime; }<br />
  111. 111. 搞定!<br />

×