Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 8. Различия атрибутов ID и CLASS
Не нравится(-) 120 Нравится(+)
28-03-2009, 16:57 - GZ Design (Статьи по CSS)
Статья по CSS 8. Различия атрибутов ID и CLASS

Здравствуйте уважаемые посетители Российской школы CSS! Наша очередная статья по CSS будет посвящена довольно важному для валидации и корректной работы вопросу CSS и HTML – различиям между атрибутами class и id.

Начнем с определений.
Id – уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id. В HTML записывается, например, так:
<div id=”test”>Содержание блока</div>

В CSS, стили для id, записываются так:
#test {font: 12px Arial;}


Class – определитель стиля объекта, или группы объектов на странице. Его часто применяют для повторяющихся конструкций, например, публикаций на нашем сайте. В HTML записывается, например, так:
<div class=”test”>Содержание блока</div>

В CSS, стили для id, записываются так:
.test {font: 12px Arial;}


Не всегда можно сразу понять отличия этих атрибутов, поэтому рассмотрим их подробно:

1. Разная значимость атрибутов в CSS.
Id имеет больший вес, а значит стили под этим атрибутом – значительнее.
Например:
<div id=”test” class=”test2”>Содержание блока</div>

#test { font-size: 12px; }
.test2 { font-size: 14px; }

Текст в блоке получится размером 12 пикселей, а не 14, как того требует class.

2. Возможность проставления якорных ссылок.
Использования атрибута id позволяет поставить якорную ссылку на объект страницы.
Например:
<div id=”test”>Содержание блока</div>

Ссылка на содержания блока будет иметь следующий вид:
http://site.ru/cat/#test

Якорные ссылки чаще всего используются в длинных документах для мгновенного перемещения.

3. Дополнительные функции id.
Для атрибута id существует функция .getElementById(). Об её использовании – подробно написано в уроке CSS №25.

4. Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:
<div class=”test test2”>Содержание блока</div>

При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:
.test.test2 { font-size: 14px; }

Для id – будет так:
#test,
#test2  { font-size: 14px; }


Вот и все основные отличия атрибута id от class. Спасибо за внимание!


Автор: Григорий Загребельный, Российская школа CSS
-----------------------------------
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 29232 раз(а) и написали 9 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Август 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!