all

CSS all 단축 속성은 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다.

시도해보기

구문

css

/* 전역 값 */
all: initial;
all: inherit;
all: unset;

/* CSS Cascading and Inheritance Level 4 */
all: revert;

all 속성은 CSS 전역 키워드 값 중 하나를 사용해 지정합니다. 그러나 어느것도 unicode-bidi (en-US)와 direction (en-US) 속성에는 영향을 주지 않는 점을 주의하세요.

값

initial

요소의 모든 속성을 초깃값으로 변경합니다.

inherit

요소의 모든 속성을 상속값으로 변경합니다.

unset

요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경합니다.

revert

선언이 속한 스타일시트의 출처에 따라 다른 동작을 합니다.

사용자 에이전트 출처 (en-US)
- : unset과 동일합니다.
사용자 출처 (en-US)
- : 종속 (en-US)을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자와 사용자 단계의 규칙이 없었던 것처럼 계산되도록 합니다.
저작자 출처 (en-US)
- : 종속 (en-US)을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자 단계의 규칙이 없었던 것처럼 계산되도록 합니다. revert만 고려했을 때, 저작자 출처는 재정의(Override) 및 애니메이션(Animation) 출처를 포함합니다.

형식 정의

초기값	There is no practical initial value for it.
적용대상	all elements
상속	no
계산 값	as the specified value applies to each property this is a shorthand for.
Animation type	as each of the properties of the shorthand (all properties but `unicode-bidi` (en-US) and `direction` (en-US))

형식 구문

all = 
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

예제

HTML

html

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

CSS

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;
}
blockquote {
  background-color: skyblue;
  color: red;
}

The <blockquote>가 브라우저 기본 스타일과 함께, 지정한 배경 및 텍스트 색상을 사용합니다. 또한 블록 요소로 동작하여 뒤의 텍스트가 아래에 위치합니다.

`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;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: unset;
}

<blockquote>가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, 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;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: initial;
}

<blockquote>가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, 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>가 브라우저 기본 스타일을 사용하지 않습니다. 블록 요소(부모 <body>에서 상속)이고, background-color은 #F0F0F0(상속값), font-size는 small(상속값), color는 blue(상속값)입니다.