• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • all

    版本:CSS3

    all属性实际上是所有CSS属性的缩写,表示所有的CSS属性。CSSall简写属性将除却unicode-bididirection之外的所有属性重设至其初始值,或继承值。

    示例

    /* global values */
    all: initial
    all: inherit
    all: unset
    
    /* css cascading and inheritance level 4 */
    all: revert;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE浏览器不支持all,其余浏览器都支持all

    语法

    all:initial | inherit | unset | revert

    all属性is specified as one of the CSS 全局 keyword values. Note that none of these values affect theunicode-bididirection这两个属性。

    取值

    • initial该关键字代表改变该元素或其父元素的所有属性至初始值。
    • inherit该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。inherited values
    • unset该关键字代表如果该元素的属性的值是可继承的,则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值,反之则改变为初始值。
    • revert指定依赖于声明所属的样式表原点的行为:
      • User-agent origin:相当于unset
      • User origin:将层叠回滚到用户代理级别,以便计算指定的值,就好像没有为该元素指定作者级别或用户级别规则。
      • Author origin:将层叠回滚到用户级别,以便计算指定的值,就好像没有为元素指定作者级规则。出于revert的目的,“作者”原点包括“覆盖”和“动画”原点。

    示例

    HTML

    <blockquote id="quote">
      lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </blockquote>
    phasellus eget velit sagittis.
    

    CSS

    body {
      font-size: small;
      background-color: #f0f0f0;
      color: blue;
    }
    
    blockquote {
      background-color: skyblue;
      color: red;
    }
    

    结果

    没有all属性

    <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
    
    body { font-size: small; background-color: #f0f0f0; color:blue;  color: red; }
    

    <blockquote>使用浏览器默认样式,以及另外的定义的背景色与文字颜色。它是一个 block 元素:它之后的文字位于它的下方。

    all:unset

    <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
    body { font-size: small; background-color: #f0f0f0; color:blue;  color: red; }
    blockquote { all: unset; }
    

    <blockquote>没有使用浏览器默认样式:它现在是一个 inline 元素(初始值),其background-colortransparent(初始值),但其font-size仍为small(继承值),其colorblue(继承值)。

    all:initial

    <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
    
    body { font-size: small; background-color: #f0f0f0; color:blue;  color: red; }
    blockquote { all: initial; }
    

    <blockquote>没有使用浏览器默认样式:它现在是一个 inline 元素(初始值),其background-colortransparent(初始值),其font-sizenormal(初始值),其colorblack(初始值)。

    all:inherit

    <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
    
    body { font-size: small; background-color: #f0f0f0; color:blue; }
    blockquote { background-color: skyblue; color: red; }
    blockquote { all: inherit; }
    

    <blockquote>没有使用浏览器默认样式:它现在是一个 block 元素(继承自其父元素<body>),其background-colortransparent(继承值),其font-sizesmall(继承值),其colorblue(继承值)。

    上篇:@import

    下篇:@font-face