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

2022-10-21 08:24:07

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

什么是继承？

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

继承的局限性

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

作为全局规则，背景色，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等不对内部的其它标签起作用。

码农公寓