HTML&CSS基础-样式的继承

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>样式的继承</title>

        <style type="text/css">

            body{

                font-size: 30px;

            }

        </style>

    </head>

    <body>

        <!--

            像儿子可以继承父亲的遗产意义，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,利用继承，可以将一些基本的样式设置给祖先样式，这样所有的后代元素将会自动继承这些样式

            但并不是所有的样式都会被子元素所继承，比如:背景相关的样式，边框相关的样式，定位相关的样式都不会被继承.

            温馨提示:

                所有元素默认背景颜色都是透明的("transparent")。

        -->

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

            <p>

                我是p标签中的文字

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

            </p>

        </div>

        <span>我是div元素外的span文字</span>

    </body>

</html>

二.浏览器打开以上代码渲染结果

三.使用官方手册查看“background-color”属性的继承性

1>.如下图所示，点击"HTML/CSS"

2>.如下图所示，点击"CSS"

3>.如下图所示，点击"CSS 背景"

4>.如下图所示，点击"background-color"

5>.查看"继承性"

 6>.查看默认值是透明的("transparent")

四.使用官方手册查看“background-color”属性的继承性

1>.如下图所示，点击"HTML/CSS"

2>.如下图所示，点击"CSS"

3>.如下图所示，点击"CSS 字体"

4>.如下图所示,点击"font-size"

5>.如下图所示，我们查看到"font-size"属性是可以继承的

HTML&CSS基础-样式的继承的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  3. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  4. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  5. css基础样式

    1.行间样式:在标签中添加<style>属性      格式:标签名 style="样式:样式值1;样式2=样式值2"   2.内嵌样式:在<head>&l ...

  6. CSS 基础 优先级 选择器 继承

    1.样式优先级 (内联样式)Inline style     >    (内部样式)Internal style sheet     >     (外部样式)External style ...

  7. CSS基础-层叠与继承

    继承 一些属性可以被继承,一些不可以. 一般来说,字体颜色.字体大小会被继承,关于形状的如 padding .border .margin.width等就不会被继承.哪些属性属于默认继承很大程度上是由 ...

  8. css样式表分类、选择器分类、css基础样式

    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...

  9. CSS 基础样式

    文本 p{ font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Time ...

随机推荐

  1. uni-app v-for循环遍历 动态切换class、动态切换style

    动态切换class,主要代码::class="i.themColor"  <view v-for="i in htmlJSON" class=" ...

  2. 【电商日志项目之五】数据分析-MR方式

    环境 hadoop-2.6.5 hbase-0.98.12.1-hadoop2 新增用户指标分析(1)用户分析模块 (2)浏览器分析模块 根据分析效果图,找出分析的维度:用户分析是指某个时间段内的数量 ...

  3. 高级UI-高级渲染

    在使用了Panit画笔之后,可以对其进行渲染,从而达到更加人性化的方式 渲染分类 按常用渲染方式可以分为以下几种: BimapShader位图的图像渲染器 LinearGradient线性渲染 Rad ...

  4. TIBCO Jaspersoft Studio 报表软件使用教程

    Detail 1里面放置动态内容框可以循环遍历数据 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn ...

  5. 四、Spring中使用@Conditional按照条件注册Bean

    以前其实是写过@Condtional注解的笔记的,这里附上链接: Spring中的@conditional注解 但已经忘记的差不多了,所以今天再重新学习下,可以互补着学习 @Contional:按照一 ...

  6. ubuntu18.04安装Anaconda

    jiangshan@dell-Precision-7920-Tower:~$ lsAnaconda3-2019.07-Linux-x86_64.shjiangshan@dell-Precision-7 ...

  7. [转帖]DCEP究竟是什么？

    DCEP究竟是什么? https://www.cnblogs.com/kaixin2018/p/11795534.html DCEP (Digital Currency Electronic Paym ...

  8. Appium移动端自动化测试--录制测试用例并运行

    目录 文章目录如下 录制用例并执行 1.使用Appium desktop录制用例 2.安装Pythony依赖Appium-Python-Client 3.增加隐式等待增强稳定性 4.重新运行 文章目录 ...

  9. TiDB基本架构简单总结

    TiDB特点 高可用 水平拓展 事务 SQL支持 TiDB架构 ​ 和MySql不同,TiDB是一个分布式的数据库而不是单个进程,所以整个TiDB是由以下角色组成: TiKV, PD, TiDB, T ...

  10. SAS学习笔记57 template的管理

    template查询 首先点击SAS Windows左上方查询框,输入“odst”或者“odstemplates”,如下所示: 然后点击enter键,进入查询的template文件夹,如下所示: 这里 ...