乐美科技lession0127css属性继承机制.pptxVIP

CSS属性继承机制翻译：窦连军 @八月虎baidu原稿：Russ Weakley从文档树开始…document tree在了解继承机制之前，我们需要了解什么是…document tree.所有 HTML 文档都是“树（tree）”.文档树由 HTML 元素构成文档树好比你的家谱一个 祖先 指所有能够连接到的处于文档树顶端的元素。祖先 后代 指所有连接到的处于文档树底部的元素。后代后代 父亲 指连接到的在文档树中的直接上级。父亲 儿子 是指连接到的在文档树上的直接下级。儿子 兄弟 指与自己共同拥有同一父亲的其他元素。父亲兄弟接下来, 讲一些CSS知识在了解CSS属性继承之前，我们也需要懂一些基本的CSS规则CSS规则告诉浏览器如何去渲染 指定的HTML元素到页面屏幕上。CSS 规则由5大部分组成选择器（selector） “选择” HTML页面上那些满足指定条件的元素。p { color: red; }选择器样式声明块（declaration block） 是指两个大括号中间的部分内容。p { color: red; }样式声明块 样式声明（declaration） 告诉浏览器如何渲染那些页面上被选中的元素。p {color: red;}样式声明属性（property） 是指将被渲染的元素样式的某个方面。p { color: red; }属性名属性值（value） 指为样式属性所设置的具体样式。p { color: red; }属性值 现在，…什么是属性继承?所谓“属性继承”是指特定的CSS属性被向下传递到后代元素身上。我们通过使用下面的 HTML 代码 来具体说明“属性继承”现象。pLorem emipsum/em dolorsit amet consect etuer./p注意到 em 元素 被包含在 p 元素之内。我们接着继续使用该 CSS 代码。我们注意到 em 元素目前是没被选中！p { color: red; }但在浏览器中, p 和 em 元素都变成 红色啦em 元素为啥子 em 元素变成 红色 的呢？这个元素可是没有被CSS渲染过的呀！ 因为这个 em 元素从那个p元素中 继承 了颜色属性。为啥“属性继承”很有用?“属性继承”机制的建造目的就是想给网页作者提供 编写便利。否则，我们就不得不来为所有的后代元素指定属性了p { color: red; }p em { color: red; }CSS文件将变得 尺寸非常大，不仅下载缓慢，而且很难来编写和维护。难到所有的属性都会遵守继承机制吗？不是！并不是所有CSS属性都可以被继承!如果每个 CSS 属性都能自动继承，那么这将给网页作者带来巨大的麻烦 ！作者将不得不 关闭 并不想要被继承的那些CSS属性。例如，你这么想想默认情况下，如果 border（边框）属性被继承了我们设想在p元素上应用了border 属性p { border: 1px solid red; }位于p之内的em 元素也自动有了一个 红色边框。。。em 元素万幸的是, border（边框）是不会被 继承 的。em元素不会有一个红边框。em 元素一般来说，只有那些能给我们的工作带来便利的CSS 属性 才会有拥有继承机制。因而, 究竟哪些CSS属性可以被继承呢？下面的CSS 属性是可以被继承的…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啊？! 怎么有 这么多属性？为了简化理解，我们在这些属性集合中找到若干 关键组 出来。文本相关的属性 是可以继承的：azimuth, border-collapse, border-spacing,caption