Использование классов. Все селекторы, которые мы ранее рассматривали, были привязаны к конкретным элементам

 

Все селекторы, которые мы ранее рассматривали, были привязаны к конкретным элементам. Селекторы классов и селекторы идентификаторов (ID) дают возможность указывать элементы, имя которым присвоили вы сами, независимо от элементов документа.

Имена элементам присваиваются с помощью атрибутов class и id. Эти атрибуты могут использоваться во всех XHTML-элементах, за исключением base, head, html, meta, script, style и title. Кроме того, атрибут class не может применяться в элементах base font и param. Селекторы классов и ID работают немного по-разному.

Используйте атрибут class для того, чтобы объединить несколько элементов в логическую группу. Элементы такого класса затем можно будет изменять при помощи одного стилевого правила.

Пример: каждый второй абзац (параграф) отобразить с отступом вправо: применим класс к этим абзацам.

Для создания классов используется следующая конструкция:

.имя класса {свойство: значение; }

У того элемента (тега), к которому хотим применить данный класс, добавляется атрибут: < тег class = имя класса>

Если хотим применить класс к конкретному тегу, необходимо описать его следующим образом:

тег. имя класса {...}

например, hi.special (color: red; }

p.special (color: red; }

Чтобы применить свойство ко всем элементам одного класса, опустите имя тега в селекторе (обязательно оставьте точку, она обозначает класс):

.special (color: red; }

Пример:

< style>

.kl {margin – left: 120px; } < /style>

Затем в теле документа в нужном месте:

< p>...< /p>

< p class = kl>... < /p>

< p>...< /p>

< p class = kl>...< /p>

Атрибут id используется примерно так же, как class, но он применяется для выбора одного элемента, а не группы. Атрибут id должен однозначно указывать элемент (иными словами, два элемента не могут иметь одинаковое значение id в одном документе). Уникальность должна сохраняться только в пределах одного документа.

В следующем примере абзацу присваивается специфический идентификатор (обратите внимание, что значение атрибута id должно начинаться с буквы):

< р id=" j042801" > New item added today< /p>

Селекторы ID в таблице стилей обозначаются символом решетки (#):

p#j061998 (color: red; } Название элемента можно опустить:

#j061998 (color: red; }

В современном Web-дизайне атрибуты id часто применяются для идентификации основных разделов страницы (обычно элементов div). Вот некоторые типичные значения id, применяемые для этой цели: content, header, sidebar, navigation и footer.