Свойство CSS `all`

all — это CSS-сокращённое свойство, которое сбрасывает все свойства элемента, кроме unicode-bidi, direction и пользовательских свойств CSS. С его помощью можно задать свойствам начальные или унаследованные значения либо значения, указанные в другом слое каскада или источнике таблицы стилей.

Попробуйте

/* no all property */

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        This paragraph has a font size of 1.5rem and a color of gold. It also
        has 1rem of vertical margin set by the user-agent. The parent of the
        paragraph is a &lt;div&gt; with a dashed blue border.
      </p>
    </div>
  </div>
</section>

#example-element {
  color: gold;
  padding: 10px;
  font-size: 1.5rem;
  text-align: left;
  width: 100%;
}

.example-container {
  border: 2px dashed #2d5ae1;
}

.example-container-bg {
  background-color: #77767b;
  padding: 20px;
}

Составные свойства

Это свойство является сокращением для всех свойств CSS, кроме unicode-bidi, direction и пользовательских свойств.

Синтаксис

/* Global values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

Значения

Свойство all задаётся одним из глобальных ключевых слов CSS. Обратите внимание, что ни одно из этих значений не влияет на свойства unicode-bidi и direction.

initial

Задаёт всем свойствам элемента их начальные значения.

inherit

Задаёт всем свойствам элемента их унаследованные значения.

unset

Задаёт всем свойствам элемента унаследованные значения, если по умолчанию они наследуются, или начальные значения, если нет.

revert

Задаёт поведение, которое зависит от источника таблицы стилей, к которому относится объявление:

• Если правило относится к авторскому источнику, значение revert откатывает каскад до уровня пользователя, поэтому заданные значения вычисляются так, как если бы для элемента не было указано правил авторского уровня. Для целей revert к авторскому источнику относятся источники переопределения и анимации.
• Если правило относится к пользовательскому источнику, значение revert откатывает каскад до уровня пользовательского агента, поэтому заданные значения вычисляются так, как если бы для элемента не было указано правил авторского или пользовательского уровня.
• Если правило относится к источнику пользовательского агента, значение revert действует как unset.

revert-layer

Задаёт откат всех свойств элемента к предыдущему слою каскада, если он существует. Если других слоёв каскада нет, свойства элемента откатываются к соответствующему правилу, если оно есть, в текущем слое или к предыдущему источнику стилей.

Формальное определение

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

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

Примеры

В этом примере CSS-файл содержит стили для элемента <blockquote>, а также некоторые стили для родительского элемента <body>. Варианты отображения в подразделе «Результаты» показывают, как меняется оформление элемента <blockquote> при применении разных значений свойства all внутри правила blockquote.

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;
  margin: 0;
  padding: 0;
}

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

Результаты

A. Без свойства 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;
}

В этом случае внутри правила blockquote свойство all не задано. Элемент <blockquote> использует стандартное оформление браузера, которое задаёт ему отступы, а также определённые цвет фона и цвет текста, указанные в таблице стилей. Кроме того, он ведёт себя как блочный элемент: следующий за ним текст располагается ниже.

B. 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;
  all: initial;
}

Когда свойству all внутри правила blockquote задано значение initial, элемент <blockquote> больше не использует стандартное оформление браузера: теперь он является строчным элементом (начальное значение), его background-color — transparent (начальное значение), его font-size — medium, а его color — black (начальное значение).

C. 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;
  all: inherit;
}

В этом случае элемент <blockquote> не использует стандартное оформление браузера. Вместо этого он наследует значения стилей от родительского элемента <body>: теперь это блочный элемент (унаследованное значение), его background-color — #F0F0F0 (унаследованное значение), его font-size — small (унаследованное значение), а его color — blue (унаследованное значение).

D. 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;
  all: unset;
}

Когда для свойства all внутри правила blockquote применяется значение unset, элемент <blockquote> не использует стандартное оформление браузера. Поскольку background-color не наследуется, а font-size и color наследуются, элемент <blockquote> теперь является строчным элементом (начальное значение), его background-color — transparent (начальное значение), но его font-size по-прежнему равен small (унаследованное значение), а его color — blue (унаследованное значение).

E. all: revert

<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;
  all: revert;
}

Когда свойству all внутри правила blockquote задано значение revert, правило blockquote считается несуществующим, а значения свойств стилей наследуются от значений, применённых к родительскому элементу <body>. Поэтому элемент <blockquote> оформляется как блочный элемент со значениями background-color #F0F0F0, font-size small и color blue — все они унаследованы от правила body.

F. all: revert-layer

<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;
  all: revert-layer;
}

В CSS-файле не определены слои каскада, поэтому элемент <blockquote> наследует стили из соответствующего правила body. Здесь элемент <blockquote> оформлен как блочный элемент со значениями background-color #F0F0F0, font-size small и color blue — все они унаследованы от правила body. Это пример случая, когда all со значением revert-layer действует так же, как all со значением revert.

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

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

См. также

Глобальные ключевые слова CSS: initial, inherit, unset, revert, revert-layer