像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            body{

                font-size: 30px;

                background-color: forestgreen;

            }

        </style>

    </head>

    <body>

        <div style="background-color: yellow;">

            <p>

                我是p标签中的文字

                <span>我是span中的文字</span>

            </p>

        </div>

        <span>我是p元素外的span</span>

    </body>

</html>

效果：

前端学习 -- Css -- 样式的继承的更多相关文章

  1. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  2. 前端04 /css样式

    前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...

  3. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  4. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签

    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...

  5. 前端之css样式（选择器）。。。

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  6. 前端之css样式01

    选择器,css文本属性 CSS语法: 选择器 {属性1: 值1; 属性2: 值2} CSS放置的位置: 1. 直接写在标签里面,通过style属性来设置CSS样式 2. 在head标签里面通过styl ...

  7. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. 前端之CSS样式

    一.CSS 1.什么是CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的 ...

  9. 前端之css样式（选择器）

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

随机推荐

  1. SVD（奇异值分解）小结

    注:奇异值分解在数据降维中有较多的应用,这里把它的原理简单总结一下,并且举一个图片压缩的例子,最后做一个简单的分析,希望能够给大家带来帮助. 1.特征值分解(EVD) 实对称矩阵 在理角奇异值分解之前 ...

  2. 【第十一课】Tomcat原理解析【转】

    目录 一.Tomcat顶层架构 二.Tomcat顶层架构小结: 三.Connector和Container的微妙关系 四.Connector架构分析 五.Container架构分析 六.Contain ...

  3. xml中该使用属性还是元素

    XML 中没有规定哪些必须放在属性或者子元素,因此使用哪种方式都是可以实现的.这取决于个人的经验和喜好.在可以使用元素也可以使用属性的两选一的情况下,个人更倾向于使用子元素.主要理由如下: 1. 属性 ...

  4. Scrapy爬虫入门实例

    网上关于Scracpy的讲述已经非常丰富了,而且还有大神翻译的官方文档,我就不重复造轮子了,自己写了一个小爬虫,遇到不少坑,也学到不少东西,在这里给大家分享一下,自己也做个备忘录. 主要功能就是爬取c ...

  5. asp.net web api参数

    翻译自:http://www.c-sharpcorner.com/article/parameter-binding-in-asp-net-web-api/ 主要自己学习下,说是翻译,主要是把文章的意 ...

  6. 菜鸟凉经(华为、firehome、大华)

    面试通知都是前一天来的,准备的时间很少,所以表现也不是特别满意,来看面经吧: 华为一面(IT应用工程师): 1.自我介绍:(华为面试都是1对1,面前的是个温柔的小哥,挺放松的) 2.你主要会的it技术 ...

  7. ejs 模板使用方法

    http://embeddedjs.com/ Embedded JS Templates Embedded JS(EJS) 来源于ERB模板,且与ERB有很多相似之处.它有着与ERB相同的Tag,且包 ...

  8. 详解JavaScript中的Event Loop（事件循环）机制

    前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...

  9. Final互评------《I do》---- 二次元梦之队

    一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; N(Need,需求):该产品是一款休闲类的解密游戏,背景是编程知识.作为一款休闲游戏,有着基本的娱乐功能,可以给用 ...

  10. Eclipse导入包提示Setting build path has encountered a problem

    Eclipse无法导入jar包时, 提示:“Setting build path” has encountered a problem,Could not write file D:\\workspa ...