Селектор class
Сегодня изучим еще один CSS селектор, селектор class.
Он также является очень часто используемым при создании сайта, и в отличие от селектора ID его можно применять на странице не к одному элементу, а к множеству элементов. Например, если мы возьмем на странице несколько различных элементов и захотим, чтобы у некоторых из них были одинаковые свойства, то нам необходимо применить селектор class.
Приведу Вам пример данного кода:
<html>
<head>
<title>Селектор class</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p class="color">Обычный абзац текста номер 1</p>
<p>Обычный абзац текста номер 2</p>
<p class="color">Обычный абзац текста номер 3</p>
<p>Обычный абзац текста номер 4</p>
<p class="color">Обычный абзац текста номер 5</p>
</body>
</html>
В файле стилей мы напишем такой код:
.color {
color: blue;
text-align: center;
}
Думаю, вы уже поняли, какой будет результат выполнение данного кода, но все же продемонстрирую Вам:
На изображении видно, что наш текст выравнен по правому краю, но на самом деле он выравнен по центру окна браузера. Потому что изображение обрезано как раз до половины окна браузера.
Синтаксис селектора class, как Вы успели заметить, простой. Обозначается он при помощи знака точки, за которой следует название нашего класса, и как обычно наши свойства и их значения.
Теперь Вы узнали, где можно использовать селектор class. Ведь если бы мы написали код при помощи селектора тегов:
p {
color: blue;
text-align: center;
}
Тогда данный код применился ко всем тегам <p> на данной странице, что нам совершенно не нужно.
Удачи Вам в изучении CSS, до скорого!
