了解css全局关键字属性值

145 阅读2分钟

本文只记录四个关键字和一个all属性

  1. inherit [ɪnˈherɪt] 继承
  2. initial [ɪˈnɪʃl] 初始化
  3. unset 不固定值关键字
  4. revert [rɪˈvɜːrt] 恢复关键字
  5. 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新世界》-张鑫旭著