ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

掌握 CSS 属性:继承、初始、取消设置、恢复

2023-07-05 13:15:05  阅读:231  来源: 互联网

标签:CSS  编程 Web开发


CSS(层叠样式表)是用于设计 Web 文档样式和格式的强大工具。在本综合指南中,我们将探讨四个特殊关键字:inheritinitialunsetrevert

继承:从父元素传播值

inherit关键字用于显式指示元素从其父元素继承 CSS 属性的值。当属性设置为 时inherit,该元素将采用与其父元素相同的值。当您希望整个文档的样式保持一致或希望特定元素从其父元素继承某些样式时,此行为特别有用。

例如,考虑这样一个场景:您有一个<div>具有指定文本颜色的元素。默认情况下,文本颜色属性 ( color) 是继承的,这意味着子元素将具有与其父元素相同的文本颜色。但是,您可以使用inherit关键字显式强制执行此行为,即使未在父元素的 CSS 中显式指定也是如此。

div {
  颜色:黑色;/* 父div的文本颜色 */
 }
a {
  颜色:继承;/* 继承父div的文本颜色 */ 
}

虽然在某些情况下使用inherit字体大小或颜色可能是个好主意,但请务必注意,并非所有属性都会默认继承。了解继承属性和非继承属性之间的区别对于inherit有效使用关键字至关重要。

初始:重置为默认值

initial关键字用于将 CSS 属性重置回 CSS 规范中指定的初始值。每个 CSS 属性都有一个由 W3C 规范定义的初始值,该初始值作为默认值。通过使用initial,您可以覆盖任何以前的样式并将属性设置回其初始状态。

规范中定义的初始值可能会有所不同。一些初始值具有直观意义,而其他值可能看起来任意。例如,float: nonebackground-color: transparent是符合共同期望的初始值的示例。然而,类似的属性display: inline可能看起来违反直觉,但这些初始值是根据历史原因或建立起点的需要确定的。

按钮{
  颜色:初始;/* 将颜色属性重置为其初始值 */
 }

请务必记住,initial关键字仅重置其所应用的特定属性,并且不会影响其他属性或继承的值。另请注意,规范中定义的初始值可能并不总是与所需或预期的行为一致。

重置:全面重置

关键字unset是一个强大的工具,可让您全面重置 CSS 属性。inherit它结合了和关键字的功能initial,提供了更灵活的重置选项。

对于非继承属性,unset其工作方式与关键字类似initial它将属性重置为其 CSS 规范中定义的初始值。这可确保该属性重新开始,而不会受到任何先前样式的影响。

div {
  边距:未设置;/* 将 margin 属性重置为其初始值 */
 }

但是,对于继承属性,unset行为有所不同。不是将属性重置为其初始值,unset而是恢复属性的自然行为,其中包括从父元素继承值。

p {
  颜色:未设置;/* 允许颜色属性从其父级继承 */
 }

在此示例中,<p>元素的color属性设置为unset,使其能够从其父级继承颜色。如果父元素上没有定义显式颜色,则继承的默认行为将被保留。

unset当您想要全面重置属性并考虑继承和非继承属性时,该关键字特别有用。

恢复:返回浏览器样式

revert关键字是 CSS 关键字系列中的最新成员。与 类似unset,它允许您重置 CSS 属性。但是,revert考虑到样式表的级联性质并尊重浏览器的默认样式。

当应用于属性时,revert撤消任何先前的样式并将属性恢复为浏览器默认样式表定义的值。它本质上是将属性返回到浏览器确定的原始状态。

h1 {
  字体大小:恢复;/* 将 font-size 属性恢复为浏览器的默认值 */
 }

在上面的示例中,元素font-size的属性<h1>设置为revert,这允许它采用浏览器默认样式表中定义的字体大小。这确保了与网页整体样式的一致性并尊重用户的偏好。

需要注意的是, 的行为revert取决于属性是继承还是非继承,类似于关键字unset对于继承属性,revert恢复自然继承行为,而对于非继承属性,则恢复为浏览器的默认值。

标签:CSS, 编程,Web开发
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有