《CSS3实战》读书笔记 第4章:样式继承
2016-11-22 02:05
274 查看
节省你的时间——样式继承
### 什么是继承?
后代元素可以继承先代元素的一些属性。有了它,可以省去分别定义样式的时间。继承了方向是由外而内的。### 继承的局限性
应该注意到,有些属性是不适宜继承的。作为全局规则,背景色,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实战》读书笔记 第三章:选择器:样式实现的标记
- 读书笔记之继承与组合
- 《你必须知道的.net》读书笔记 002——1.2 什么是继承
- 【读书笔记】Spring实战(第4章 面向切面的Spring)
- 《LINUX与UNIX_Shell编程指南》读书笔记第4章文件名置换
- UI库阶段性进展(完成文字列表,样式列表(样式列表可继承))
- CSS默认可继承样式
- 【Effection C++】读书笔记 条款40:明智而审慎的使用多重继承
- 《Effective C++》第4章 设计与声明(2)-读书笔记
- CSS初步--样式的层叠和继承
- <<windows核心编程>>读书笔记---第4章 进程
- css004 用样式继承节省时间
- 《CSS3实战》读书笔记 第2章 层叠样式表(CSS)
- 《C++ Primer》读书笔记第十五章-2-虚函数、继承中的类作用域
- 《Unix环境高级编程》读书笔记 第4章-文件和目录
- CSS学习之样式继承(Inheritance)和优先级 - CSS: The Missing Manual
- 《App研发录》读书笔记 (4) 第4章 Android命名规范和编码规范
- Effective C++ 读书笔记(35-44):继承关系与面向对象设计
- 前端学习 -- Css -- 样式的继承
- CSS可以被继承的样式