CSS之继承

2023-11-15

1. 什么是css继承

继承是css中非常重要的一个概念。当你为HTML中的某个元素赋予CSS样式时,这些样式不仅仅会影响当前元素,有的样式还会影响该元素的子元素。这些下层子元素继承上层祖先元素样式属性的特点,就称为css继承。


2. css继承的作用

css继承可以简化css样式的使用。设想如果没有继承,你要为每个元素单独设置同样的字体是多么恐怖!


3. CSS继承的使用

3.1 使用属性的inherit值

对于大部分css属性来说,他的值都可以设置为inherit,即为继承其父元素的该属性的值。如:例子中的child div就会继承parentbackground-color属性。

...
<style>
    .parent{
        background-color: red;
    }
    
    .child{
        background-color: inherit;
    }
    ...
</style>
...
<body>
    <div class="parent">
        this is parent
        <id class="child">
        	this is child
        </id>
    </div>
</body>

区分inherit、initial和unset:

  • inherit: 继承;如果元素的某css值设置为inherit,则说明该元素的该css值与其父元素的该css属性值一致。适用于所有css属性。
  • initial: 默认值;适用于所有css属性,将设置为该值的css属性取该属性的默认值。
  • unset: 不设置;对于默认可以继承的属性取父元素的继承值,不可以继承的属性取默认值。

3.2 默认继承的css属性

  • 文本
    • color:颜色,a除外;
    • direction:方向;
    • font:字体;
    • font-family:字体系列;
    • font-size:字体大小;
    • font-style:字体样式,如斜体;
    • font-variant:用于设置小型大写字母;
    • font-weight:用于设置字体粗体;
    • letter-spacing:字母间距;
    • line-height:行高;
    • text-align:用于设置字体的对其方式;
    • text-transform:用于修改大小写;
    • visibility:可见性;
    • white-space:用于指定如何处理空格;
    • word-spacing:字间距。
  • 列表
    • list-style:列表样式;
    • list-style-image:用于为列表指定定制的标记;
    • list-style-position:用于确定列表标记的位置;
    • list-style-type:用于设置列表的标记。
  • 表格
    • border-collapse:用于控制表格相邻单元格的边框是否合并为单一边框;
    • border-spacing:用于指定表格边框之间的空隙大小;
    • caption-side:用于设置表格标题的位置;
    • empty-cells:用于设置是否显示表格中的空单元格。
  • 页面设置(对于印刷物)
    • orphans:用于设置当元素内部发生分页时在页面底部需要保留的最少行数;
    • page-break-inside:用于设置元素内部的分页方式;
    • widows:用于设置当元素内部发生分页时在页面顶部需要保留的最少行数。
  • 其他
    • cursor:鼠标指针样式;
    • quotes:用于指定引号样式。

参考

