Полный цикл в digital

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

В CSS существует набор глобальных ключевых слов, которые могут применяться к любым CSS-свойствам, обеспечивая универсальность и гибкость в управлении стилями. Эти ключевые слова включают:

  1. inherit
  2. initial
  3. unset
  4. revert

Примеры

inherit

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

.parent {
color: blue;
}

.child {
color: inherit;
}

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

initial

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

.element {
font-size: 20px;
}

.reset {
font-size: initial;
}

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

unset

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

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

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

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

revert

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

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

.author-style {
color: red;
}

.element {
color: blue;
}

.element.reverted {
color: revert;
}

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

Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!