当前位置: 首页>>代码示例>>用法及示例精选>>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。