Когда вы будете рассматривать различные CSS свойства, довольно часто в качестве значения этих свойств может встретиться такое значение как inherit.
Давайте разберемся, что это значит и как это работает.
inherit - означает то, что данное свойство свое значение будет принимать от значения соответствующего свойства родительского элемента.
Давайте рассмотрим следующий код.
HTML:
<div> Here is <span>a span element</span> which is blue, as span elements are set to be. </div>
CSS:
span { color: blue; border: 1px solid black; } .extra span { color: inherit; }
У нас есть элемент div, который находится внутри элемента span.
Если открыть эту страницу, то мы увидим, что текст внутри элемента span будет синим цветом.
Т.к. у нас есть стиль CSS span {color: blue; …, текст всех элементов span становится синим цветом.
Теперь возьмем следующий код HTML, CSS стили остаются теми же самими.
HTML:
<div class="extra" style="color:green"> Here is <span>a span element</span> which is blue, as span elements are set to be. </div>
Теперь весь текст внутри элемента div будет зеленым цветом.
Казалось бы, что у нас есть стиль для элемента span. Но, у нас есть более точный стиль, который говорит о том, что для тех элементов span, которые будут находится внутри блока с классом extra, нужно применить для них свойство color со значением inherit.
Таким образом, браузер видя, что наш блок находится внутри блока с классом extra. Будет применять для него тот цвет текста, который имеется у родительского элемента. Родительским элементом для span является элемент div, а этот элемент div имеет цвет текста зеленый.
Таким образом текст внутри элемента span стал зеленым цветом. Хотя это противоречит этому правилу:
span { color: blue; border: 1px solid black; }
Вот таким образом работает значение свойств CSS inherit.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти