CSS全局关键字属性值

inherit，initial，unset，revert都是CSS全局关键字属性值，任何CSS属性都可以用这几个关键字当作属性

1、inherit(大家都会就不说了)

作用：让后代元素的CSS样式可以从父元素或者祖先元素那继承它们的值,并且它可以应用于任何CSS属性。”

1.1、实际用法

许多有用的属性自动继承，例如字体，字体大小，颜色，免去写多次重复的样式

2、initial

作用：把当前的CSS属性的计算值还原成在W3C CSS规范的每个CSS属性定义表中的默认值

2.1、实际用法

当我们需要重置某些CSS样式但又不记得初始值的时候可以用

<!-- 当我们不记得p标签display属性的初始值是什么时 -->
<!-- 结果p元素垂直方向的margin和text-index都失效了，典型的内联元素特性，因此display为inline -->
p{
    display: initial;
}

2.2、小陷阱🕳

首先要知道，对于有些标签浏览器会给其设置一些默认的样式
网上有很多说initial是设置成浏览器设置的元素的初始值，这是不对的，initial不应混淆有属性指定的浏览器的样式
因为每个CSS的初始值早就在在W3C CSS规范的每个CSS属性定义表中定义好了，不信我们看下面的例子

2.3、举个例子🌰

<!-- 这是普通的按钮 -->
<button>按钮1</button>
<!-- 给它加点颜色 -->
<button style="background-color: skyblue">按钮2</button>
<!-- 由此可知initial甚至会把浏览器给标签初始的边框和背景颜色给去掉 -->
<button style="all: inherit;">按钮3</button>

图片.png

2.4、顺带一提

上面的按钮如果想变回原样应该使用revert关键字，后面会讲

3、unset

作用：
如果当前使用的CSS属性是具有继承特性的，如color，font属性，等同于使用inherit
如果当前使用的CSS属性是没有继承特性的，如background-color属性，等同于使用initial

3.1、实际用法

unset关键字只有配合all属性使用才有意义，因为对于某个具体的CSS属性，想要继承就用inherit，想要用初始值就用initial
个人觉得适用范围很小，了解即可

4、revert

作用：让当前元素的样式还原成浏览器内置的样式

4.1、实际用法

当你给一个标签写了样式，例如button，但是想去还原成浏览器内置样式的时候可以使用

4.2、举个例子🌰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <button>按钮</button>
    <button style="all: revert;">按钮</button>
</body>
</html>