... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Синтаксис CSS. Наследование

 

 

Правила CSS ||  Типы селекторов ||  Единицы измерения ||  Наследование ||  Каскадирование ||  CSS и браузер


Термин "наследование" перекочевал в CSS, очевидно, из объектно-ориентированных языков. В общем-то, это довольно понятный и на обывательском уровне термин. Каждый из нас унаследовал от своих предков некие качества. Кто-то красивые глаза от мамы и сильный характер от папы, кто-то фигуру от бабушки, а цвет волос от дедушки. Кроме этого, каждый из нас передаст какие-то качества свои детям, внукам и правнукам, в общем, своим потомкам.

Аналогично некоторые свойства CSS могут наследоваться от элементов-предков. Предком в данном случае называется элемент, стоящий в дереве документа уровнем выше, чем исходный элемент. Непосредственным предком называется элемент, стоящий ровно на один уровень выше в дереве. Аналогично определяется и непосредственный потомок - это элемент, стоящий на уровень ниже в дереве элементов.

Например, в дереве, показанном на рисунке ниже, элемент LI является потомком элементов OL и BODY, но непосредственным потомком только элемента OL. Элемент OL в этом случае называется непосредственным предком элемента LI. У элемента Р два непосредственных потомка: ЕМ и STRONG.

Дерево элементов HTML-документа


Для каждого свойства CSS указывается, является оно наследуемым или нет. Например, к наследуемым свойствам относится цвет, задаваемый ключевым словом color. Рассмотрим пример, когда внутри элемента P располагается выделение ЕМ.

<Р>Создаем <ЕМ>выделение</ЕМ> внутри абзаца</Р>

Пусть для элемента Р задан стиль:

P { color: blue }

Тогда элемент унаследует цвет от своего предка, и текст внутри элемента ЕМ также будет синим, как и во всем абзаце. Воспользовавшись свойством наследования, можно задать общие для всего документа параметры оформления, указав их в самом старшем элементе документа, которыми могут быть или HTML или BODY.



BODY { color: brown; font-size: 12pt }

Тем самым мы задали коричневый цвет для всего текста на странице и размер шрифта, равный 12 пунктам. Эти значения могут быть переопределены по более специфичными правилам, например на основе классов или идентификаторов.

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

Кроме этого, для каждого свойства может быть задано значение inherit, которое означает, что это свойство должно наследоваться.



Р { color: inherit;}

В результате цвет текста абзаца будет наследоваться от предка. Это общие принципы наследования, поэтому при написании CSS-правил следует учитывать, какие свойства являются наследуемыми, а какие нет. Свойство color, например, является наследуемым и так, поэтому предыдущее правило не имеет особого смысла.

 

 

Правила CSS ||  Типы селекторов ||  Единицы измерения ||  Наследование ||  Каскадирование ||  CSS и браузер

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены