《CSS3实战》读书笔记第4章：样式继承

节省你的时间——样式继承

什么是继承？

后代元素可以继承先代元素的一些属性。有了它，可以省去分别定义样式的时间。继承了方向是由外而内的。

继承的局限性

应该注意到，有些属性是不适宜继承的。

作为全局规则，背景色，margin ，border不继承。
浏览器定义的规则，比如h标题，超链接a，等不予继承
开发者应用自己定义的样式，不会继承先代属性。

综合案例：继承是怎样工作的

html骨架

<body>
<div><img src="images/headline.png" width="900" height="214" alt="CSS: The Missing Manual">
</div>
<h1>The Amazing World of CSS</h1>
<p><strong>Sed ut perspiciatis</strong> 假文 <a href="http://www.w3.org/Style/CSS/">W3C CSS Home Page</a>.</p>
<ul>
  <li>adipisci velit</li>
  <li>autem vel eum iure re</li>
  <li> ut lautem vel eum i</li>
</ul>
<h2>Who Knew CSS Had Such Power?</h2>
<p>假文 <strong>Sed ut perspiciatis</strong> 假文</p>
<h3>Not Me!</h3>
<p><strong>Sed ut perspiciatis</strong> 假文 <em>voluptatem accusantium</em> 假文 <strong>假文/p>
<h3>Me Neither!</h3>
<p><strong>Sed ut perspiciatis</strong>假文</p>
</body>

一级继承

样式表输入

p{
    color:f460;
}

所有p元素内的strong和<em>全都变成了橙色。但是<a>内的标记依然保持着原色。

用继承特性重定义整个页面

给body加上class="pagestyle"，然后定义这个class的样式：

    .pagestyle{
        font-family: "Helvatica Neue",arial,Helvatica,sans-serif;
        font-size: 18px;
        color: #bd8100;
        margin: 0 auto;
    }

发现除了p标记和a标记，所有的颜色变成了金色。p不继承body的样式
用类选择器而不用body标记选择器是为了方便维护。

继承的惰性

对p元素进行如下的样式定义

    p{
        color: #f60;
        margin-left: 50px;
        padding-left: 20px;
        border-left: solid 25px #bd8100;
    }

发现值有p元素本身起作用，换言之，p元素的border，margin，padding等不对内部的其它标签起作用。

《CSS3实战》读书笔记 第4章：样式继承