Добрый день!
Сегодня я расскажу о четырех интересных ключевых словах CSS. Начнем!
Ключевое слово: inherit
Сразу рассмотри пример:
span {
font-size: inherit;
}
В результате элемент span будет наследовать свойство font-size от родительского элемента. Если у родительского элемента не определено свойство font-size, тогда элемент span будет использовать вычисленное у родителя свойство font-size (которое может быть унаследовано от другого родителя).
Слово inherit может пригодиться, когда вы хотите присвоить одно и тоже значение на кучу дочерних элементов. Например:
.module {
box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);
}
.module div {
box-shadow: inherit;
}
Теперь все элементы div внутри module будут наследовать значение свойства box-shadow.
Ключевое слово: initial
Ключевое слово initial впервые появилось в CSS3. Каждое CSS свойство имеет начальное значение или значение по умолчанию.
Определяя значение свойство используя ключевое слово initial, вы говорите браузеру: «используй значение свойства по умолчанию».
Например, вы можете захотеть использовать значение цвета по умолчанию:
body {
color: aquamarine;
}
.example {
color: initial;
}
Элемент example будет иметь цвет такой же, как установлен в body. Таким образом мы сбросили другой цвет этого элемента, например, который наследовался от родительского элемента и был красным.
Что касается поддержки браузерами: initial работает в последних версиях Chrome и Firefox. Насчет остальных браузеров я не уверен.
Ключевое слово: unset
body {
font-size: 1.5em;
}
.module {
font-size: unset;
}
Различие между unset и initial в том, что значения, которые могли быть унаследованы элементом, сбрасываются.
Свойство: all
Свойство all сбрасывает все свойства элемента.
.example {
all: initial;
}
В спецификации сказано:
«Данное свойство может использоваться для элементов виджетов на странице, где нежелательно наследовать стили страницы».
Спасибо за внимание!
Подписывайтесь на рассылку! 😉
