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. 基于Emit的C#下DataTable转实体类方法,一直报错.

    xxxx ;WITH Tab AS ( SELECT CAST(ROW_NUMBER()OVER(ORDER BY CC.CreateTime DESC) AS INT) AS Sequency, ) ...

  2. [LeetCode] 387. First Unique Character in a String 字符串的第一个唯一字符

    Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...

  3. [LeetCode] 676. Implement Magic Dictionary 实现神奇字典

    Implement a magic directory with buildDict, and search methods. For the method buildDict, you'll be ...

  4. k8s 使用本地镜像的时候

    k8s默认会从远端拉取镜像,其配置参数imagePullPolicy为Always containers: - name: demo image: image imagePullPolicy: Nev ...

  5. Redis专栏

    后端开发都应该掌握的Redis基础 Redis实用监控工具一览

  6. LeetCode 503. 下一个更大元素 II(Next Greater Element II)

    503. 下一个更大元素 II 503. Next Greater Element II 题目描述 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 ...

  7. LeetCode 686. 重复叠加字符串匹配(Repeated String Match)

    686. 重复叠加字符串匹配 686. Repeated String Match 题目描述 给定两个字符串 A 和 B,寻找重复叠加字符串 A 的最小次数,使得字符串 B 成为叠加后的字符串 A 的 ...

  8. @FeignClient 情况下header的传递方法，RestTemplate情况下Header传递方法

    今天因为要调用另一个服务,因为我们用的是SpringCloud框架,所以通过Fegin调用,正好另一方服务有权限校验,需要传递token和设备ID,这两个参数都需要放到Header中, 用 @Requ ...

  9. [国家集训队] JZPKIL

    题目链接 洛谷:https://www.luogu.org/problemnew/show/P4464 Solution 这题是真的毒....数论大杂烩,窝断断续续写了两天. 众所周知: \[ {\r ...

  10. （转）数据库函数解析JSON字符串

    一.返回单行单列 二.返回表 三.SQL206版本开始支持 SELECT * FROM OPENJSON(@JsonStr)