《HTML5与CSS3基础教程(第8版)》

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS之继承 的相关文章

  • Chrome:网络元素自动移动

    我正在开发一个网络项目 在过去的两周里 我正在进行学期考试 所以我要休息一下 现在 既然他们已经结束了 我又继续我的工作了 但我发现我的一些Web 元素 如按钮 span 在 Chrome 上移动了一些像素 在 IE 和 Mozilla 上
  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p
  • 如何设置必须输入特定数字的字段?

    我想知道如何创建一个需要输入特定数字或文本的字段 例如 激活码 以及在输入的确认答案的情况下移动到 网页 并且在未确认的情况下移动到 另一页面 的按钮 使用必需的属性
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 如何获得 calc() 函数的无单位结果

    我正在使用此计算来获取网页中的流体行高 line height calc 1 42em 1 55 1 42 100vw 300px 1080 300 数学是工作属性 除非我改变font size特定部分 因为line height应使用无单
  • 如何修复 IE6 上的不透明度

    如何修复 IE6 上的不透明度 此代码不适用于 IE6 filter alpha opacity 50 moz opacity 0 5 khtml opacity 0 5 opacity 0 5 还有这段代码 description ani
  • 使用 CSS Grid,从任何地方滚动 div(不使用 jQuery 插件)

    div 怎样才能 scroll content https jsfiddle net blehmanade x1k3rhj7 33 可以从页面上的任何位置滚动吗 现在 scroll content仅当鼠标位于其上方时才可滚动 但是 当鼠标位
  • 如何在非 CSS3 浏览器上制作圆角?

    我知道在这种情况下我必须使用图像 每个角一个 例如 如果我需要给定元素周围有一个 4px 的纯蓝色边框 边框半径为 8px 我相应地设计了四幅图像 左上角 png 右上角 png 左下角 png 右下角 png 如果可能的话 我应该如何实现
  • 动态突出显示时向

    添加项目符号点?

    Update 例子 p Text Text p 在示例中 是否可以选择第二个 文本 单词 p 元素并单击按钮仅动态添加项目符号点到选定的 单词 有没有可能 在一个 p p Text p 突出显示从 p 元素并添加项目符号点到按钮上动态单击的
  • 样式标签中的源映射是否有效?

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 将 CSS 生成的三角形拆分为 2 个水平不同的相同颜色

    正如您应该能够通过此代码看到的那样fiddle http jsfiddle net Xh36r 1 以及下面 我希望能够分割显示在第二个 div 顶部的 CSS 生成的三角形水平均等在 之间orange and green使用的颜色 现在它
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘

