Inheritance css继承

CssCssCssCss继承

CSSCSSCSSCSS

偶也，偶也，偶也，偶也，我们从文档树我们从文档树我们从文档树我们从文档树

（（（（DOMDOMDOMDOM treetreetreetree））））

开始开始开始开始

在我们研究继承性之前我们需要弄清楚documentdocumentdocumentdocument treetreetreetree

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

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

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

一个祖先元素(暂且这么说吧，发现翻译成根元素是不对的)

连接并牵引出所有的元素

祖先

一个后代元素后代元素后代元素后代元素牵引出所有元素

但他处于文档树低一级

后代元素

Descendants

我们亦可将bodybodybodybody元素元素元素元素

理解为父元素

父元素

Also，低一级的ulululul元素元素元素元素

理解为子元素

子元素

兄弟元素（LI）和他的兄弟姐妹们

有同一个爸爸同一个爸爸同一个爸爸同一个爸爸（UL）

相对父元素

兄弟姐妹们

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

在我们研究继承性之前，应该需要理解

CSS规则的基本原理.

CSS规则会告诉浏览器如何去表现

HTML页面中的每个元素的特点

CSSCSSCSSCSS规则规则规则规则由由由由5555个要素个要素个要素个要素构成构成构成构成

通过通过通过通过选择器选择器选择器选择器来选择来选择来选择来选择HTMLHTMLHTMLHTML页面中的页面中的页面中的页面中的

元素元素元素元素

p { color: red; }

选择选择选择选择 选择器选择器选择器选择器

声明块声明块声明块声明块包含所有的东西当然也包含方括号

p { color: red; }

声明块声明块声明块声明块

声明声明声明声明告诉浏览器如何在页面中表现已

被选择的元素

p { color: red; }

声明声明声明声明

属性属性属性属性

p { color: red; }

属性属性属性属性

对应属性的属性值

p { color: red; }

属性值属性值属性值属性值

NowNowNowNow…………什么是什么是什么是什么是

继承继承继承继承????

当有特定的CSS属性传承传承传承传承给后代

（儿子，孙子and so on）元素就是继承继承继承继承

我们在实践中来看看继承,来看下面的HTMLHTMLHTMLHTML codecodecodecode

<p>Lorem <em>ipsum</em> dolorsit amet consect etuer.

</p>

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

看下面的CSS代码Em元素并没有

单独特定的去定义他

p { color: red; }

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

<em><em><em><em> 元素元素元素元素

但是为什么em元素也是红色的红色的红色的红色的？？？？

问题是我并没有给他任何属性， 囧 。。。

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

WhyWhyWhyWhy？？？？

为什么要有继承为什么要有继承为什么要有继承为什么要有继承

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

否则，我们需要去单独定义

所有的所有的所有的所有的后代元素，look,

p { color: red; }p em { color: red; }

css文件将会变得非常大非常大非常大非常大，开发和维护将极为困难

同时 下载速度下载速度下载速度下载速度也将受到很大影响

ALLALLALLALL？？？？所有的所有的所有的所有的csscsscsscss

属性都会继承吗？属性都会继承吗？属性都会继承吗？属性都会继承吗？

AbsolutelyAbsolutelyAbsolutelyAbsolutely no!!!no!!!no!!!no!!!

如果所有CSS属性都会被继承，

那对开发者来说是非常严重的问题！！非常严重的问题！！非常严重的问题！！非常严重的问题！！

开发者需要去掉去掉去掉去掉

后代元素并不需要的属性。

What?What?What?What?例如：

如果border属性会被继承的话，

将会发生什么将会发生什么将会发生什么将会发生什么？？？？

Okey,我们来给P元素一个borderborderborderborder属性

p { border: 1px solid red; }

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

<em><em><em><em> elementelementelementelement

.幸运的是，

.边框并没有被继承，

.em元素并没有红色边框

<em><em><em><em> elementelementelementelement

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

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

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

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

啊，啊，啊!会有这么多属性哦

最讨厌背东西了

如此简单，我们来个排列组合，惊喜的发现，

是有几个主要的属性系列属性系列属性系列属性系列组成

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

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

ListListListList相关相关相关相关属性都会被属性都会被属性都会被属性都会被

继承继承继承继承

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

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

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

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

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

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

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

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

<p>Lorem <em>ipsum</em> dolorsit amet consect etuer.

</p>

来看下面HTML结构

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

p { font-size: 80%; }

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

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

<em><em><em><em> elementelementelementelement

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

<em><em><em><em> 元素元素元素元素

？？？？

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

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

我们还是使用与之前一样的

HTML代码:

<p>Lorem <em>ipsum</em> dolorsit amet consect etuer.

</p>

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

ExampleExampleExampleExample 1:1:1:1:PixelsPixelsPixelsPixels（单位）（单位）（单位）（单位）

我们给p元素的font-size属性的值为 14px14px14px14px.

p { font-size: 14px; }

PxPxPxPx属性值属性值属性值属性值(14px)(14px)(14px)(14px)会会会会重写重写重写重写浏览器默认的浏览器默认的浏览器默认的浏览器默认的font-sizefont-sizefont-sizefont-size的值（约为的值（约为的值（约为的值（约为16px16px16px16px）。）。）。）。

新的属性值会被继承。新的属性值会被继承。新的属性值会被继承。新的属性值会被继承。

元素 属性值 计算后的属性值

默认font size 约16px

<body> 未单独定义 约 16px

<p> 14px 14px

<em> 未单独定义 继承值 = 14px

所以em元素继承了14px属性值.

ExampleExampleExampleExample 2:2:2:2:百分比百分比百分比百分比

给p 元素 font-size属性值为 85%85%85%85%.

p { font-size: 85%; }

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

元素 属性值 计算后的属性值

默 认 的 fontsize

约16px

<body> 未单独定义 约16px

<p> 85% 16px x 85% = 13.6px

<em> 未单独定义 继承属性值 = 13.6px

所以em元素会继承13.6px这个计算出来的值

ExampleExampleExampleExample 3:3:3:3:EMsEMsEMsEMs

给<p>元素 font-size属性值为 .85em.85em.85em.85em

p { font-size: .85em; }

欧克，我们再来算一算哦欧克，我们再来算一算哦欧克，我们再来算一算哦欧克，我们再来算一算哦

16px x .85em = 13.6px

元素 属性值 计算后的属性值

默认 font size 约 16px

<body> 未单独定义 约16px

<p> .85em 16px x .85em = 13.6px

<em> 未单独定义 继承属性值 = 13.6px

所以所以所以所以emememem元素继承属性值为元素继承属性值为元素继承属性值为元素继承属性值为13.6px13.6px13.6px13.6px .

这些实例都太简单了。在有比较多的标签

而相对复杂的实例里是这样吗？

ExampleExampleExampleExample 4:4:4: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 约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-sizefont-sizefont-sizefont-size属性继承情况如下

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

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

For example,我们可以对body元素设置color, font-size and font-family 属性

body {color: #222;font-family: arial,helvetica, sans-serif;font-size: 90%;

}

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

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

body {color: #222;font-family: arial,helvetica, sans-serif;font-size: 90%;

}

h1, h2, h3 { color: green; }h4, h5, h6 { color: black; }

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

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;

}

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

}

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

WeWeWeWe’’’’rererere done!done!done!done!Connect::::Name:AlexE-mail:paintyang@hotmail.comSite: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/）本译文仅供技术交流使用，转载请说明出处，禁止从事商业用途