Css 简明教程

CSS - all

速记 CSS 属性 all 重置元素的所有属性，除了 unicode bidi 、 direction 和 CSS custom properties 。

它既可以将属性重置为其原始或继承的值，也可以重置为在另一个层叠层或样式表源文件中明确定义的值。

Constituent Properties

该属性充当了所有 CSS 属性的简洁表示， unicode bidi 、 direction 和 CSS custom properties 除外。

all 属性使用全局 CSS 关键词值之一指定。需要注意的是，这些值都不会影响 unicode bidi 和 direction 属性。

Possible values

以下是 all 属性的可能值列表。

  1. * initial* - 表示元素的所有属性都应重置为其 initial values 。

  2. * inherit* - 表示元素的所有属性都应设置为其 inherited values 。

  3. * unset* - 表示元素的属性应在默认继承的情况下设置为继承值，否则设置为其初始值。

  4. * revert* - 根据与声明关联的样式表来源指定行为：

  5. revert-layer - 指定回滚元素的所有属性至之前的 cascade layer （如果可用）。这仍处于实验阶段。如果其他级联层不可用，则元素的属性将重置为当前层中的匹配规则（如果可用），或者重置为更早的 style origin 。

Syntax

all = initial | inherit | unset | revert | revert-layer

CSS all - Basic Example

  1. 在以下示例中，CSS all 属性用于完全调整特定元素中的所有样式属性。

  2. 第一个 id= custom1 的 <div> 展示了没有 all 属性时的默认样式，而后面的 <div> 元素（ custom2 、 custom3 和 custom4 ）则分别演示了 all: inherit; 、 all: initial; 和 all: unset; 的作用。

<html>
<head>
<style>
   html {
      font-size: x-large;
      color: #2c3e50;
   }
   #custom1 {
      background-color: #ecf0f1;
      color: #e74c3c;
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
   }
   #custom2 {
      background-color: #ecf0f1;
      color: #e74c3c;
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
      all: inherit;
   }
   #custom3 {
      background-color: #ecf0f1;
      color: #e74c3c;
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
      all: initial;
   }
   #custom4 {
      background-color: #ecf0f1;
      color: #e74c3c;
      font-family: 'Verdana', sans-serif;
      font-weight: bold;
      all: unset;
   }
</style>
</head>
<body>
<p>No all property:</p>
<div id="custom1">Hello from a creative and innovative universe!</div>
<p>all: inherit:</p>
<div id="custom2">Discover the virtually endless possibilities in your head.</div>
<p>all: initial:</p>
<div id="custom3">Welcome the start of an interesting new trip.</div>
<p>all: unset:</p>
<div id="custom4">Use the power of new ideas to realize your full potential.</div>
</body>
</html>