Селекторы класса и идентификатора
Селекторы класса и идентификатора
Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Как ты видишь из примеров, при помощи дополнительных атрибутов class и id мы можем пометить какие-то конкретные элементы и прописывать стилизацию конкретно для них.
Названия классов и идентификаторов мы в праве придумывать сами и они могут быть почти любыми, главное, чтобы по названию сразу было понятно, за что отвечает тот или иной класс или идентификатор, то есть давать ничего не значащие названия, например, «aaa» НЕЛЬЗЯ!
Есть еще несколько более жестких и формальных правил именования классов и идентификаторов, без соблюдения которых твой код просто не заработает.
Название класса/идентификатора:
1. Может содержать
- латинские буквы
- цифры
- дефисы
- нижнее подчеркивание
2. Должно начинаться с буквы
3. Чувствительно к регистру (FFF ≠ fff)
Идентификатор абсолютно уникален в рамках страницы, то есть не может быть двух элементов с одинаковым идентификатором!
Использование селекторов
1. По тегу – общие свойства для всех элементов этого тега;
2. По классу – если нужно несколько стилей для одного тега;
3. По идентификатору – не рекомендуется.
Наследование
HTML элементы наследуют от родительских элементов значения некоторых свойств. В большинстве случаев, если значение свойства не задано для элемента, оно наследуется от предка.
Классы
Один и тот же класс может быть задан неограниченному количеству элементов на странице. Например, можно создать такой класс:
Затем его можно применять к любому элементу (даже элементам с разными тегами) при помощи атрибута class, то есть вот так:
Способы подключения стилей
Вариант 1 — Глобальный CSS
Глобальный CSS помещается в контейнер конкретной страницы.
Стили помещаются между тегами.
<style>
.first{ width: 200px; }
</style>
Вариант 2 — Внешний CSS
Возможно самый удобный вариант для подключения CSS к вашему сайту, это его привязка к внешнему .css файлу.
<link rel="stylesheet" href="style.css">
Вариант 3 — Внутренний CSS
Внутренний CSS используется для конкретного тега HTML.
<div style = "width: 200px; height: 200px; background-color: yellow; margin: 10px;">Этот блок оформлен с помощью третьего способа</div>
Предпочитаемым способом подключения оформления к HTML-документу являются внешние стили.