CSS all属性用法及代码示例

CSS中的all属性是一种简写属性，用于将所有元素的值设置为其初始值或继承的值，或者在某些情况下，用于将这些值设置为另一个电子表格的来源。此属性用于重置文档中的所有CSS属性。

用法:

all:initial|inherit|unset|revert;

属性值：
initial:此属性用于将所有属性设置为其默认值。

用法:
```
all:initial;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS all aroperty 
        </title>  
          
        <!-- CSS all property -->
        <style>  
            h1, h3 {  
                background-color:yellow; 
                color:green; 
                all:initial;  
            }  
            body {  
                text-align:center;  
                all:initial; 
            }  
        </style>  
    </head> 
      
    <body>  
        <h1>GeeksforGeeks</h1>  
        <h3>all property</h3>  
    </body>  
</html>

输出：
```
GeeksforGeeks all property
```

继承：此属性用于设置其父元素的all属性。

用法:
```
all:inherit;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>All Property</title>  
        <style>  
            div { 
                text-align:center; 
                color:green; 
                all:initial 
            } 
            h1, h3 {  
                all:inherit;  
            }  
        </style>  
    </head>  
    <body>  
        <div> 
            <h1>GeeksforGeeks</h1>  
            <h3>all property</h3>  
        </div> 
    </body>  
</html>

输出：
```
GeeksforGeeks all property
```

unset：此属性用于指定所有元素属性(如果默认继承)应更改为它们的继承值，否则为初始值。

用法:
```
all:unset;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS all property 
        </title>  
          
        <style>  
            h1, h3 {  
                background-color:green; 
                color:white; 
                all:unset;  
            }  
            body {  
                text-align:center;  
                all:unset; 
            }  
        </style>  
    </head>  
      
    <body>  
        <h1>GeeksforGeeks</h1>  
        <h3>all property</h3>  
    </body>  
</html>

输出：
```
GeeksforGeeks all property
```

revert：用于指定取决于声明所属样式表来源的行为。

用法:
```
all:revert;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS all property 
        </title>  
          
        <style>  
            h1, h3 {  
                background-color:yellow; 
                color:green; 
                all:revert;  
  
            }  
            body {  
                text-align:center;  
                all:revert;  
            }  
        </style>  
    </head>  
      
    <body>  
        <h1>GeeksforGeeks</h1>  
        <h3>all Property</h3>  
    </body>  
</html>

输出：

支持的浏览器：下面列出了所有属性支持的浏览器：

镀 chrome 37.0
Firefox 27.0
Opera 24.0
Safari 9.1

相关用法

注：本文由纯净天空筛选整理自DannanaManoj大神的英文原创作品 CSS | all Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。