Дело № 26: Основы: Работаем с селекторами CSS

Это тема, которая касается многих разработчиков. Стили CSS служат для определения того, каким образом содержание страницы отображается в браузерах. Как нужно применять эти стили в работе, чтобы экономить время при одновременном повышении качества?
Ответ заключается в использовании селекторов.

Давайте начнем с основ

В качестве селектора может выступать любой тег HTML для которого будут определены правила форматирования, такие как: цвет, фон, размер и т.д., и которые присутствуют на этой странице. Например, если вы хотите, чтобы текст внутри <li> элементов вашей страницы был окрашен в красный цвет, вам придется нужно написать следующее:

li {color: red;}

,где li – селектор, color – свойство CSS, red – значение.

Сейчас изменим цвет фона всех параграфов на странице:

p {background-color: red;}

Селекторы CLASS и ID

Теперь вы знаете как применить стили к селекторам на всей странице. Но что делать, если вы хотите применить стиль только к одному элементу и не применять для всех остальных элементов, присутствующих на этой странице?

ID

ID селектор (называемый также «Идентификатор») определяет уникальное имя элемента, которое используется для изменения стиля, кроме того, обращения к нему через скрипты позволяют управлять стилем элемента динамически.
Полезно запомнить, что нужно думать об идентификаторе, как о «личности», как идентификационном номере, который является уникальным, удостоверяющим личность и может быть связан только с одним элементом на веб-странице.
Чтобы применить атрибут ID элемента, достаточно включить его сразу после открывающего тега того же элемента. Например, чтобы применить ID ‘myparagraph’, все что вам нужно – написать вот этот код:

<p id="myparagraph">Этот параграф мы написали красного цвета!</p>

Но не забываем, что нужно указать элемент в таблице стилей CSS, и все, что вам нужно сделать, это вставить символ # перед ID. Так что в этом случае правило запишется так:

#myparagraph { color:red; }

Class

Еще раз! Каждый атрибут ID должен быть уникальным. Поэтому, если вы хотите выделить, например, два параграфа вместо одного, то вам придется определить и применять более чем один ID:

<p id="myparagraph1">Этот параграф мы написали красного цвета!</p>
<p id="myparagraph2">Этот параграф мы написали красного цвета тоже!</p>

Конечно ID вы должны описать в таблице CSS:

#myparagraph1 { color:red; } #myparagraph2 { color:red; }

Конечно это не удобно. Вот в этом случае пригодится Class. Класс может быть применен к более чем одному элементу, не вызывая проблем. Процедура включает в себя шаги, аналогичные тем, которые используются для ID, единственным исключением является «точка» в имени класса:

.myparagraph { color:red; }

Тогда раскрасить параграфы будет удобнее:

<p class="myparagraph">Этот параграф мы написали красного цвета!</p>
<p class="myparagraph">Этот параграф мы написали красного цвета тоже!</p>

Объединение Class и ID с разными селекторами

Возможно вам интересно, что произойдет, если вы примените Class «myparagraph» к другим элементам?
Например вот так:

<h2 class="myparagraph">Заголовок в красном</h2>
<p class="myparagraph">Этот параграф мы написали красного цвета!</p>
<p class="myparagraph">Этот параграф мы написали красного цвета тоже!</p>

Да ничего особенного, просто все станет красного цвета.
А если нужно менять цвет только параграфов и не трогать остальные селекторы?
Напишите в таблице CSS следующий код:

p.myparagraph { color:red; }

Правило будет звучать примерно так: «Применить красный цвет для всех параграфов имеющим Class myparagraph«.
Теперь только параграфы будут показаны красным цветом, а заголовок, начинающийся тэгом h2 не будет красным, даже если он имеет класс myparagraph. Таким образом, чтобы применить класс только к определенным типам элементов, все что вам нужно сделать, это использовать имя элемента, точку и имя класса.
То же самое можно сказать и об атрибуте ID. Если у вас есть <h2> с идентификатором «Title», вы сможете сделать так:

<h2 id="title">Заголовок статьи</h2>

А в таблице CSS

h2#title { font-size: 28px; }

Размер h2 элемента c ID «title» (и только этим) изменится до 28 пикселей.

• Проверяем таблицу стилей CSS на ошибки
• Wordpress для чайников:где найти в блоге шаблоны и файл style.css
• Работаем с селекторами CSS. Псевдоэлементы
• Псевдоклассы. Часть 2.
• Улучшаем внешний вид карты сайта
• Работаем с селекторами CSS.Часть 2