Наследование

Home

Наследование

( 0 - user rating )

Оригинал: Inheritance

Некоторые CSS свойства передаются от предка к потомку. Это называется наследованием.
Наследование призвано экономить css правила для каждого уровня элементов.

Например, если Вы укажете цвет для контейнера <body>, то этот цвет будет унаследован для всех других элементов на странице, если они не имеют свой специфический стиль для цвета.

body {
color:blue;
}

Существуют свойства, которые не унаследовываются. К ним относятся margin, padding, border и background. Если б они наследовались для всех вложенных элементов, то пришлось бы обнулять их значения для всех вложенных элементов.

Наследование размера шрифта

Свойство font-size не наследуется непосредственно как другие свойства. Наследуется лишь относительное (расчетное) значение размера шрифта. Этого не видно, если размер шрифта установлен в абсолютных единицах, но, если размер шрифта установлен в относительных единицах, таких как 80% или 8em, то это становится очевидным. В таком случае размер шрифта вычесляется прежде, чем наследуется вложенному элементу.

Например, если установить размер шрифта для контейнера <div>, то этот размер унаследуют не все потомки контейнера <div>, а только дочерний элемент.

div {
font-size:85%;
}

При наследовании размера шрифта бывают странные побочные эффекты. Например, если применить относительный размер шрифта 80% к элементу <div>, другие <div> вложенные элементы будут также наследовать размер - это означает, что они будут иметь размер шрифта 80% х 80% = 64%

Решение заключается в том, чтоб применять относительные еденицы для размера шрифта для элементов, в которых не будет вложенных элементов. Также можно использовать id, чтоб ограничить наследование.