Продолжение. Предыдущие материалы:
17.01.06
Автор статьи, Иван Сагалаев предупреждает, что данный материал предоставляет собой текущие заметки по теме, а не законченную работу.
Ваши комментарии и дополнения к статье приветствуются в авторском блоге Маниакальный Веблог
Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов “id” и “class”. Ведь эффект, вроде бы, одинаковый.
Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.
Суть
- id
- уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id. Например блоку с шапкой сайта можно дать
id="title".
- class
- вольный признак, который дается обычно нескольким элементам, чтобы отличать их от других. Например, картинкам, которые просто сопровождают текст, можно дать
class="decor", а картинкам, которые важны для понимания текста — class="content".
Следствия
Из этой сути прямо или косвенно вытекают остальные отличия, которые видны и в HTML, и в CSS, и в скриптах.
- Якорные ссылки
- Если нужно поставить ссылку на какой-то элемент в странице, то ему достаточно дать id (
<h2 id="about">...</h2>) и ссылаться на него якорем (http://site/path/#about). Это, кстати, предпочтительный способ взамен старого <a name="...">.
- Множественные признаки
-
Элементу можно задавать несколько классов через пробелы: <img class="important centered printable">. Причем их можно использовать и по отдельности:
/* все important элементы */
.important
… и в сочетании:
/* элементы с important и centered одновременно */
.important.centered {border:solid black 1px;}
Обратите внимание, что между классами в CSS-правиле нет пробела.
- Разный вес в CSS
-
У каждого правила в CSS есть “вес”, по которому определяется порядок их применений. У id этот вес больше. Поэтому если у элемента задан и id, и class:
<h2 id="about" class="important">...</h2>
… то из двух правил
#about
.important
… выиграет первое, цвет заголовка будет зеленым. (Веса правил — это отдельная песня, о ней будет статья в свое время.)
- Поиск в скрипте
- Элемент с “id” можно легко найти в скрипте с помощью функции
document.getElementById(). Для классов такой функции нет.
Предыдущие материалы:
Эта статья - часть находящегося в процессе написания цикла под рабочим названием “Учебник”. Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории “Учебник“, где они сейчас собраны в обратном хронологическом порядке.
Статьи по теме:
