Значение свойств CSS inherit.

Когда вы будете рассматривать различные 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.


Чтобы оставить комментарий или отчет по выполнению задания, зарегистрируйтесь на сайте.