Общие значения

У каждого свойства свои значения: у color — цвета, у display — block, flex и другие. Но есть четыре ключевых слова, которые понимает любое свойство: inherit, initial, unset и revert. Они не задают конкретный цвет или размер, а говорят, откуда взять значение.

inherit — как у родителя

inherit берёт значение у родительского элемента. Например, ссылки не наследуют цвет текста: браузер красит их в синий. color: inherit делает ссылку того же цвета, что и окружающий текст:

<style>
  .footer { color: seagreen; }
  .footer a { color: inherit; }
</style>
 
<p class="footer">Подвал сайта. <a href="#">Ссылка</a> того же цвета.</p>

Поменяйте цвет у .footer — ссылка последует за ним.

initial — начальное значение

initial возвращает начальное значение свойства — то, что записано для него в стандарте CSS. Для color это обычно чёрный:

<style>
  .box { color: crimson; }
  .box span { color: initial; }
</style>
 
<p class="box">Красный текст, <span>а здесь color: initial — чёрный</span>.</p>

Начальное значение не всегда совпадает со стилем браузера. Например, у display оно inline, поэтому div с display: initial становится строчным.

unset — сбросить по-умному

unset ведёт себя по-разному: для наследуемых свойств (цвет, шрифт) работает как inherit, для остальных (рамка, отступы) — как initial:

<style>
  .card { color: navy; padding: 8px; border: 2px solid navy; }
  .card p { color: crimson; border: 2px dashed crimson; }
  .card .plain { color: unset; border: unset; }
</style>
 
<div class="card">
  <p>Свой цвет и своя рамка</p>
  <p class="plain">unset: цвет взят у карточки, рамки нет</p>
</div>

revert — вернуть стиль браузера

revert отменяет ваши правила и возвращает значение из стилей браузера по умолчанию. Это удобно после сброса: в начале файла у списков убрали маркеры, а в тексте статьи их нужно вернуть:

<style>
  ul { list-style: none; padding: 0; }
  .article ul { list-style: revert; padding: revert; }
</style>
 
<ul><li>Меню</li><li>Контакты</li></ul>
<div class="article">
  <ul><li>Пункт статьи</li><li>Ещё пункт</li></ul>
</div>

Свойство all

all задаёт значение сразу всем свойствам элемента. Чаще всего пишут all: unset — элемент теряет всё оформление. Так из кнопки делают «кнопку-ссылку»:

<style>
  .link-button {
    all: unset;
    color: royalblue;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
 
<button>Обычная кнопка</button>
<button class="link-button">Кнопка без оформления</button>

Вместе с остальным all: unset убирает и рамку фокуса, поэтому для таких кнопок стоит добавить стиль :focus-visible.

Шпаргалка

Частая ошибка

all — тоже свойство, и действует порядок объявлений. Если написать all: unset в конце правила, он сотрёт всё, что было задано выше:

<style>
  .a { color: crimson; font-weight: 700; all: unset; }
  .b { all: unset; color: crimson; font-weight: 700; }
</style>
 
<p><span class="a">all в конце — стили стёрты</span></p>
<p><span class="b">all в начале — стили на месте</span></p>

Ставьте all первой строкой правила, а свои свойства — после него.