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

什么是继承？

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

继承的局限性

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

  • 作为全局规则，背景色，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章：样式继承的更多相关文章

  1. C++ primer plus读书笔记——第13章 类继承

    第13章 类继承 1. 如果购买厂商的C库,除非厂商提供库函数的源代码,否则您将无法根据自己的需求,对函数进行扩展或修改.但如果是类库,只要其提供了类方法的头文件和编译后的代码,仍可以使用库中的类派生 ...

  2. jQuery 实战读书笔记之第二章：选择元素

    基本选择器 html 代码如下,后面的 js 使用的 html 基本大同小异. <!doctype html> <html> <head> <title> ...

  3. Spring3.x企业开发应用实战读书笔记 —— 第三章IoC容器概述

    声明:    本篇博客绝大多数内容为<Spring3.x企业开发应用实战>一书原内容,所有版权归原书作者所有!,仅供学习参考,勿作他用! 3.2 相关Java基础知识 Java语言允许通过 ...

  4. Spring AOP （Spring 3.x 企业应用开发实战读书笔记第六章）

    从面相对象编程到面相切面编程,是一种代码组织方式的进化. 每一代的代码组织方式,其实是为了解决当时面对的问题.比如写编译器和写操作系统的时候的年代当然要pop,比如写界面的时候当然要oop,因为界面这 ...

  5. 机器学习实战 - 读书笔记(13) - 利用PCA来简化数据

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第13章 - 利用PCA来简化数据. 这里介绍,机器学习中的降维技术,可简化样品数据. ...

  6. 机器学习实战 - 读书笔记(12) - 使用FP-growth算法来高效发现频繁项集

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第12章 - 使用FP-growth算法来高效发现频繁项集. 基本概念 FP-growt ...

  7. 机器学习实战 - 读书笔记(11) - 使用Apriori算法进行关联分析

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第11章 - 使用Apriori算法进行关联分析. 基本概念 关联分析(associat ...

  8. 机器学习实战 - 读书笔记(07) - 利用AdaBoost元算法提高分类性能

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习笔记,这次是第7章 - 利用AdaBoost元算法提高分类性能. 核心思想 在使用某个特定的算法是, ...

  9. iPhone与iPad开发实战读书笔记

    iPhone开发一些读书笔记 手机应用分类1.教育工具2.生活工具3.社交应用4.定位工具5.游戏6.报纸和杂志的阅读器7.移动办公应用8.财经工具9.手机购物应用10.风景区相关应用11.旅游相关的 ...

  10. <<Java RESTful Web Service实战>> 读书笔记

    <<Java RESTful Web Service实战>> 读书笔记 第一章   JAX-RS2.0入门 REST (Representational State ransf ...

随机推荐

  1. HTML5基础知识（2）--标题标签的使用

    1.HTML文档中包含各种级别的标题,各种级别的标题由<h1>到<h6>元素来定义,<h1>至<h6>标题标记中的字母h是英文headline的简称.其 ...

  2. iOS开发中的错误整理，Changing the delegate of a tab bar managed by a tab bar controller is not allowed

    iOS [错误:'Changing the delegate of a tab bar managed by a tab bar controller is not allowed.'] 错误:'Ch ...

  3. 【POJ 1113】Wall

    http://poj.org/problem?id=1113 夏令营讲课时的求凸包例题,据说是PKUSC2015的一道题 我WA两次错在四舍五入上了(=ﾟωﾟ)ﾉ #include<cmath& ...

  4. 【BZOJ 2301】【HAOI 2011】Problem b

    今天才知道莫比乌斯反演还可以这样:$$F(n)=\sum_{n|d}f(d) \Rightarrow f(n)=\sum_{n|d}\mu(\frac{d}{n})F(d)$$我好弱,,,对于$$F( ...

  5. splay HYSBZ1588

    n天 n个营业额; sum(min(abs(wi-前面))); splay维护一下就可以 #include<stdio.h> #include<algorithm> #incl ...

  6. 【转】oracle数据库开发的一些经验积累

    1.不安装Oracle客户连接Oracle 8的方法  请将以下文件拷贝到运行文件所在目录 一.ODBC动态库 : ctl3d32.dll msvcrt40.dll odbc16gt.dll odbc ...

  7. 【凯子哥带你学Framework】Activity界面显示全解析

    前几天凯子哥写的Framework层的解析文章<Activity启动过程全解析>,反响还不错,这说明“写让大家都能看懂的Framework解析文章”的思想是基本正确的. 我个人觉得,深入分 ...

  8. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  9. Python之几种重要的基本类型：元组，列表，字典，字符串，集合

    写在前面:重点讲解元组,列表,字典相关概念和常用操作. 一.元组(tuple) 1.特性:不可更改的数据序列.[理解:一旦创建元组,则这个元组就不能被修改,即不能对元组进行更新.增加.删除操作] 2. ...

  10. 【HDU 5818多校】Joint Stacks

    用两个栈模拟,并保存每个点的时间戳.每次合并的时候记录合并时的时间戳mcnt和此时的topa和topb记做ta.tb. 每次pop的时候,如果栈的top的时间戳大于mcnt,则普通地pop,否则就在两 ...