像儿子可以继承父亲的遗产一样，在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. 20155304《网络对抗》MSF基础应用

    20155304<网络对抗>MSF基础应用 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.1一个主动攻击实践,如ms08_ ...

  2. 在ListBoxItem的样式中的button传参,把当前选中项传递到命令的方法

    原文:在ListBoxItem的样式中的button传参,把当前选中项传递到命令的方法 前端页面: <Style x:Key="ThumbItemStyle" TargetT ...

  3. Luogu P1972 [SDOI2009]HH的项链

    很清新自然凶猛的数据结构题,都是套路啊 我们可以考虑离线做,先把区间按右端点从小到大排序 首先注意到一种贝壳如果在一段中出现超过1次,那么它在前面或后面就无关紧要了 举一个例子: 对于数列1 2 3 ...

  4. EZ 2018 03 30 NOIP2018 模拟赛（六）

    链接:http://211.140.156.254:2333/contest/67 转眼间上次加回来的Rating又掉完了. 这次不知为何特别水,T1想了一段时间没想出来弃了,导致后面心态炸了. T2 ...

  5. [CTSC2006]歌唱王国

    [CTSC2006]歌唱王国 Tags:题解 题意 链接:在空串后不断随机添加字符,直到出现串\(S_i\)为止.求最终串的期望长度.\(\sum |S_i|\le 5*10^6\) 题解 以下内容来 ...

  6. libgdx学习记录6——动作Action

    libgdx中的Action类能够有效的帮助我们实现位移.旋转.缩放.淡入淡出等效果,对游戏的设计很有用. Action是一个抽象类,本身不可以实例化.一般使用的它的继承类,常用的有 MoveToAc ...

  7. [UOJ#461]新年的Dog划分[二分图染色、二分]

    题意 给你一张无向连通图,你并不知道有哪些边,你首先要回答这张图是否是二分图,如果是,回答这张图黑白染色过后的任意一个点集.你需要在2000次询问内找到结果,每次你可以询问原图中一个边集删掉后是否还连 ...

  8. [BZOJ4144][AMPPZ2014]Petrol[多源最短路+MST]

    题意 题目链接 分析 假设在 \(a \rightarrow b\) 的最短路径中出现了一个点 \(x\) 满足到 \(x\) 最近的点是 \(c\) ,那么我们完全可以从 \(a\) 直接走到 \( ...

  9. 命令行启用IIS Express

    我们在调试WEB程序的时候可以把本地web程序挂载到本地IIS,然后访问程序,通过附加进程的方式(w3wp)来调试程序(个人非常喜欢的一种调试方式),还有一种比较传统的方式就是通过VS自带的F5来执行 ...

  10. Express模版引擎hbs备忘

    最近几天折腾了下express,想找个合适的模版引擎,下面是一些折腾过程的备忘 选择标准 选择一门模版语言时,可能会考虑的几点 语法友好(micro tmpl那种语法真是够了) 支持模版嵌套(子模版的 ...