Оба атрибута id и class позволяют задавать стили HTML-элементов в CSS, но их применение отличается. Например, id можно использовать вместо якоря на элемент в HTML-документе, а классы можно применять совместно.
Оба атрибута id и class позволяют задавать стили HTML-элементов в CSS, но их применение отличается.
id
id - это уникальный идентификатор элемента в HTML-документе, т.е. он должен использоваться только для одного элемента на странице. По id к элементу можно обращаться в скрипте
var box1=document.getElementById('box1');
а также переходить по якорной ссылке (внутри страницы) :
<a href="http://example.ru/test.html/#rule">Правило</a> ... <h3 id="rule">Правило</h3> ... вместо <h3><a name="rule"></a>Правило</h3> ...
Логично, что id имеет больший приоритет, чем class, и если для элемента задано и то и другое:
<span id="box" class="important">Текст</span> и #box {color:green;} .important {color:red;}
"Текст" будет показан зеленым (green) цветом.
class
class (класс) можно применять к любому количеству элементов на странице, которые должны иметь одинаковые стилевые атрибуты. Кроме того, к элементу можно применить сразу несколько классов (класы указываются через пробел):
<img class="class1 class2 class3">
а определять классы в CSS можно как для о тдельного, так и для совместного применения:
.class1 {align:center;}
/* задание атрибутов для совместного применения классов (между классами нет пробелов) */ .class1.class2 {border:solid black 1px;}
[ref text="Источник" url="http://softwaremaniacs.org/blog/2006/01/22/id-class-difference/"]