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之继承 的相关文章

  • 如何使用div绘制曲线?

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实
  • CSS3 中均匀间隔的导航链接占据 ul 的整个宽度

    我想创建一个水平导航链接列表 其中导航链接均匀分布并占据封闭容器的整个宽度 ul 导航链接可以有不同的宽度 第一个和最后一个链接应与链接的开头和结尾对齐 ul 分别 意味着链接不居中 如下所示 left side right side li
  • 获取 CSS 计算结果以设置自定义属性

    我正在测试一个 CSS 框架 用于通过微类指定数字 例如 类似的东西 div class fifty percent wide 可能会翻译成width 50 该实现使用 CSS 变量 自定义属性 考虑以下 CSS fifty number
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • Firefox 忽略背景大小的 css

    尝试使用背景大小 CSS 规则缩小图像 但 Firefox 3 5 似乎会忽略该规则 CSS privatejoker background aqua url styles images home privatejoker png no r
  • 在打印 CSS 上在每个页面周围绘制边框?

    打印时我需要在每个页面周围绘制边框 我最初是使用带有分页符的 div 来完成此操作 例如 media print contentContainer position inline height 98 width 100 top 0px le
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • CSS 选择器用于选择最后两个子项,而不知道列表中有多少项

    我有一个无序列表 它有时包含 4 5 6 或 7 个项目 我想知道是否有一个 CSS 选择器来选择最后两项 我意识到 last child会给我最后一件物品 是否有 倒数第二个孩子 选择器 或者 孩子数量 2 选择器 HTML ul li
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https
  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
  • 垂直对齐复选框标签? [复制]

    这个问题在这里已经有答案了 我有这样的复选框
  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • 指针事件:无,过滤,适用于 ie8 和任何地方,不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

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

    介绍 搞图宝 专门获取各大电商平台详情页面主图和详情图的浏览器插件 现已支持京东 京东国际 淘宝 天猫 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继承