Глобальные ключевые слова CSS
В CSS существует набор глобальных ключевых слов, которые могут применяться к любым CSS-свойствам, обеспечивая универсальность и гибкость в управлении стилями. Эти ключевые слова включают:
inherit
initial
unset
revert
Примеры
Ключевое слово 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
вернёт цвет к значению, установленному пользовательскими стилями (если они существуют) или стилями браузера, отменяя значение, заданное автором стилей.