《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章：样式继承的更多相关文章
- C++ primer plus读书笔记——第13章 类继承
第13章 类继承 1. 如果购买厂商的C库,除非厂商提供库函数的源代码,否则您将无法根据自己的需求,对函数进行扩展或修改.但如果是类库,只要其提供了类方法的头文件和编译后的代码,仍可以使用库中的类派生 ...
- jQuery 实战读书笔记之第二章：选择元素
基本选择器 html 代码如下,后面的 js 使用的 html 基本大同小异. <!doctype html> <html> <head> <title> ...
- Spring3.x企业开发应用实战读书笔记 —— 第三章IoC容器概述
声明: 本篇博客绝大多数内容为<Spring3.x企业开发应用实战>一书原内容,所有版权归原书作者所有!,仅供学习参考,勿作他用! 3.2 相关Java基础知识 Java语言允许通过 ...
- Spring AOP （Spring 3.x 企业应用开发实战读书笔记第六章）
从面相对象编程到面相切面编程,是一种代码组织方式的进化. 每一代的代码组织方式,其实是为了解决当时面对的问题.比如写编译器和写操作系统的时候的年代当然要pop,比如写界面的时候当然要oop,因为界面这 ...
- 机器学习实战 - 读书笔记(13) - 利用PCA来简化数据
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第13章 - 利用PCA来简化数据. 这里介绍,机器学习中的降维技术,可简化样品数据. ...
- 机器学习实战 - 读书笔记(12) - 使用FP-growth算法来高效发现频繁项集
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第12章 - 使用FP-growth算法来高效发现频繁项集. 基本概念 FP-growt ...
- 机器学习实战 - 读书笔记(11) - 使用Apriori算法进行关联分析
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第11章 - 使用Apriori算法进行关联分析. 基本概念 关联分析(associat ...
- 机器学习实战 - 读书笔记(07) - 利用AdaBoost元算法提高分类性能
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习笔记,这次是第7章 - 利用AdaBoost元算法提高分类性能. 核心思想 在使用某个特定的算法是, ...
- iPhone与iPad开发实战读书笔记
iPhone开发一些读书笔记 手机应用分类1.教育工具2.生活工具3.社交应用4.定位工具5.游戏6.报纸和杂志的阅读器7.移动办公应用8.财经工具9.手机购物应用10.风景区相关应用11.旅游相关的 ...
- <<Java RESTful Web Service实战>> 读书笔记
<<Java RESTful Web Service实战>> 读书笔记 第一章 JAX-RS2.0入门 REST (Representational State ransf ...
随机推荐
- jQuery基础--样式篇（1）
1.jQuery简介:JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari ...
- Android获取屏幕宽度、高度的4种方法
记录学习之用,有相同的问题可以参考 方法一: WindowManager wm = (WindowManager) this .getSystemService(Context.WINDOW_SERV ...
- c#学习<三>：特性
特性(Attribute) 用于在运行时传递程序中各种元素(比如类.方法.结构.枚举.组件等)的行为信息的声明性标签.您可以通过使用特性向程序添加声明性信息.一个声明性标签是通过放置在它所应用的元素前 ...
- mysql-拼接字段concat，concat_ws函数
Mysql的查询结果行字段拼接,可以用下面两个函数实现: 1. concat函数 mysql') from test ; +---------------------+ ') | +--------- ...
- HTTP协议学习---（十二）理解转发与重定向
解释一 转发是服务器行为,重定向是客户端行为.为什么这样说呢,这就要看两个动作的工作流程: 转发过程:客户浏览器发送http请求---->web服务器接受此请求-->调用内部的一个方法在容 ...
- js 上传文件模拟Form 表单
使用FormData对象 在本文章中 创建一个FormData对象 使用HTML表单来初始化一个FormData对象 使用FormData对象发送文件 利用FormData对象,你可以使用一系列的键值 ...
- Hanio汉诺塔代码递归实现
1.背景介绍 Hanio (汉诺塔,又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘 ...
- NGUI之输入文本框的使用
ToolBar中的两个红圈 另,代码如下:只需要定义一个变量即可,然后将控件drag到那里,真的是灰常方便呀 还有一个就是保存了(OK的响应),可以简单地理解为存档或读档
- 一个千万量级的APP使用的一些第三方库
转载:http://www.jianshu.com/p/dc8c05cf693d .背景 前段时间在调研第三方推送服务的时候,反编译了一部分市面上比较流行的APP.其中一个无论是在设计还是功能上都堪称 ...
- css-IE中的border-radius和box-shadow
1.今天遇到一个问题,在给一个图片设置border-radius时,firefox和chrome表现正常,但是在IE中就无效,在IE中必须给图片设置一个边框,比如设置一个透明的边框就可以正常显示. 2 ...