Селекторы CSS
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали как подключить CSS к html-странице. В данной статье я бы хотел рассказать о селекторах в CSS: что это такое и с чем их едят. Селектор — это тег или группа тегов, отображение которых мы хотим поменять. Синтаксис селекторов следующий:
Селектор {
свойство1: значение,
свойство2: значение
}
Свойства — это правила, которые отвечают за то, как наш тег будем отображаться и размещаться на странице.
Существуют 3 основных типа селекторов, которые используются при создании стилей:
1) Селектор тегов. Допустим у нас стоит задача выравнить все заголовки второго уровня (h2) по правому краю и сделать их зелеными. Вот как это будет выглядеть в CSS:
h2 {
text-align:right;
color:green;
}
Допустим мы хотим чтобы все заголовки были зелеными, а один был красным. Для этого нужно воспользоваться другим селектором:
2) Селектор ID. Каждому элементу на странице можно присвоить уникальный идентификатор (атрибут id), чтобы иметь возможность обращаться именно к этому элементу. Приведу пример файла index.html:
<html> <meta charset="utf-8"/> <head><title>Селекторы CSS</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> <h2>Заголовок второго уровня 1</h2> <h2>Заголовок второго уровня 2</h2> <h2 id="red">Заголовок второго уровня 3 с id</h2> <h2>Заголовок второго уровня 4</h2> </body> </html>
Файл стилей style.css дополниться следующим кодом:
#red {
color:red;
}
Для того, чтобы обратиться в файле стилей по уникальному идентификатору (id) необходимо поставить "#" и сам id. В данном случае, браузер нашёл элемент с идентификатором "red" и задал ему нужные правила отображения. Обращаю внимание на то, что уникальный идентификатор обязательно должен быть один на странице, на то он и уникальный.
Давайте представим такую ситуацию: нам нужно 2 и 4 заголовку задать желтый цвет. Можно конечно задать каждому id, и затем обратиться по id. Но в данном случае лучше воспользоваться другим видом селекторов:
3) Селектор класса. Каждому элементу на странице можно задать класс, к которому он будет относиться. Делается это следующим образом с помощью атрибута class:
<html> <meta charset="utf-8"/> <head><title>Селекторы CSS</title></head> <body> <h2>Заголовок второго уровня 1</h2> <h2 class="yellow">Заголовок второго уровня 2</h2> <h2 id="red">Заголовок второго уровня 3 с id</h2> <h2 class="yellow">Заголовок второго уровня 4</h2> </body> </html>
Наш файл style.css дополнится следующим правилом:
.yellow {
color:yellow;
}
Как вы видите, для того, чтобы обратиться к классу необходимо поставить "." перед именем класса. Если мы откроем страницу, то увидим, что всё получилось (2 и 4 заголовки стали желтого цвета). В отличии от уникального идентификатора, один класс может быть у многих элементов. Имя класса не должно начинаться с цифры. Попробуйте поставить первым символом цифру и убедитесь, что стили не применятся.
В большинстве случаев в файлах стилей, которые вы можете встретить на сайтах, используются эти 3 вида селекторов, так что они очень важны.
Хочу пару слов сказать про групповые селекторы. Допустим вы хотите для всех тегов p и h1 задать зеленый цвет. Можно написать так:
p {
color:green;
}
h1 {
color:green;
}
Так как у этих селекторов одинаковые правила отображения, их можно объединить (через запятую):
p, h1 {
color:green;
}
Строк стало меньше и стало гораздо нагляднее.
Домашнее задание: создайте html-страницу и разместите на ней 2 списка: один нумерованный,а один — ненумерованный с 4 произвольными элементами. Сделайте, чтобы элементы нумерованного списка были красными, а элементы ненумерованного списка — зелеными. Сделайте, чтобы 2 элемент нумерованного списка и 3 элемент ненумерованного списка были желтыми. Также сделайте, чтобы 3 элемент нумерованного списка был подчеркнутым (свойство text-decoration:underline;)
В данной статье вы узнали, что такое селекторы в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
