Css 简明教程

CSS - all

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

The shorthand CSS property all resets all properties of an element, with the exception of unicode bidi, direction and CSS custom properties.

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

It can reset properties to their original or inherited values or to the values explicitly defined in another cascade layer or in the stylesheet origin.

Constituent Properties

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

This property serves as a concise representation for all CSS properties, with the exception of unicode bidi, direction and CSS custom properties.

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

The all property is specified with one of the global CSS keyword values. It is important to note that none of these values impact the unicode bidi and direction properties.

Possible values

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

The following is the list of possible values of all properties.

  1. initial - Indicates that all properties of the element should be reset to their initial values.

  2. inherit - Indicates that all properties of the element should be set to their inherited values.

  3. unset - Indicates that the element’s properties should set to inherited values in case of default inheritance, else to their initial values.

  4. revert - Specifies the behavior depending on the stylesheet origin associated with the declaration:

  5. revert-layer - Specifies the rollback of all properties of the element to a previous cascade layer, if available. This is still in experimental phase. If no other cascade layer is available, the properties of the element are reset to the matching rule in the current layer, if available, or to an earlier style origin.

Syntax

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

CSS all - Basic Example

  1. In the following example, the CSS all property is used to completely adjust all styling properties within specific elements.

  2. The first <div> with id=custom1 showcases the default styling without the all property, while subsequent <div> elements (custom2, custom3, and custom4) demonstrate the impact of all: inherit;, all: initial;, and all: unset; respectively.

<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>