Наша очередная статья по CSS будет посвящена довольно важному для валидации и корректной работы вопросу CSS и HTML – различиям между атрибутами class и id.
Начнем с определений.
Id – уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id. В HTML записывается, например, так:
В CSS, стили для id, записываются так:
#test {font: 12px Arial;}
Class – определитель стиля объекта, или группы объектов на странице. Его часто применяют для повторяющихся конструкций, например, публикаций на нашем сайте. В HTML записывается, например, так:
В CSS, стили для id, записываются так:
.test {font: 12px Arial;}
Не всегда можно сразу понять отличия этих атрибутов, поэтому рассмотрим их подробно:
1. Разная значимость атрибутов в CSS.
Id имеет больший вес, а значит стили под этим атрибутом – значительнее.
Например:
#test { font-size: 12px; }
.test2 { font-size: 14px; }
Текст в блоке получится размером 12 пикселей, а не 14, как того требует class.
2. Возможность проставления якорных ссылок.
Использования атрибута id позволяет поставить якорную ссылку на объект страницы.
Например:
Ссылка на содержания блока будет иметь следующий вид:
http://site.ru/cat/#test
Якорные ссылки чаще всего используются в длинных документах для мгновенного перемещения.
3. Дополнительные функции id.
Для атрибута id существует функция .getElementById(). Об её использовании – подробно написано в уроке CSS №25.
4. Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:
При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:
.test.test2 { font-size: 14px; }
Для id – будет так:
#test,
#test2 { font-size: 14px; }
Вот и все основные отличия атрибута id от class.