本文只记录四个关键字和一个all属性
- inherit [ɪnˈherɪt] 继承
- initial [ɪˈnɪʃl] 初始化
- unset 不固定值关键字
- revert [rɪˈvɜːrt] 恢复关键字
- all 重置除了 unicode-bidi,direction 自定义属性以外的所有css属性。
1.inherit 继承关键字
字面意义,继承父级的css属性,使用最多的场景是字体大小,背景图像继承等,简单而实用。
input {
font-size:inherit;
background-image:inherit;
}
2.初始值关键字initial
可以把指定的css属性的计算值还原成 css语法中规定的初始值(注:是css语法规定,而不是浏览器规定,浏览器可能有自己的初始值) 比如说初始化字体大小,初始化display的值 比如说浏览器默认设置的li文字大小时16px,如果给.initial-ul设置字体大小,然后给最后一个li设置了initial,那么前几行的字体大小时50px,最后一行是16px;
<ul class="initial-ul">
<li>测试li字体的大小</li>
<li>测试li字体的大小</li>
<li>测试li字体的大小</li>
<li>测试li字体的大小</li>
</ul>
.initial-ul {
font-size: 50px;
}
.initial-ul li:last-child {
font-size: initial;
}
3.unset 不固定值关键字
功能是,如果使用它的css属性有继承特性,那么就优先使用继承特性inherit,如果没有,那么就使用初始化关键字initial。 对单个css属性使用毫无意义,主要是配合"all"属性关键字使用,比如说对 html5.1规范中提出的 <dialog oepn> </dialog> 属性,他内置了许多在实际开发中不需要的样式
dialog {
display: block;
position: absolute;
left: 0px;
right: 0px;
width: fit-content;
height: fit-content;
background-color: canvas;
color: canvastext;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
}
此时,就可以通过 unset方法来重置dialog 所有的属性,但是重置之后就和普通的div标签没有什么不同了,唯一有用的就是保留了dialog这个语义化标签
dialog {
all:unset;
}
4.revert 恢复关键字
可以让使用它的css属性恢复成浏览器内置的样式。 比如说在全局对ul ol标签进行格式化去除了点和数字效果。就可以使用 revert 对效果进行恢复。 目前用处不大,等实际遇到了再回来补充。
5.all属性
重置某一个css属性内所有的属性 ,比如说input,dialog,button等
input {
all:inherit; //初始化input里所有的属性, 但是还是能输入字符信息的
}
至于为什么unicode-bidi和dircetion不受all影响,是因为一个是控制文字的排序(从左到右,从右到左),而direction默认的属性是:ltr; 这样如果有国家的书写方式是从右到左,那么就无法使用这个属性。 unicode-bidi是控制每一个文字的呈现方向,相当于direction的子类。
主要参考 《css新世界》-张鑫旭著