Иерархическое дерево
HTML-документ представляет собой иерархическое дерево. У каждого элемента (кроме корневого) есть только один родитель, то есть элемент, внутри которого он располагается. У корневого раздела родитель отсутствует. Рассмотрим простейшую страницу:
html>
<head></head>
body>
p>Текст документа</p
p class="text">Выделенная <span>строка</span></p
</body
</htmlДля этой страницы можно нарисовать такое иерархическое дерево:
Оно схематически отображает структуру вложенности элементов.
Иерархическая структура документа определяет основы концепции#наследование.
Наследование
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно.
Рассмотрим пример:
<p class="text">Строка c выделенным <span>словом</span></pПредставим, что нам нужно установить красный цвет текста для всего текста. Зададим CSS-свойства следующим образом:
.text {
color: red;
}Благодаря наследованию цвет текста в теге span автоматически станет красным: Строка c выделенным словом
А так бы выглядел результат, если бы наследование не работало: Cтрока c выделенным словом
Наследуемые и ненаследуемые свойства
Не все свойства наследуются тегами-потомками от их родителей.
К наследуемые-свойства относятся в первую очередь свойства, определяющие параметры отображения текста:
font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.Также к наследуемым свойствам относятся list-style, cursor, visibility, border-collapse и некоторые другие. Весь список наследуемых свойств смотрите в стандарте CSS.
Значение yes в колонке Inherited?.
Наследуемые свойства можно и нужно задавать через предков, следуя семантике документа.
Все остальные свойства относятся к ненаследуемые-свойства . Это параметры позиционирования, размеров, отступов, фона, рамок и т. д. А именно: background, border, padding, margin, width, height, position и др.
Принудительное наследование
Для каждого свойства может быть задано значение inherit ( принудительное-наследование). Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента.
Запись выглядит следующим образом:
p {
background: inherit;
}каскадирование
CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».
Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств). Среди этих свойств могут быть и конфликтующие, поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.
каскадирование определяет, какие именно свойства из всех возможных источников будут применены к элементу.
Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:
- важность;
- специфичность;
- порядок исходного кода.
Специфичность
В случае, если элемент обладает несколькими классами и селекторы по этим классам задают одно и то же свойство с разными значениями, более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.
Разберём пример. Вот HTML-код, в котором есть абзац с двумя классами:
<p class="red blue">Синий или красный?</pА вот CSS-код c двумя правилами для этих классов:
.blue {
color: blue;
}
.red {
color: red;
}Абзац будет красного цвета, так как второе правило расположено ниже и является более приоритетным.
Простое объяснение специфичности звучит так:
Специфичность Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.
Селектор .red выберет все теги с нужным классом, а селектор p.red выберет только абзацы с нужным классом. Поэтому селектор p.red является более специфичным, чем селектор .red.
Селектор по id может выбрать только один элемент. И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.
CSS-правило, которые прописаны в style обладают наивысшим приоритетом. Такой способ задания стилей не приветствуется в профессиональной вёрстке сайтов и годится только для создания быстрых прототипов.
Существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style. Для этого нужно использовать ключевое слово !important. Оно задаёт CSS-свойству усиленный приоритет.
Вот пример:
<p style="color: red;" class="blue">Синий или красный?</p>.blue {
color: blue !important;
}Цвет текста в этом примере будет синим.
При вёрстке не рекомендуется часто использовать important.
Перекрёстное наследование
При создании стилей для сходных по внешнему виду или функциональности элементов, которые могут использоваться на странице неоднократно, очень удобно пользоваться перекрёстным наследованием.
Приём этот заключается в следующем:
- создаётся базовый стиль для таких элементов;
- определяются вспомогательные стили, которые применяются к элементам по мере надобности;
- элемент наследует базовый стиль и один или несколько вспомогательных.