#14. Атрибуты id и class — подготовка к CSS

Мы уже давно пользуемся атрибутами: href задаёт адрес ссылки, src — путь к картинке, alt — её описание.

Атрибуты id и class особенные: они ничего не меняют на странице сами по себе, а дают элементам имена — по этим именам их потом находят CSS и JavaScript. Отсюда и название урока: это мост из HTML в CSS.

id — уникальное имя

С id вы уже встречались в уроке #7: якорь «прикреплялся» к заголовку именно через id:

<h2 id="part2">Раздел 2</h2>

Главное правило: id уникален — конкретное имя может носить только один элемент страницы, как номер паспорта у человека. Имя пишут латиницей без пробелов (цифры и дефисы можно), а начинаться оно должно с буквы.

class — имя для группы

class объединяет элементы в группу: одно имя можно дать скольким угодно элементам, а одному элементу — сразу несколько классов через пробел:

<p class="intro">Вводный абзац статьи.</p>
<p>Обычный абзац.</p>
<p class="intro note">Ещё один вводный абзац, сразу с двумя классами.</p>

Имена классов вы придумываете сами — это просто ярлыки: menu, post, price.

id или class?

Правило простое: уникальное — id, повторяющееся — class. На практике классы используют чаще.

Как это использует CSS

Сейчас id и class на вид страницы не влияют. Но в CSS к ним обращаются так: решётка — для id, точка — для класса:

<style>
    #header {
        background: yellow;
    }
    .intro {
        color: green;
    }
</style>

Блок <style> вставляется в head — и все абзацы с классом intro позеленеют. Подробно это — тема отдельной части курса; здесь важно одно: имена — это способ найти элемент и что-то с ним сделать.

Практика

Возьмите страницу из урока #12: дайте шапке id="site-header", статьям в main — класс post, а важным абзацам — класс intro. Откройте исходный код (Ctrl+U) и убедитесь поиском, что каждое имя id встречается на странице ровно один раз.