all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨январь 2020 г.⁩.

Описание

Сокращённое свойство CSSall сбрасывает все свойства, кромеunicode-bidi иdirection, до их начального или унаследованного значения.

Начальное значение	На практике начального значения нет
Применяется к	все элементы
Наследуется	нет
Обработка значения	как указанное значение, применяется к каждому свойству этой короткой записи.
Animation type	как у каждого из подсвойств этого свойства (все свойства, кроме`unicode-bidi` и`direction`)

Синтаксис

css

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

Значения

initial

Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу. Значенияunicode-bidi иdirection не затрагиваются.

inherit

Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу, на значение их родителя. Значенияunicode-bidi иdirection не затрагиваются.

unset

Это ключевое слово указывает на изменение всех свойств, применимых к элементу или родительскому элементу, на значение их родителя, если они наследуются или на их начальное значение, если нет. Значенияunicode-bidi иdirection не затрагиваются.

revert

Если каскадным значением свойства является ключевое слово revert, поведение зависит от источника, которому принадлежит объявление:

user-agent origin: Эквивалент unset.
user origin: Откатывает каскад до уровня пользовательского агента, так что указанное значение вычисляется так, как если бы для этого свойства не были заданы правила уровня автора или уровня пользователя.
author origin: Откатывает каскад до уровня пользователя, так что указанное значение вычисляется так, как если бы для этого свойства не было задано никаких правил уровня автора. В целях возврата этот источник включает в себя источники переопределения и анимации.

Формальный синтаксис

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

Примеры

HTML

html

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

CSS

css

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

Результат:

No`all` property

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

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

<blockquote> использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя какblock элемент : текст, который следует за ним, находится под ним.

`all:unset`

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

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

<blockquote> не использует стили браузера по умолчанию: теперь этоinline элемент (начальное значение), егоbackground-color являетсяtransparent (начальное значение), но егоfont-size по-прежнемуsmall унаследованное значение) и егоcolor являетсяblue (унаследованное значение).

`all:initial`

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

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

<blockquote> не использует стили браузера по умолчанию: теперь этоinline элемент(начальное значение), егоbackground-color являетсяtransparent (начальное значение), егоfont-size являетсяnormal (начальное значение) и егоcolor являетсяblack (начальное значение).

`all:inherit`

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

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

<blockquote> не использует стили браузера по умолчанию: теперь этоblock элемент (унаследованное значение от содержащего его<div>), егоbackground-color являетсяtransparent (унаследованное значение), егоfont-size являетсяsmall (унаследованное значение) и егоcolor являетсяblue (унаследованное значение).