Язык CSS
Правила и селекторы


CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов.
В нем есть правила.
Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:

Правило состоит...

Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

Блок объявления стилей состоит...

Попробуем на практике.
Откройте html-страницу и css-страницу, созданные в прошлом уроке.
Зададим нашей странице голубой фон. За это отвечает тег <body>, то есть на странице style.css пишем следующий код:
body{
 background:blue}
Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим.
Теперь, давайте сделаем текст на странице белым цветом:
body{
 background:blue;
 color:white}
Проверьте результат в браузере.
Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2) и также проверим.


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


Селекторы CSS

Селекторы по идентификатору
В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.
В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя.


Попробуем на практике.
Откройте html-страницу, создадим параграф с текстом розового цвета:
<p id="pink">Розовый текст для параграфа с идентификатором pink.</p>
Также введем текст с тэгами для обычного параграфа:
<p>Просто текст для обычного параграфа.</p>
Добавим в документ CSS стили для наших абзацев и просмотрим HTML документ в браузере:
p{
 color:black}
p#pink{
 color:pink}


Важно запомнить, что на странице может быть только один идентификатор (id) c именем "pink". Т.е. для нашего примера нельзя создать два параграфа с id "pink", параграф с таким id может быть только один.
Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей.


Селекторы по классу
Если мы хотим, чтобы розовый цвет текста был у двух или трех параграфов, в HTML существует параметр class, в качестве значения которого указывается его имя.


Попробуем на практике.
Добавим в нашу html-страницу еще пару параграфов и присвоим им class="pink1":
<p class="pink1">Текст для параграфа 1 с клаcсом pink1.</p>
<h2>Заголовок желтого цвета</h2>
<h1>Заголовок красного цвета2</h1>
<p class="pink1">Текст для параграфа 2 с клаcсом pink1.</p>
Для того, чтобы указать стиль для этого класса, в таблице стилей напишем правило, где в качестве селектора снова будет использоваться элемент p и имя pink1, в данном случае это имя класса, поэтому в качестве разделителя будет использоваться точка (.):
p.pink1{
 color:#eccefa}
Проверьте результат в браузере.


Давайте подведем промежуточный итог:

  1. если все подобные элементы (например, все заголовки h1) должны иметь один стиль, то селектор состоит только из этого элемента (например, p{color:black;});

  2. если один элемент (любой: абзац, заголовок,...) должен отличаться от всех остальных, то ему присваивается идентификатор (id) и разделителем в таблице стилей является знак решетки (#) (например, p#pink{color:pink;});

  3. если же на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.) (например, p.pink1{color:pink;});

  4. идентификатор имеет более высокий приоритет, чем класс, поэтому, если для какого-либо элемента будет указан и класс, и идентификатор (что не противоречит принципам CSS), то применен будет стиль идентификатора.

Унифицированный селектор
Идентификаторы и классы можно задавать любым элементам html. Но часто бывает так, что мы хотим несколько разных элементов выделить одним стилем, например, зеленым цветом. В таком случае можно воспользоваться унифицированным селектором.
В таких селекторах имя элемента не указывается, указываются точка или решетка, как признак идентификатора или класса и имя.


Например:
#red{
 color:red}
.pink1{
 color:#eccefa}


Таким образом, какому бы элементу мы не задали class="pink1" (заголовку, параграфу или ссылке), цвет текста у него станет заданным розовым.
Одному элементу на странице (любому) мы можем задать id="red" и цвет текста этого элемента станет красным.


Практическое задание:
Задать унифицированным селектором красный параграф и один заголовок h1(соответственно изменить и текст параграфа и заголовка). То есть на странице должны быть следующие элементы:

  • Обычный текст для теста CSS (белый)

  • Текст для обычного параграфа (черный)

  • Текст для красного параграфа - унифицированный класс (красный)

  • Текст для параграфа с унифицированным идентификатором (розовый)

  • Заголовок красного цвета h1 - унифицированный класс (красный)

  • Текст для параграфа 1 с классом (заданный розовый)

  • Заголовок желтого цвета h2

  • Заголовок h1 обычный

  • Текст для параграфа 2 с классом (заданный розовый)


Контекстный селектор

Попробуем на практике.
Создадим html-документ со следующими элементами (поменяем цвета фона и текста документа):

 1. текст в параграфе 1;
 2. обычный текст;
 3. обычный текст, выделенный курсивом;
 4. текст в параграфе 2, но...
 5. часть текста выделена курсивом.

Для того, чтобы курсив был выделен еще и зеленым цветом, в таблицу стилей запишем селектор по элементу (i). А чтобы не весь курсивный текст выделялся зеленым, а лишь тот, который находится в параграфах, мы внесем изменения в таблицу стилей:
p i{
 color:green}
Проверьте результат в браузере.


Так мы указали, применять данный стиль к элементам i, которые находятся в элементах p.
Названия элементов при этом отделяются пробелом.
Такие селекторы называют контекстными.


Группировка селекторов
Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были одного цвета), то их можно сгруппировать.


Для этого селекторы, к которым будет применяться один стиль, нужно перечислить через запятую:
h1,h2,h3{
 color:brown}


Если кроме цвета, мы хотим задать нашим заголовкам и другие параметры, например, размер, надо просто их дописать в таблицу стилей:
h1,h2,h3{
 color:brown}
h1{
 font-size:24px}
h2{
 font-size:20px}
h3{
 font-size:16px}


У наших заголовков будет указанный размер, но все они будут коричневого цвета.


Вообще-то, насчет группировок имеются разногласия. Одни считают правильным вышеприведенный код, т.к. группировка помогла избежать повтора одинакового свойства для трех элементов, это сокращает код.
Другие считают, что таким образом, ухудшается логичность кода. Так как, найдя селектор для заголовка h3, не сразу понятно, почему текст в нем зеленого цвета.
Сторонники логики рекомендуют группировать только элементы, у которых блоки описаний полностью совпадают.
В общем, группировать или нет, дело вашего вкуса. Но вы должны помнить о разных подходах, когда будете читать чужой код, например, в шаблонах.


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


Источники:


← Язык CSS. Введение. Подключение CSS к HTML. Язык CSS. Псевдоэлементы и псевдоклассы. →


comments powered by Disqus