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

什么是继承？

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

继承的局限性

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

  • 作为全局规则，背景色，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. codevs1227

    费用流,其实是求传输一个容量为k的流的最大费用.主要是建图.原点为0,和1连上一条容量为k,费用为0的边,中间每个点拆成两个1和2,连上一条边,容量为k,费用为c,再连一条容量为比k大,费用为0的边, ...

  2. [转]REST简介

    转自:http://www.cnblogs.com/loveis715/p/4669091.html 一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的 ...

  3. lucene-查询query->PhraseQuery多关键字的搜索

    用户在搜索引擎中进行搜索时,常常查找的并非是一个简单的单词,很有可能是几个不同的关键字.这些关键字之间要么是紧密相联,成为一个精确的短 语,要么是可能在这几个关键字之间还插有其他无关的关键字.此时,用 ...

  4. 10 函数的复写-override

    1.函数的复写:override 2.使用super调用父类的成员函数 class Person { String name; int age; void introduce() { System.o ...

  5. NPOI导出模板样式

    /// <summary> /// 导出多种车辆统计表格 /// </summary> /// <returns></returns> [ActionN ...

  6. 61.Android适配的那些P事(转)

    转载:http://www.jianshu.com/p/29ef8d3cca85 首先我们看看百度搜索引擎上常见的认识入手: 图1:屏幕分辨率和常见屏幕密度关系 我们知道屏幕密度直接关系到我们所谓的1 ...

  7. Java中Unicode的编码和实现

    Unicode的编码和实现 大概来说,Unicode编码系统可分为编码方式和实现方式两个层次. 编码方式 字符是抽象的最小文本单位.它没有固定的形状(可能是一个字形),而且没有值.“A”是一个字符,“ ...

  8. SQL Server修改代理作业的下次运行时间

    有这个现象,如果我把服务器时间调快2天运行作业,那么会发现作业的下次运行时间会变成两天+1的时间,即使是把服务器时间调正常后,这个下次运行时间也是无法调回来的 那么,要修改会正常的下次作业时间,可以这 ...

  9. Linux列出安装过的程序

    命令行: dpkg -l apt-cache(模糊搜索apt-cache search 包名) pkgnames yum list(ubuntu下试了无效) rpm -aq(ubuntu下试了无效)

  10. Win10中解决SYSTEM权限获取，删Windows old

    一.[Windows.old]文件夹[右键]->[属性] 二.[安全]->[高级] 三.[更改] 四.添加[Everyone],点击[确定] 五.如下图,勾选两个选项,再[确定] 六.一路 ...