随机推荐

  • 获取电商网站主图和详情图的浏览器插件

    介绍 搞图宝 专门获取各大电商平台详情页面主图和详情图的浏览器插件 现已支持京东 京东国际 淘宝 天猫 coupang 1688 naver gmarket alibaba 兰亭集势 谷歌浏览器下载地址 Google Chrome 网络浏览
  • SPI Flash芯片W25Q32英文版数据手册解读(一)---------引脚功能,工作模式

    W25Q32芯片是一个可以通过SPI 串行外围设备接口 操作的flash存储器 这篇文章备忘和总结一下英文版数据手册的一些解读 有关时序及具体用STC单片机编写程序的内容等下一篇文章 一 芯片引脚功能 我买的是8引脚 SOIC封装的芯片 如
  • MyBatis框架从入门到精通(一)MyBatis概述

    mybatis做为目前国内最为流行的开源orm框架 我们平时在使用时会感受到其带来的诸多便利 但是很少去深入分析 mybatis源码代码量不多 功能丰富 是一个很好的学习样例 本系列文章就和大家一起来学习mybatis框架 本系列笔记根据动
  • PSM+DID

    PSM DID 模型是由倾向得分匹配模型 Propensity Score Matching 以下简称 PSM 和双重差分模型 Differences in Differences 以下简称 DID 结合而成 其中 PSM 负责为受处理的个
  • python求解数字的平均值、方差、中位数

    定义数字输入函数 def getNum nums iNumStr input 请输入数字 回车退出 while iNumStr 当输入为空时 跳出循环 nums append eval iNumStr 在nums列表后加入输入的数字 iNu
  • 微信小程序审核代码提示wx.getLocation暂未配置在app.json中教你如何解决

    今天上传微信小程序代码时遇到的问题 解决方法 在app json里面进行配置 requiredPrivateInfos getLocation 查找官方API接口 原来是这样 我们再去微信公众平台官网 扫码进入我们的小程序服务 找到开发管理
  • 项目代码中参数的管理:mmcv中的Config包&argparse导入参数

    Config 当我们项目的超参数很多时 在文中设定和修改并不方便 这时我们需要项目中所有参数放入一个文件夹中 方便管理和修改 例如 config config py中包含了我们模型需要的所有参数 然后我们使用mmcv包中的Config函数对
  • Python实现链表

    文章目录 由一个等号引起的思考 链表 单链表 双链表 单向循环链表 由一个等号引起的思考 链表是由一个个被系统随机分配地址的结点们通过指针进行相连 以c 为例子 在写链表的时候可以使用结构体进行实现 struct node ElemType
  • 【vue2】实现查询功能及排序功能

    一 前言 之前写过一篇相关的文章 那个时候对于vue查询不甚了解 现在重新温习一次vue 有了新的认识 但是将新的也是通俗易懂的理解分享给大家 希望一起进步 二 业务场景 实现动态查询 输入框输入内容 然后列表根据输入框内容动态显示 截图
  • 思维导图TheBrain实用教程——如何选择主题并自定义主题颜色?

    TheBrain 您的终极数字记忆和无限思维导图软件 我们从一个想法跳到另一个想法 构建越来越复杂的网络 直到新想法形成 TheBrain允许你以同样的方式组织你的信息 而不限制你预先确定的文件结构 事实上 你的数字大脑是没有限制的 你可以
  • 如何开发一个App(Android)

    前言 本篇博客从开发的角度来介绍如何开发一个Android App 需要说明一点是 这里只是提供一个如何开发一个app的思路 并不会介绍很多技术上的细节 从整个大局去把握如何去构思一个app的开发 让你对独立开发一款app的时候有个理解 如
  • tia v15 添加项目_西门子S7-1500plc与S7-300plcPN/IO设备通信-创建项目

    西门子S7 1500plc与S7 300plcPN IO设备通信 PROFINET的CPU支持I device功能 即智能IO设备功能 也就是该PN设备可以同时作为IO控制器和IO设备 一个PN智能设备功能不但可以作为一个智能处理单元处理生
  • SpringSecurity连接数据库的使用

    一 简介 Spring 是非常流行和成功的 Java 应用开发框架 Spring Security 正是 Spring 家族中的成员 Spring Security 基于 Spring 框架 提供了一套 Web 应用安全性的完整解决方案 正
  • 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式

    ASP NET MVC系列文章 01 浅谈Google Chrome浏览器 理论篇 02 浅谈Google Chrome浏览器 操作篇 上 03 浅谈Google Chrome浏览器 操作篇 下 04 浅谈ASP NET框架 05 浅谈AS
  • webpack-插件

    插件 Plugins 插件是 wepback 的支柱功能 webpack 自身也是构建于 你在 webpack 配置中用到的相同的插件系统之上 插件目的在于解决 loader 无法实现的其他事 剖析 webpack 插件是一个具有 appl
  • 操作系统实验:FCFS调度和SPF调度算法(C语言)

    实验内容 已知一组进程P1 P2 P3 及其到达时间和服务时间 参考下图 分别采用FCFS调度算法和SPF调度算法 求各个进程的完成时间 周转时间 带权周转时间 平均周转时间和平均带权周转时间 实验目的 熟悉FCFS调度算法的实现过程 熟练
  • CSS 图片偏移技术以及坐标问题

    CSS中通过图片偏移技术可以实现将众多小图标放入一个图片中 网页加载时只需要加载一个图片即可实现得到众多小图标的功能 这是前端设计时候对图片的一种优化方式 图片偏移技术只是一个属性而已 即 background position 100px
  • anaconda已经有sklearn,但是pycharm不能导入的解决方法

    问题 D software Anaconda3 Lib site packages文件夹里已经有sklearn这个文件夹 但是pycharm里import时无法识别到 原因 在pycharm里点击文件 gt 设置 gt 项目 gt Pyth
  • 仿微信底部菜单栏(ViewPager+ImagerView+TextView)

    前言 在市面上 大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理 通常都是分为3 5个大模块 从而正确有效地引导用户去使用我们的APP 实现底部菜单栏的方法也有很多种 1 仿微信底部菜单栏 ViewPager ImagerVie
  • CSS之继承

    1 什么是css继承 继承是css中非常重要的一个概念 当你为HTML中的某个元素赋予CSS样式时 这些样式不仅仅会影响当前元素 有的样式还会影响该元素的子元素 这些下层子元素继承上层祖先元素样式属性的特点 就称为css继承 2 css继承