all

Синтаксис

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

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

CSS

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

blockquote {
  background-color: skyblue;
  color: red;
}

Результат:

No all property

<blockquote id="quote">
  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 id="quote">
  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 id="quote">
  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 id="quote">
  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 (унаследованное значение).

Спецификации

Совместимость с браузерами

Смотрите также

Значения свойств в масштабе CSS: initial, inherit, unset, и revert.