all
版本:CSS3
all属性实际上是所有CSS属性的缩写,表示所有的CSS属性。CSSall
简写属性将除却unicode-bidi
与direction
之外的所有属性重设至其初始值,或继承值。
示例
/* global values */ all: initial all: inherit all: unset /* css cascading and inheritance level 4 */ all: revert;
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
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-bidi
与direction
这两个属性。
取值
initial
该关键字代表改变该元素或其父元素的所有属性至初始值。inherit
该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。inherited valuesunset
该关键字代表如果该元素的属性的值是可继承的,则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值,反之则改变为初始值。revert
指定依赖于声明所属的样式表原点的行为:- User-agent origin:相当于
unset
- User origin:将层叠回滚到用户代理级别,以便计算指定的值,就好像没有为该元素指定作者级别或用户级别规则。
- Author origin:将层叠回滚到用户级别,以便计算指定的值,就好像没有为元素指定作者级规则。出于
revert
的目的,“作者”原点包括“覆盖”和“动画”原点。
- User-agent origin:相当于
示例
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
(继承值)。