В предыдущих уроках кратко упоминали, что при знакомстве с таблицей стилей CSS, правилами, свойствами и селекторами стоит уяснить для себя правила наследования стилей. Мы знаем, что весь HTML- документ условно можно представить в виде иерархии, где одни элементы содержат в себе другие. Между элементами существуют различные связи. Они могут быть соседними, а могу иметь свзять родитель-дочерний элемент. У каждого элемента только один непосредственный родитель, это тот, который содержит его явно. Родителя нет только у корневого элемента, в Html-файлах это тег <html>.
Свойства, которые мы прописываем для родительского элемента передаются всем его потомкам различных уровней вложенности. Чтобы переопределить эти свойства необходимо прописать их дочернему элементу. Такие стили будут иметь больший приоритет и перебьют наследуемые свойства. Наследуются, естественно, не все стили. Например, стили связанные со шрифтами. Этот механизм необходим для сокращения таблицы стилей, ведь это очень удобно, хотя есть и существенные минусы. Когда css-файл разрастается, очень трудно отследить какой родительский элемент задает некоторые стили, от этого может возникнуть путаница.
Какие css-свойства (стили) наследуются
font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.
Наследуются еще некоторые другие свойства, но применяют такое наследование гораздо реже. Почему же в основном этому механизму подвержены стили работы с текстом. Дело в том, что у большинства сайтов есть общая типографическая концепция. Цвет текста, размер шрифта, вид шрифта, поэтому здраво задавать такие стили для документа в целом или для конкретных блоков.
Соответственно большинство свойств, отвещающих за внешний вид сайта не наследуются. Было бы странно, если задавая фон или рамку одного элемента, мы получали такие же у всех потомков. Поэтому механизм наследования имеет продуманную суть.
В некоторых ситуациях имеются исключения. Например, мы хотим все же получить значение для свойства от родительского элемента. Тогда можно использовать конструкцию свойство : inherit; Для любого свойства будет принято значение от родителя. Этот механизм называется принудительное наследование.
Каскадирование CSS, каскадные таблицы стилей
Мы уже знаем о расшифровке аббревиатуры CSS, с таблицей стилей все в принципе понятно, а что же такое каскадная? Каскадирование - один из базовых механизмов при работе с css-правилами. Для одного и того же элемента может быть задано множество пересекающихся стилей. Стили могут задаваться через атрибут style, через селектор тега, класса, идентификатора, могут наследоваться от родителя и т.д. Вопрос в том, какие же стили применяться к элементу в конечном итоге, давайте разбираться.
На выбор стилей для элемента влияют несколько факторов. Приоритет, специфичность, порядок кода. Специфичность простым языком можно описать так, чем конкретнее (точнее) задан селектор, тем он специфичнее. Т.е. чем меньше выбираем элементов для данного правила, тем специфичность больше.
Теперь на примерах:
- Если задаем стили для элемента по одинаковому селектору, по тегу, по классу, например, то применяются те свойства, которые стоят ниже в css-файле. Ведь специфичность и приоритет в этом случае будут одинаковы.
- Если одно правило в качестве селектора использует класс, а другое тег с уточняющим классом, то применяются стили второго правила, т.к. более специфичный. Например, для <p class="first sec"> зададим правила с использованием селекторов .first и p.second. В конечном итоге приоритетными будут свойства второго селектора.
- Если в качестве селектора использовать идентификатор (id), то такие правила будут приоритетнее. Это происходит потому что элемент с данным Id единственный на страницу, значит специфичность его больше.
- Еще более приоритетны свойства записанные через атрибут style
- Чтобы переопределить стили через атрибут style можно использовать ключевое слово !important применимое к любому свойства. Оно переопределяет все. Однако злоупотреблять им не стоит, использовать в крайних случаях
Перекрестное наследование стилей
Далее расскажем про еще один популярный и удобный прием в задании css-свойсв. У большинства сайтов есть похожие друг на друга элементы, которые отличаются лишь незначительно. Одним из таких популярных html-элементов являются кнопки. Как правило, они имеют одинаковые отступы, размеры, закругления, тени, цвет текста и т.д. Здесь и удобно применять перекрестное наследование стилей
- Вынесем общие стили в основной класс .button
- Зададим вспомогательные стили еще в нескольких классах. Например, .button-red и .button-blue
- Пропишем у всех сходных элементов базовый класс, а следом при необходимости один или несколько вспомогательных
<div class="catalog">
<div class="catalog-item">
...
<a class="button button-red"></a>
</div>
<div class="catalog-item">
...
<a class="button button-blue"></a>
</div>
</div>Таким образом избавляемся от лишнего кода, упрощаем себе жизнь.