Ключевые слова «inherit» и «initial» в CSS

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Читать в полной версии →

В CSS есть два специальных значения «inherit» и «initial» которые можно применять к любому свойству.

Ключевое слово "inherit" применяют когда хотят унаследовать какое-либо значение от родительского элемента. К примеру, у вас есть набор ссылок, который наследует установленный цвет ссылок для всей страницы (или если цвет для ссылок не задан, то цвет по умолчанию установленный в браузере), а вы бы хотели чтобы они были такого же цвета, как, допустим, цвет текста в родительском блоке. Для этого достаточно прописать color: inherit у всех дочерних ссылок того или иного блока. Благодаря чему ссылки «окрасятся» в цвет текста, который установлен у родителя, и в случае его изменения уже не придется отдельно менять цвет у ссылок, так как они всегда будут такого же цвета, как и текст родителя.

Ключевое слово "initial" применяется для отмены какого-то уже установленного значения и возвращает его в значение по умолчанию, так как каждое свойство в CSS имеет «начальное» состояние. В общем, с помощью "initial" можно сбросить значение свойства к значению по умолчанию. Иногда это очень удобно, когда, допустим, при адаптивном дизайне вам нужно возвращать значение свойств к значению по умолчанию при изменении размера окна браузера или при любых других различных разрешениях экрана.