Школа программирования ProgTips В прошлой статье мы разобрали что такое CSS, как подключать стили к HTML страницам, поговорили о синтаксисе CSS-правил, и познакомились с многообразием CSS-селекторов.
В этой статье разберем немного более сложные вещи.
Предположим, есть страница на сайте, где слева размещены статьи, а справа, в боковой колонке идет новостная лента. Ниже псевдоразметка, чтобы было понятно, о чем идет речь.
|
1 2 3 4 5 6 7 8 |
<div class="articles"> <h3>Заголовок статьи 1</h3> <h3>Заголовок статьи 2</h3> </div> <div class="sidebar"> <h3>Заголовок новости 1</h3> <h3>Заголовок новости 2</h3> </div> |
Для заголовков и статей, и новостей, используются теги <h3>. Мы можем отформатировать эти заголовки, используя селектор элемента, например:
|
1 2 3 4 |
h3 { font-size: 1.5rem; font-weight: bold; } |
Cтоит задача, что заголовки статей должны быть по центру, а заголовки новостей надо сделать темно-красного цвета.
Мы можем написать отдельные классы для заголовков статей и заголовков новостей, и в этом классе прописать нужные нам свойства.
Но тогда нам придется эти классы указать в разметке для каждого тега <h3> как в статьях, так и в новостях, да и в целом количество классов увеличится. Однако известный философский принцип «Не следует множить сущности без необходимости» актуален везде, в том числе и программировании.
Мы можем поступить красивее, а именно использовать комбинации селекторов.
Комбинации селекторов.
Селекторы можно комбинировать друг с другом используя, так называемые комбинаторы.
В задачу, описанную выше, мы можем решить, написав два правила.
Для заголовков статей:
|
1 2 3 |
.articles h3 { text-align: center; } |
Для заголовков новостей:
|
1 2 3 |
.sidebar h3 { color: darkred; } |
Здесь мы использовали комбинатор пробел . Т.е. селектор .articles h3 выберет для изменений теги <h3> , которые находятся внутри элемента с классом articles (вне зависимости от уровня вложенности).
Этот комбинатор называется «комбинатор потомков» и используется очень часто.
Дочерний селектор
Давайте немного изменим верстку блока со статьями.
|
1 2 3 4 5 6 7 8 9 |
<div class="articles"> <h3>Заголовок статьи 1</h3> <h3>Заголовок статьи 2</h3> <div class="promo"> <h3>Рекламная акция</h3> </div> <h3>Заголовок статьи 3</h3> <h3>Заголовок статьи 4</h3> </div> |
У нас, среди статей, появился рекламный блок, и в нем также используется заголовок <h3> .
Использованный нами ранее селектор .articles h3 подействует и на заголовок рекламной акции, поскольку он не учитывает уровень вложенности.
Если мы хотим изменить только заголовки статей, не трогая рекламный заголовок, то лучше использовать «дочерний селектор» — символ > .
|
1 2 3 |
.articles > h3 { text-align: center; } |
Селектор .articles > h3 выберет для изменения теги h3, которые находятся непосредственно в элементе с классом articles , а теги рекламных заголовков затронуты не будут.
Комбинатор всех соседних элементов
Комбинатор ~ выберет все соседние элементы, т.е. элементы у которых такой же контейнер, как и у указанного элемента. Слово «соседний» в данном случае обозначает, что будут выбраны все элементы находящиеся после указанного.
|
1 2 3 4 5 6 7 8 9 |
<div class="articles"> <h3 class="first-article">Заголовок статьи 1</h3> <h3>Заголовок статьи 2</h3> <div class="promo"> <h3>Рекламная акция</h3> </div> <h3>Заголовок статьи 3</h3> <h3>Заголовок статьи 4</h3> </div> |
|
1 2 3 |
.first-article ~ h3 { color: blue; } |
В примере выше все заголовки <h3>, которые находятся после заголовка с классом .first-article , станут синего цвета. Заголовок, находящийся внутри <div> с классом .promo затронут не будет, поскольку у него другой контейнер.
Комбинатор следующего соседнего элемента
Комбинатор + позволяет выбрать элемент, который находится сразу после указанного элемента. При этом, конечно, у них должен быть общий контейнер.
|
1 2 3 |
.first-article + * { margin-top: 3rem; } |
В примере выше, написано правило, которое обеспечивает, что любой (один) элемент, который находятся сразу после заголовка с классом .first-article , будет иметь отступ сверху размером 3rem .
Комбинатор запятая
Комбинатор, позволяет сгруппировать селекторы, т.е. задать несколько селекторов для одного правила.
|
1 2 3 |
h1, h2, h3, h4, h5, h6 { margin-bottom: 0; } |
В примере выше, мы обнуляем отступы снизу сразу у всех заголовков.
Наследование
Для сокращения количества правил в CSS имеется механизм наследования.
Наследование – это механизм, когда определенные в контейнере свойства, автоматически назначаются вложенным в этот контейнер элементам.
Для примера, рассмотрим правило:
|
1 2 3 |
body { color: blue; } |
В примере выше, мы устанавливаем синий цвет текст для тега <body> . При этом все остальные элементы, находящиеся внутри этого тега, независимо от уровня вложенности, унаследуют синий цвет текста.
Описанное выше поведение очень удобно, иначе вам бы пришлось, для всех элементов, прописывать цвет текста вручную.
Наследуются далеко не все свойства. Свойства, относящиеся к тексту, наследуются – это такие свойства, как: color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing и некоторые другие.
А вот свойства, которые отвечают за форматирование блоков не наследуются: background, border, display, float и clear, height, width, margin, overflow, padding, position, text-decoration, vertical-align, z-index и другие.
В самом деле, представьте если бы наследовалась, скажем, граница – верстка бы сильно усложнилась.
В спецификации css имеется ключевое слово inherit . С его помощью можно принудительно наследовать любое свойство от родительского блока (как наследуемое, так и не наследуемое).
|
1 2 3 |
.sidebar p { overflow: inherit; } |
В этом примере параграфы, находящиеся внутри блока с классом .sidebar будут наследовать значение свойства overflow от своего контейнера.
Каскадность и специфичность
Напомню, что CSS в переводе – это «Каскадные таблицы стилей», уже одно это показывает важность понятия «каскадность».
В верстке самой распространенной является ситуация, когда на один элемент действуют множество CSS-правил. И то, как именно будет выглядеть элемент определяют именно каскадность и специфичность.
Каскадность
Каскадность – это механизм CSS, который определяет какие стили в итоге будут применены к элементу.
Посмотрите на пример:
|
1 |
<h3 class="attention highlight">Заголовок третьего уровня</h3> |
|
1 2 3 4 5 6 7 8 9 |
h3 { font-size: 24px; } .attention { color: red; } .highlight { background-color: yellow; } |
Видим, что для данного элемента имеются 3 правила. Итоговыми стилями, примененными к элементу, будут:
|
1 2 3 4 5 |
{ font-size: 24px; color: red; background-color: yellow; } |
С каскадностью теснейшим образом связана специфичность.
Дело в том, что одни и те же свойства, для одного и того же элемента, могут быть определены в разных css-правилах, и даже, в разных файлах.
Какое же значение у свойства будет в итоге? Это определяется через механизм, называемый специфичность.
Специфичность
Посмотрим пример:
|
1 2 3 |
<div class="sidebar"> <h3>Заголовок новости</h3> </div> |
|
1 2 3 4 5 6 |
.sidebar h3 { color: red; } h3 { color: blue; } |
В примере цвет текста для тега <h3> , находящегося в контейнере с классом .sidebar , прописан 2 раза.
Вопрос: «Какой цвет будет у этого элемента?»
Ответ: «Красный, поскольку селектор .sidebar h3 более специфичен, еще говорят: селектор имеет больший вес».
Специфичность (вес) селектора определяется при помощи 4-х различных значений. Эти значения можно, условно, представить как цифры: тысячи, сотни, десятки, единицы.
- Тысяча – это встроенные стили, добавляемые непосредственно в сам элемент в HTML-разметке.
- Сотня – это идентификатор.
- Десятки – это классы.
- Единицы – это сам элемент или псевдоэлемент.
Если не очень понятно, то посмотрите таблицу ниже и все станет ясно:
| Селектор | Тысячи | Сотни | Десятки | Единицы | Специфичность |
| div | 0 | 0 | 0 | 1 | 0001 |
| .some-class | 0 | 0 | 1 | 0 | 0010 |
| #myid | 0 | 1 | 0 | 0 | 0100 |
| <p style=»color: red»>текст</p> | 1 | 0 | 0 | 0 | 1000 |
| .some-class div | 0 | 0 | 1 | 1 | 0011 |
| #myid .some-class div | 0 | 1 | 1 | 1 | 0111 |
| .some-class ul li | 0 | 0 | 1 | 2 | 0012 |
| .some-class .my-class p span | 0 | 0 | 2 | 2 | 0022 |
В ситуации, если специфичность у селекторов одинакова, действовать будет правило, которое находится ниже в css-файле.
Если правила находятся в разных css-файлах, то действовать будет правило, которое расположено в файле, подключенном позднее (ниже).
Модификатор !important
Если для объявления задан модификатор !important , то такое объявление будет иметь приоритет над всеми остальными объявлениями для данного элемента.
Модификатор !important пишется в конце объявления, после значения перед точкой с запятой.
|
1 2 3 |
h3 { font-size: 24px !important; } |
Внимание! Всегда пытайтесь использовать специфичность, модификатор !important применяйте, если нет другого выхода.
Например, для элемента использованы встроенные стили, и вы не можете их редактировать, а изменить внешний вид элемента нужно.
Практический совет
На практике распространена ситуация, когда нужно доработать правила, которые писал другой человек. Скажем, вам нужно изменить отображение какого-то элемента темы для wordpress. Темы бывают с достаточно сложной версткой.
И вот, вы вносите изменения, но элемент отображается не так, как задумывалось. Это значит на него влияют правила, написанные другим разработчиком, которые могут находиться в разных css-файлах.
Чтобы понять, какие правила влияют на отображение того или иного элемента, проще всего воспользоваться «инструментами разработчика», которые есть в любом популярном браузере.
По инструментам разработчика Google Chrome у нас написана целая статья – читайте, изучайте, используйте.
Спасибо, очень понятная статья.