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

26.10.2022 12:32

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

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

    Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег <body>, значит идем на страницу style.css и пишем следующий код:

 
body{
  background: blue;
}
    
    Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:
 
body{
  background: blue;
  color: white;
}
    
    Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):
 
body{
  background: blue;
  color: white;
}
h1{
  color:red;
}
h2{
  color:yellow;
}
    

    Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.

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

 

Селекторы CSS

 

Селекторы по идентификатору

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

    В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. 

    Например:

 
<p id="pink">Текст параграфа с идентификатором (id).</p>
    

    Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:

 
<html>
  <head>
    <title>CSS id</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Это заголовок первого уровня</h1>
    Здесь просто текст
    <h2>Это заголовок второго уровня</h2>
    Здесь просто текст
    <p>Простой абзац</p>
    <p id="pink">Абзац с идентификатором (id)</p>
  </body>
</html>
    

    Если посмотреть сейчас на нашу страницу в браузере, то наши абзацы оба белого цвета. Добавим в таблицу стилей (style.css) стили для наших абзацев:

 
body{
  background: blue;
  color: white;
}
h1{
  color:red;
}
h2{
  color:yellow;
}
p{
  color:black;
}
p#pink{
  color:pink;
}
    

    Мы сначала указали сделать текст всех параграфов черным, а текст параграфа с id "pink" сделать розовым. Наш селектор состоит в данном случае из элемента (p), разделителя (#) и имени идентификатора (pink).

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

 

Селекторы по классу

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

    Давайте добавим в нашу html-страницу еще пару параграфов и присвоим им class="pink":

 

<html>

  <head>

    <title>CSS class</title>

    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>

    <h1>Это заголовок первого уровня</h1>

    Здесь просто текст

    <h2>Это заголовок второго уровня</h2>

    Здесь просто текст

    <p>Простой абзац</p>

    <p id="pink">Абзац с идентификатором</p>

    <p class="pink">Абзац с классом (class) pink</p>

    <p class="pink">Абзац с классом (class) pink</p>

  </body>

</html>

    

    Для того, чтобы указать стиль для этого класса, в таблице стилей напишем правило, где в качестве селектора снова будет использоваться элемент p и имя pink, но в данном случае это имя класса, поэтому в качестве разделителя будет использоваться точка (.):

 

body{

  background: blue;

  color: white;

}

h1{

  color:red;

}

h2{

  color:yellow;

}

p{

  color:black;

}

p#pink{

  color:pink;

}

p.pink{

  color:pink;

}

    

    Абзацев с таким классом может быть сколько угодно.

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

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

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

    Например:

 

.red{

  color:red;

}

#yellow{

  color:yellow;

}

    

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

 

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

    Пусть у нас есть html-страница вот с таким кодом:

 

<html>

  <head>

    <title>Селекторы по элементу</title>

    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>

    <p>Этот текст находится в параграфе</p>

    Это просто текст.

    <i>Этот текст выделен курсивом</i>

    <p>Этот текст находится в параграфе, но <i>эта часть выделена курсивом</i></p>

  </body>

</html>

    

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

 
i{
  color:green;
}
    

    Сейчас наша страница в браузере выглядит так:

    Но что, если мы захотим, чтобы не весь курсивный текст выделялся зеленым, а лишь тот, который находится в параграфах. Для этого мы внесем изменения в таблицу стилей:

 
p i{
  color:green;
}
    

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

 
 

Группировка селекторов

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

    Пример:

 
h1, h2, h3{
  color:green;
}
    
    Предположим, что кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать в нашу таблицу стилей:
 
h1, h2, h3{
  color:green;
}
h1{
  font-size:18px;
}
h2{
  font-size:16px;
}
h3{
  font-size:14px;
}
 
    

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

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

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

    В общем, группировать или нет, дело вашего вкуса. Но вы должны помнить о разных подходах, когда будете читать чужой код, например, в шаблонах.

Назад