Css inheritance继承详解
2011-10-29 23:30 youxin 阅读(590) 评论(0) 编辑 收藏 举报Css inheritance
以下的css属性是继承的。
Yikes（哎呀，可恶），that is a lot of properties
to simply things >让我们来看一看重要属性组。
Text-related properties 与文本有关的属性
font-family, font-size,font-style ,font-variant, font-weight;
font , letter-spacing,line-height;
text-align,text-indent,text-transform.word-spacing;
List-related properties
list-style-image;
list-style-position;
list-style-type;
list-style;
and,importantly,the color property is inherited;
color;
is font-size inherited?
Yes,however ,在许多属性里以不同的方式来继承（in differernt way)
Rather than the actual value being inherited,the calculated value is inherited;
在解释font-size怎样继承是。我们必须看看font-size为什么不直接继承呢？
let’s start with the same sample of html cod we used earlier;
<p>
Lorem <em>ipsum </em> dolor sit amet6 consec etuer
</p>
<em> sits inside the <p>
现在我们仅仅指定<p>
p { font-size:80%; }
照道理来说文档应该会是这样
Lorem ipsum dolor sit amet6 consec etuer
但是事实是<em>is the same size as the <p>
还来看看三个例子：
<p>
Lorem <em>ipsum </em> dolor sit amet6 consec etuer
</p>
EXAMPLE 1; Pixels
p{ font-size:14px; }
请注意 pixels are not recmmended for sizing fonts due to accessiblity issues associiated
older browsers such as ie5 and ie6
pixel value(14PX)OVERRIDES THE BROWSERS 默认的font-size(approx 16px) this new
value is inherited by descendants.
so,the <em> inherit the 14px value
| element | value | calculate value |
| default font size | approx 16px | |
| <body> | unspecified | approx 16px |
| <p> | 14px | 14px |
| <em> | unspecified | inherited value=14 |
EXAPLE 2: %
<p>has been given 85%
p { font-size :85%; }
so ,the <em>inherited the 13.6 calculated value
| element | value | calculated value |
| defaut font size | approx 16px | |
| <body> | unspecified | approx 16 |
| <p> | 85% | 16*85%=13.6 |
| <em> | unspecified | inherited 13.6 |
EXAMPLE 3: EMS
P{ font –size: .85 ;}
| element | value | calculated value |
| default font size | approx 16px | |
| <body> | unspecified | approx 16px |
| <p> | .85em | 16px*.85em=13.6px |
| <em> | unspecified | inheirt value 13.6 |
这些例子太简单了，使用不同的元素的更复杂的例子呢？
EXAMPLE 4：
all using percentage values ;
body { font-size ;85%; }
h1 {font –size :200%;}
h2 {font –size :150%: }
| element | value | calculated |
| default font size | approx 16px | |
| <body> | 85% | 16*85%=13.6px |
| <h1> | 200% | 13.6*200%=27.2px |
| <h2> | 150% | 13.6*150%=20.4 |
| <p> | unspecified | inherited value=13.6 |
| <em> | unspecified | inherited 13.6px |
using inheritance for efficieny
利用继承写出高效的css
