all

Удобное свойство для сброса всех стилей сразу.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство all сбрасывает значения всех CSS-свойств, кроме direction и unicode-bidi.

Как пишется

Секция статьи "Как пишется"

У all 4 возможных значения:

  • initial — сбрасывает все свойства элемента до дефолтных, описанных в спецификации.
  • inherit — элемент будет наследовать все стили родителя, даже те, которые обычно не наследуются.
  • unset — элемент наследует все наследуемые стили родителя, а остальные сбрасывает до дефолтных.
  • revert — действие зависит от источника стилей: браузер, пользователь или сайт.

Значение revert

Секция статьи "Значение revert"

Действие значения revert зависят от источника стилей.

  1. Браузерные стили: действие аналогично unset.
  2. Пользовательские стили: откатываемся по каскаду к браузерным стилям (словно пользовательских для этого свойства не существует).
  3. Авторские стили: откатываемся по каскаду к пользовательским стилям (словно авторских для этого свойства не существует).

Пример

Секция статьи "Пример"

Для начала создадим базовый блок с контентом.

        
          
          <div class="container">  <span>Предисловие о многоножках...</span>  <p class="paragraph">    <!-- Тут текст про многоножек -->  </p></div>
          <div class="container">
  <span>Предисловие о многоножках...</span>
  <p class="paragraph">
    <!-- Тут текст про многоножек -->
  </p>
</div>

        
        
          
        
      
        
          
          .container {  font-size: 30px;}
          .container {
  font-size: 30px;
}

        
        
          
        
      
Открыть демо в новой вкладке

Сбросим у параграфа стили при помощи: all: initial;. Ещё зададим color: white;, иначе цвет текста сбросится до чёрного и текст станет не читаем на тёмном фоне.

        
          
          .paragraph {  all: initial;  color: white;}
          .paragraph {
  all: initial;
  color: white;
}

        
        
          
        
      
Открыть демо в новой вкладке

Все значения сбросились до дефолтных. Больше всего бросаются глаза изменения font-family, font-size, display.

Поддержка

Секция статьи "Поддержка"

all поддерживается всеми современными браузерами (Can I Use).