一、继承

继承：所谓CSS样式继承，就是子元素应用父元素的规则声明。（由这一特性，可将CSS属性分为可继承属性和非可继承属性。）
可继承属性：属性值可由父元素继承给子元素的属性称之为可继承属性。

哪些属性是可继承属性？

1、文本样式属性

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

2、字体样式属性

font、font-family、font-size、font-style、font-variant、font-weight

3、列表样式属性

list-style、list-style-image、list-style-position、list-style-type

4、color属性

注：这里特别解释:font-size属性(继承性比较特殊)    
不同于有准确的值被继承,font-size继承的是计算的值。

例如：

<!DOCTYPE html> 

<html lang=“utf8”>

    <head>

        <meta charset="utf-8">

        <title>Demo</title>

    </head>

    <body style="font-size:85%">

        body字体大小

        <h1 style="font-size:200%">h1字体大小</h1>

        <h2 style="font-size:150%">h2字体大小</h2>

        <p>p字体大小<em>em字体大小</em></p>

    </body>

</html>

元素 值 计算值
default font-size 16px  
<body> 85% 16px × 85% = 13.6px
<h1> 200% 13.6px × 200% = 27.2px
<h2> 150% 13.6px × 150% = 20.4px
<p> unspecified 13.6px
<em> unspecified 13.6px

即:除非font-size值被重新赋值,否则就按照上一次的尺寸大小值继续.比如上图中设置body字体为默认字体(通常为16px=1em)的85%(13.6px),那么下面的字体均为13.6px.而不是继续继承85%,让13.6再次乘以85%。

二、层叠

层叠：所谓CSS样式层叠就是DOM元素应用样式表中的规则覆盖继承样式的过程。

后端码农谈前端（CSS篇）第八课：继承与层叠的更多相关文章

  1. 后端码农谈前端（CSS篇）第二课：CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  2. 后端码农谈前端（CSS篇）第七课：定位与浮动

    一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...

  3. 后端码农谈前端（CSS篇）第六课：盒子模型

    元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边 ...

  4. 后端码农谈前端（CSS篇）第五课：CSS样式

    一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: ...

  5. 后端码农谈前端（CSS篇）第四课：选择器补充（伪类与伪元素）

    一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

  6. 后端码农谈前端（CSS篇）第三课：选择器

    一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...

  7. 后端码农谈前端（CSS篇）第一课：CSS概述

    一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...

  8. 后端码农谈前端（HTML篇）第三课：常见属性

    一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...

  9. 后端码农谈前端（HTML篇）第二课：常见元素

    一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...

随机推荐

  1. Android 断点续传 思路

    大部分http服务器本身是可以支持range字段和断点续传的.另外 http返回206字段表示支持断点续传. 但是遇到支持的服务器的时候,就需要手动去处理断点续传的功能. 客户端在请求文件的时候添加 ...

  2. Python学习之路--面向对象

    1.面向对象概述 面向过程:根据业务逻辑从上到下写垒代码  函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可  面向对象:对函数进行分类和封装,让开发“更快更好更强...”  面向 ...

  3. testMarkDown

    title: git常用命令 date: 2015-10-27 10:28:25 categories: git tags: git 添加 SSH 公钥 Windows 平台中,可以使用 Git Ba ...

  4. 解剖SQLSERVER 完结篇 关于Internals Viewer源代码

    解剖SQLSERVER 完结篇 关于Internals Viewer源代码 大家可能都用过Internals Viewer这个软件 <查看SQLSERVER内部数据页面的小插件Internals ...

  5. Visual Studio Xamarin编译Android项目出错的解决办法

    安装完Xamarin后,编译Android项目时,你会发现好长时间进度都不动,当你取消编译后,会发现其实是出错了,就是因在Android项目在第一次编译时要去google网站上下一个andorid s ...

  6. Android热修复技术选型（不在市场发布新版本的情况下,直接更新app）

    2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker,它们在原理各有不同,适用场景各异,到 ...

  7. js中的深复制和浅复制

    在实际情况中经常会遇到对对象复制的问题.比如在处理项目中的一笔多结构的数据存储或者调用,这个时候你就要对对象(json)进行操作,而不同的操作根据不同的需求来定义.其中最常见最普遍的是对对象的复制,重 ...

  8. 我YY的一个移动应用运营模式

    尽管自己也还是刚刚毕业不久的前端新人,但网上也不乏一些案例告诉我们有志不在年高,很多优秀的同龄人已经有了不错的成就,所以在切页面写onclick之余也在进行一些思考,前端程序员的出路到底在哪里? 一. ...

  9. GLFW初体验

    GLFW - 很遗憾,没有找到FW的确切含义,Wiki上没有,GLFW主页也没有.猜测F表示for,W表示Window GLFW是干啥用的? 一个轻量级的,开源的,跨平台的library.支持Open ...

  10. Winform文件下载之断点续传

    在本系列的前两篇文章中,分别向大家介绍了用于完成下载任务的 WebClinet 和 WinINet 的基本用法和一些实用技巧. 今天来为大家讲述下载过程中最常遇到的断点续传问题. 首先明确一点,本文所 ...