Глобальные ключевые слова CSS

Ключевое слово inherit заставляет свойство наследовать значение родительского элемента. Это полезно для того, чтобы гарантировать, что дочерние элементы будут следовать стилям, заданным для их родителя.

.parent {
color: blue;
}

.child {
color: inherit;
}

В этом примере текст внутри элемента с классом child будет окрашен в синий цвет, так как он наследует значение свойства color от элемента с классом parent.

Ключевое слово initial устанавливает значение свойства по умолчанию, заданное спецификацией CSS. Это полезно для сброса стиля свойства к его исходному значению.

.element {
font-size: 20px;
}

.reset {
font-size: initial;
}

В этом примере элемент с классом reset вернёт размер шрифта к значению по умолчанию, заданному спецификацией CSS, независимо от того, какое значение было установлено ранее.

Ключевое слово unset действует как inherit для наследуемых свойств и как initial для ненаследуемых свойств. Это делает его универсальным инструментом для сброса значений свойств к наследуемым или исходным значениям.

.parent {
color: green;
display: flex;
}

.child {
/* Наследует значение родителя, так как color наследуемое свойство */
color: unset;
/* Сбрасывает значение на initial, так как display ненаследуемое свойство */
display: unset;
}

В этом примере цвет текста в элементе с классом child будет зелёным (унаследовано от родителя), а свойство display будет сброшено к значению по умолчанию (блочный элемент).

Ключевое слово revert отменяет любые изменения, применённые к свойству, и возвращает значение к тому, что было установлено браузером или пользовательскими стилями (если они есть). Оно учитывает каскадность и специфичность.

.user-style {
color: purple !important;
}

.author-style {
color: red;
}

.element {
color: blue;
}

.element.reverted {
color: revert;
}

В этом примере элемент с классом reverted вернёт цвет к значению, установленному пользовательскими стилями (если они существуют) или стилями браузера, отменяя значение, заданное автором стилей.