CSS中的inherit关键字有什么用【html5教程】,inherit关键字
作者:搜教程发布时间:2019-11-29分类:html教程浏览:30评论:0
【引荐课程:CSS教程】
inherit关键字
由于CSS的级联性子,一些CSS属性会自动从元素的父级继续它们的值。比方设置元素的文本色彩,则该元素的一切子女将继续雷同的文本色彩。纵然某些属性值是自动继续的,也能够存在增添继续属性权重的状况。在这类状况下,运用inherit默许状况下已继续父值的属性上的值将强迫继续父值。
经由过程inherit关键字强迫执行自动继续的值的一种状况是用户代办的款式表掩盖继续的值(浏览器将某些元素运用的默许款式)
比方,文本的color值会自动传递给元素的一切子女,但在a链接的状况下,该color属性通常在用户代办款式表中设置为蓝色。在大多数状况下,能够为链接运用差别的色彩,或许是继续与文本其余部分雷同的色彩,并能够运用另一个表明它们是链接的视觉效果(比方运用下划线或背景色彩等)。假定愿望链接具有与文本其余部分雷同的文本色彩,则能够运用该inherit值来强迫执行通常会继续的色彩值。
div{ color:pink; } a{ color:inherit; }
效果图:
某些CSS属性不会继续元素父级的盘算值,然则我们愿望将元素的属性值设置为与其父级的值雷同。在这类状况下inherit关键字就派上用场了,它许可不自动继续值的属性继续它。
比方,为元素设置了蓝色边框,而且愿望其一切子元素div具有雷同的边框,那末就能够设置inherit关键字让它们继续与父元素雷同的边框色彩。
.el { padding:10px; border: 5px solid #0099cc; } .child { padding:10px; margin-top: 20px; border: inherit; } .el-2 { margin-top: 30px; border: 5px solid hotpink; } .child-2 { border: 5px solid inherit; margin-top: 20px; }
效果图:
注重:inherit关键字不支持简写属性,它必需是声明中的唯一值,比方border: 1px solid inherit
就不会从父元素继续边框色彩,由于它没法辨认值继续所援用的子属性。然则它能够经由过程border:inherit
来继续
总结:以上就是本篇文章的全部内容了,愿望经由过程这篇文章能够让人人对CSS中的inherit关键字有所熟悉。
以上就是CSS中的inherit关键字有什么用的细致内容,更多请关注ki4网别的相干文章!
标签:inherit关键字
相关推荐
- 伪元素“::after”和“::before”的作用分别是什么_html5教程,伪元素,::after,::before
- 详解CSS3实现弹性布局的方式_html5教程,CSS3,弹性布局,flexbox
- 如何使用CSS框架来加快设计过程?_html5教程,CSS框架,设计
- 手把手教你CSS如何实现毛玻璃效果_html5教程,css
- css优化策略介绍_html5教程,css,优化策略
- 两分钟带你了解在CSS中三种使图片居中的方法_html5教程,css,图片居中
- css中标签嵌套规则有哪些_html5教程,css,标签,嵌套规则
- CSS3如何实现图片滚动播放效果(附代码)_html5教程,css
- 什么是h5制作?_html5教程,HTML,h5制作
- 一分钟了解CSS的主要功能_html5教程,css
你 发表评论:
欢迎- html教程排行
-
- 1css如何实现给div添加滚动并隐藏滚动条_html5教程,css,div,滚动条
- 2伪元素“::after”和“::before”的作用分别是什么_html5教程,伪元素,::after,::before
- 3详解CSS3实现弹性布局的方式_html5教程,CSS3,弹性布局,flexbox
- 4css中的content属性该如何使用_html5教程,css,content
- 5CSS开发常用命名_html5教程,css
- 6css如何实现下划线滑动效果_html5教程,css,下划线
- 7css如何修改默认滚动条样式_html5教程,css,滚动条
- 8使用CSS如何绘制五角星?(附代码)_html5教程,CSS,绘制图形
- 9css如何清除默认样式并设置公共样式_html5教程,css,默认样式,公共样式
- 最新文章
- 广而告之