Рассмотрим, как работает механизм наследования ненаследуемых свойств, используя значения inherit таких свойств: background-color, border. Из таблицы выше видно, что эти свойства не наследуют значения родителей и имеют по умолчанию следующие значения:
background-color:transparent; (прозрачный)
border:Зависит от браузера (чаще всего отсутствует)
Пример 1. Вложенный элемент не наследует значения свойств родителя.
Вложенный элемент не наследует значения свойств родителя.
свойства: background-color, border - по умолчанию...
Большой див является родителем для внутреннего маленького дива, но он не передает дочке значения ненаследуемых свойств.
Пример 2. Вложенный элемент наследует значения свойств родителя с помощью специального значения inherit.
Вложенный элемент наследует значения свойств background-color, border родителя
с помощью специального значения inherit...
Большой див является родителем для внутреннего маленького дива. Значения свойств background-color, border родителя передаются дочке с помощью специального значения inherit...
Пример 3. Вложенный элемент меняет значения свойств при изменения значений свойств родителя.
Вложенный элемент наследует значения свойств background-color, border родителя
с помощью специального значения inherit...
Большой див является родителем для внутреннего маленького дива. Значения свойств background-color, border родителя передаются дочке с помощью специального значения inherit...
В данном примере при нажатии кнопки "Изменить цвет фона" изменяется цвет фона родительского дива. А дочерний элемент меняет цвет фона благодаря значению inherit в свойстве background-color.
Рассмотрим, как работает механизм наследования ненаследуемых свойств, используя значения inherit таких свойств: background-color, border. Из таблицы выше видно, что эти свойства не наследуют значения родителей и имеют по умолчанию следующие значения: