Селекторы - это имена стилей css, которые выбираются при обращении к ним.
Селектор типа
Селектор типа - это селектор, который задаёт стиль для всех элементов с данным именем. В стилях в качестве селектора в данном случае выступает имя тега.
Например, если требуется сделать отступ у первой строки для всех абзацев или изменить цвет всех заголовков первого уровня.
Пример css:
/*Задаём отступ первой строки для всех абзацев*/
p {text-indent: 25px;}
/*Изменяем цвет всех заголовков первого уровня на зелёный*/
h1 {color: green;}
Селектор id
CSS селектор id (идентификатор) предназначен для применения стиля к уникальным элементам на веб-странице (т.е. используется на странице всего один раз).
Каждый идентификатор может встречаться на странице только один раз, т.е. определенный id должен быть использован на странице только с тем тегом, для которого он предназначен. Если один и тот же идентификатор будет применен более, чем к одному элементу, во-первых HTML код не пройдет валидацию, во-вторых это может вызвать некорректную обработку кода браузером и вы можете увидеть не тот результат, которого ожидали.
Для использования селектора id, нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В CSS коде селектор id начинается с символа # сразу после которого идет имя идентификатора
Пример css:
#para1 {
text-align: center;
color: red;
}
Пример html:
<div id="para1">
Содержание
</div>
Идентификаторы можно применять к конкретному тегу следующим образом:
ИмяТега#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
Пример css:
P {
color: green; /* Зеленый цвет текста */
font-style: italic; /* Курсивное начертание текста */
}
P#opa {
color: red; /* Красный цвет текста */
border: 1px solid #666; /* Параметры рамки */
background: #eee; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
}
Пример HTML:
<p>Обычный параграф</p>
<p id="opa">Параграф c особым стилем</p>
Селектор class
CSS селектор class позволяет также как и селектор id стилизовать конкретный элемент страницы, но в отличие от id, селектор class позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному.
Для использования селектора class, нужно указать, к какому элементу на странице вы хотите его применить, для этого надо всего лишь добавить атрибут class к HTML тегу, который нужно стилизовать, и указать в качестве значения нужное имя класса.
Правила для имен классов:
- в CSS коде все обозначения селекторов класс должны начинаться с точки, с ее помощью браузеры опознают селектор класс в таблице стилей CSS
- в имени класса разрешается использовать только буквы, числа, дефис и знак подчеркивания
- имя класса после точки всегда должно начинаться с буквы
- имена классов чувствительны к регистру, например .Menu и .menu будут рассматриваться в CSS, как два разных класса
Пример css:
.menter {
color: #33CCFF;
font-family: sans-serif;
}
Пример html:
<h1 class="menter">Абзац будет выровнен по центру.</h1>
Если атрибут class, с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:
Пример html:
<style>
p.centner { text-align: center; }
</style>
<p class="centner">Абзац будет выровнен по центру</p>
<div class="centner">Для этого тега стиль не применится</div>
Ресурсы для более глубокого изучения:
https://puzzleweb.ru/css/2_css_id_class.php
http://htmlbook.ru/samcss/identifikatory
