Глобальные ключевые слова в CSS. Полное руководство с примерами

В CSS существует набор глобальных ключевых слов, которые могут применяться к любым CSS-свойствам, обеспечивая универсальность и гибкость в управлении стилями. Эти ключевые слова включают inherit, initial, unset и revert. В этой статье мы подробно рассмотрим каждое из этих ключевых слов, объясним их применение и приведём примеры использования.

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

inherit

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

Пример использования inherit

.parent {
    color: blue;
}

.child {
    color: inherit;
}

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

initial

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

Пример использования initial

.element {
    font-size: 20px;
}

.reset {
    font-size: initial;
}

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

unset

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

Пример использования unset

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

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

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

revert

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

Пример использования revert

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

.author-style {
    color: red;
}

.element {
    color: blue;
}

.element.reverted {
    color: revert;
}

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

Примеры использования глобальных ключевых слов

Пример 1: Наследование значений

.container {
    font-size: 18px;
    color: darkslategray;
}

.text {
    font-size: inherit;
    color: inherit;
}

В этом примере элемент с классом text наследует размер шрифта и цвет текста от родительского элемента с классом container.

Пример 2: Сброс к исходным значениям

.button {
    background-color: orange;
    padding: 10px 20px;
}

.button-reset {
    background-color: initial;
    padding: initial;
}

В этом примере элемент с классом button-reset сбрасывает фон и отступы к значениям по умолчанию.

Пример 3: Комбинирование наследования и сброса

.parent {
    font-weight: bold;
    margin: 20px;
}

.child {
    font-weight: unset; /* Сбрасывается к initial (нормальный вес) */
    margin: inherit; /* Наследует значение от родителя */
}

В этом примере элемент с классом child сбрасывает вес шрифта к нормальному и наследует отступы от родителя.

Заключение

Глобальные ключевые слова в CSS (inherit, initial, unset и revert) предоставляют универсальные инструменты для управления стилями. Они помогают создавать гибкие и предсказуемые стили, облегчая поддержку и развитие веб-проектов. Освоив использование этих ключевых слов, вы сможете более эффективно управлять внешним видом элементов на ваших веб-страницах, обеспечивая их согласованность и адаптивность.