inherit, initial, unset, revert
Ключевые слова, которые работают в любом свойстве и по-разному его сбрасывают.
Синтаксис
property: inherit | initial | unset | revert;Параметры
| Параметр | Тип | Описание |
|---|---|---|
| inherit | keyword | Взять значение у родителя. |
| initial | keyword | Начальное значение из спецификации CSS (для `color` — чёрный). |
| unset | keyword | `inherit` для наследуемых свойств, `initial` для остальных. |
| revert | keyword | Вернуться к стилю браузера по умолчанию для этого элемента. |
Примеры
Ссылка с цветом родителя:
<style>
.card { color: darkgreen; border: 2px solid currentColor; padding: 8px; }
.card a { color: inherit; }
</style>
<div class="card">The link takes the card color: <a href="#">Read more</a></div>initial и revert отличаются:
<style>
li { list-style: square; color: crimson; }
.a { color: initial; }
.b { list-style: revert; }
</style>
<ul>
<li class="a">initial: black, the CSS default</li>
<li class="b">revert: the browser's own bullet style</li>
</ul>Примечания
initial часто удивляет: для display это inline, даже у div. Чтобы вернуть «как показывает браузер», берите revert. Есть ещё revert-layer — он отменяет стили текущего каскадного слоя.
См. также
- !important — Заставляет объявление побеждать все обычные объявления независимо от специфичности.
- @layer — Группирует стили в каскадные слои: более поздний слой побеждает независимо от специфичности.
- font — Сокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.
В учебнике
- Общие значения — Ключевые слова inherit, initial, unset и revert, которые принимает любое CSS-свойство, и свойство all для сброса всех стилей сразу.