CSS样式继承介绍

  • 外层元素身上的样式会被内层元素所继承。
  • 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式。
  • 并不是所有的样式都能够继承，只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承。

CSS样式继承实践

  • 外层元素身上的样式会被内层元素所继承，这句话的实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>继承性</title>

    <style>

        body{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <h2>微笑是最初的信仰</h2>

        <p>微笑是最初的信仰</p>

    </div>

</body>

</html>

  • 结果图

  • 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式，这句话的实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>继承性</title>

    <style>

        body{

            color: red;

            font-size: 18px;

        }

        div{

            color: springgreen;

        }

    </style>

</head>

<body>

    <div>

        <h2>微笑是最初的信仰</h2>

        <p>微笑是最初的信仰</p>

    </div>

</body>

</html>

  • 结果图

  • 并不是所有的样式都能够继承，只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承，这句话的实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>继承性</title>

    <style>

        body{

            color: red;

            font-size: 18px;

        }

        div{

            color: springgreen;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div>

        <h2>微笑是最初的信仰</h2>

        <p>微笑是最初的信仰</p>

    </div>

</body>

</html>

  • 结果图

CSS样式继承性的更多相关文章

  1. CSS样式----CSS的继承性和层叠性（图文详解）

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

  2. css样式的继承性、层叠性 、优先级

    一.css样式的继承性: 作用:给父元素设置一些属性,子元素也可以使用 应用场景: 一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容.优化代码,降低工作量 注意点: 1.并不 ...

  3. CSS样式----CSS样式表的继承性和层叠性（图文详解）

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  4. 【CSS】我的样式哪里来的？—— css的继承性

    在之前我们写css的时候,曾经出现过如下这样一种情况: 6继承性.html(head部分) <style> div { background-color: #ccc; font-size: ...

  5. css的继承性

    为了减少css的代码量,很多时候,我们必须要非常重视css的继承性 1.首先,有些属性是不能继承的.这没有任何原因,只是因为它就是这么设置的.举个例子来说:border属性,大家都知道,border属 ...

  6. CSS样式总结

    CSS: Cascading Style Sheet,层叠样式表 Css由三部分组成:选择符.样式属性.值: 基本语法:选择符 {样式属性:值:样式属性:值.....} 一,选择器 常用的选择器有:标 ...

  7. CSS3学习笔记-1：CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

  8. CSS的继承性与优先级

    一.CSS的继承性 在CSS中不可继承的属性:display.margin.padding.border.background.width.min-width.max-width.height.min ...

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

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

随机推荐

  1. 3、看源码MVC中的Controllr的Json方法

    无论ViewResult还是JsonResult都继承ActionResult,ActionResult里只有一个方法ExecuteResult 1.Controllr的Json方法 实际上是new ...

  2. 《CSAPP》实验一：位操作

    <CSAPP>号称程序员圣经,虽然中文译名为<深入理解计算机系统>,但其实没那么"深",只是覆盖面很广,一般用作计算机专业大一导论课的教科书.早就听闻书上配 ...

  3. Java生鲜电商平台-生鲜系统中商品订单系统售后系统设计

    Java生鲜电商平台-生鲜系统中商品订单系统售后系统设计(服务订单履约系统) 说明: 电商之下,我们几乎能从电商平台上买到任何我们日常需要的商品,但是对于很多商品来说,用户购买发货后,只是整个交易流程 ...

  4. AI: Web: 1 Vulnhub Walkthrough

    下载链接: https://www.vulnhub.com/entry/ai-web-1,353/ 主机发现扫描: 主机端口扫描 http://10.10.202.158/ 目录扫描: ╰─ sudo ...

  5. Leetcode823 : 因子二叉树问题

    问题描述 给定一个数组,数组中的数不重复,且均大于1.要求使用数组中的数构建二叉树,每个数字可以被重复使用,除了叶子节点,每个节点的值等于其子节点的乘积,求构建二叉树的数量,返回的结果mod 10** ...

  6. 【数据库】SQLite3常用函数

    版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ SQLite3常用函数 打开数据库 函数原型: int sqlite3_open(co ...

  7. 对token机制的学习和分析

    token,中文意思为令牌,是用户登录后会返回的一个字符串,里面包括用户信息.登录时间等,但是是加密过的密文,其加解密方式由后端决定. 在登录之后的接口请求中,前端需在请求中统一加上token,从而识 ...

  8. JVM进入老年代情况

    1.躲过15次GC之后进入老年代 默认的设置下,当对象的年龄达到15岁的时候,也就是躲过15次Gc的时候,他就会转移到老年代中去 这个具体是多少岁进入老年代,可以通过JVM参数 “-XX:MaxTen ...

  9. [转]UiPath Keyboard Shortcuts

    本文转自:https://docs.uipath.com/studio/docs/keyboard-shortcuts The complete list of keyboard shortcuts ...

  10. 基于Python的SQL Server数据库对象同步轻量级实现

    缘由 日常工作中经常遇到类似的问题:把某个服务器上的某些指定的表同步到另外一台服务器.类似需求用SSIS或者其他ETL工作很容易实现,比如用SSIS的话就可以,但会存在相当一部分反复的手工操作.建源的 ...