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. mysql查询之获取第n高薪水

    获取 Employee 表中第 n 高的薪水(Salary) +----+--------+ | Id | Salary | +----+--------+ | 1 | 100 | | 2 | 200 ...

  2. php imagick生成gif动画的方法

    >php imagick生成gif动画的方法<pre><?php$image=new Imagick();$animation = new Imagick(); //建立一个对 ...

  3. 轮胎魔术公式(Magic Fomula)模型

    魔术公式是用三角函数的组合公式拟合轮胎试验数据,用一套形式相同的公式就可以完整地表达轮胎的纵向力Fx.侧向力Fy.回正力矩Mz.翻转力矩Mx.阻力矩My以及纵向力.侧向力的联合作用工况,故称为“魔术公 ...

  4. LeetCode 946. 验证栈序列(Validate Stack Sequences) 26

    946. 验证栈序列 946. Validate Stack Sequences 题目描述 Given two sequences pushed and popped with distinct va ...

  5. 通过元类创建一个Python类

    通过元类创建一个Python类 最开始学pytohn的时候我们这样定义类 class ClassName: pass 当熟悉了元类的概念之后我们还可以这样创建 ClassName = type(&qu ...

  6. redis示例

    1. 引入redis相关包 <!-- redis 相关包--> <dependency> <groupId>org.springframework.data< ...

  7. 【转帖】两种IO模式：Proactor与Reactor模式

    两种IO模式:Proactor与Reactor模式 https://www.cnblogs.com/pigerhan/p/3474217.html. 挺好的说明了epoll和IOCP的区别 在高性能的 ...

  8. JAVAWEB实现增删查改(图书信息管理)之添加功能实现

    addBooks.jsp页面代码:↓ <%-- Created by IntelliJ IDEA. User: NFS Date: 2019-7-12 Time: 14:30 To change ...

  9. DP（动态规划）总结

    前言 动态规划是很重要的一个知识点,大大小小的比赛总会有一两道DP题,足以说明动态规划的重要性. 动态规划主要是思想,并没有固定的模板,那么,怎么判断题目是不是动态规划呢? DP题一般都会满足三个条件 ...

  10. 数组中重复的数字(Python)

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019-08-13 22:35 # @Author : daryl # @File : ...