all

版本: CSS3

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

示例

/* 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 the unicode-bidi direction 这两个属性。

取值

  • 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-color transparent (初始值),但其 font-size 仍为 small (继承值),其 color blue (继承值)。

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-color transparent (初始值),其 font-size normal (初始值),其 color black (初始值)。

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-color transparent (继承值),其 font-size small (继承值),其 color blue (继承值)。

上篇: @import

下篇: @font-face