Наследование
Некоторые CSS-свойства применяются не только к самому элементу, но и к его детям.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Наследование в CSS — это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам.
Пример
Скопировать ссылку «Пример» Скопировано
Весь текст в этом абзаце будет красным.p style="color: red"> Весь span>текстspan> в em>этомem> абзаце будет b>краснымb>. p>
Как понять
Скопировать ссылку «Как понять» Скопировано
Если у какого-то свойства указать значение inherit — оно будет взято у верхнего «родителя». Для некоторых CSS-свойств это значение указано по умолчанию.
Наследуемые свойства
Скопировать ссылку «Наследуемые свойства» Скопировано
- Свойства шрифта: font и его «производных»: font — style , font — variant , font — weight , font — stretch , font — size и font — family ; color и line — height .
- Свойства межбуквенных и «межсловных» расстояний: letter — spacing , word — spacing и white — space .
- Параметры текста: text — align , text — indent , text — shadow , text — transform ;
- оформление пунктов списков: list — style , list — style — type , list — style — position .
- Внешний вид курсора: cursor и отображение содержимого элемента visibility .
Например, в отличие от color , который применится к подписи, ненаследуемое свойство border не будет применено к вложенным элементам:
Дока Дог figure> img src="doggo-up.svg"> figcaption>Дока Догfigcaption> figure>
figure border: 3px solid #18191c; color: blue;>figure border: 3px solid #18191c; color: blue; >
img border: inherit;>img border: inherit; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Другой пример наследования — использование вместо указания цвета значения current Color , который равен цвету текста текущего элемента, т. е. значению свойства color . Если color текущего элемента равен inherit (т. е. наследует значение «родителя»), то и current Color также будет соответствовать текущему значению color «родителя». Причём это ключевое слово можно указывать в качестве значения для любого свойства, где значением является цвет, не только для color . См. раздел «На практике».
Значения rem и em — также частный случай наследования кратного размера текста («родителя», если указан em и корневого тега в случае с rem ).
Полный список наследуемых по умолчанию CSS-свойств помечен в спецификации в колонке «Inherited?» значением yes .
Значение любого CSS-свойства можно «позаимствовать» (унаследовать) у родителя. Если «родителя» нет, inherit будет соответствовать значению по умолчанию для этого элемента.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
🛠 Удобно делать всякие трюки, используя current Color . Мы не меняем явно цвет рамки по наведению курсора, но он меняется вслед за color .
button class="magick-btn">Волшебная кнопкаbutton>
.magick-btn border: 2px solid; border-color: currentColor; border-radius: 6px; padding: 9px 15px; color: blue; background-color: transparent;> .magick-btn:hover color: pink;>.magick-btn border: 2px solid; border-color: currentColor; border-radius: 6px; padding: 9px 15px; color: blue; background-color: transparent; > .magick-btn:hover color: pink; >