Все о HTML и CSS

Здесь вы найдете много полезной информации о том как построить собственный сайт, как правильно верстать Web страницы, а также освоите множество приемов и трюков которые можно выполнить при помощи CSS, без использования Java-скриптов. Данный сайт будет полезен как новичку, так и опытному Web Мастеру.

Приветствую Вас Гость | Регистрация | Вход
МЕНЮ
КАЛЕНДАРЬ
«  Март 2009  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
КАТЕГОРИИ УРОКОВ
HTML [8]
Тут уроки только по HTML
CSS [15]
Уроки только по CSS
Верстка дизайнов [0]
Верстка собственных дизайнов
Статьи [9]
Статьи о веб дизайне и не только
Скрипты [82]
Скрипты CSS
Отличия атрибутов ID и CLASS
Здравствуйте, уважаемые посетители Школы HTML и CSS! Наша очередная статья по CSS будет посвящена довольно важному для валидации и корректной работы вопросу CSS и HTML – отличиям между атрибутами class и id.

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

Содержание блока

В CSS, стили для id, записываются так:

Code
#test {font: 12px Arial;}

Class – определитель стиля объекта, или группы объектов на странице. Его часто применяют для повторяющихся конструкций, например, публикаций на нашем сайте. В HTML записывается, например, так:

Code
<div class=”test”>Содержание блока</div>

В CSS, стили для id, записываются так:

Code
.test {font: 12px Arial;}

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

1. Разная значимость атрибутов в CSS.
Id имеет больший вес, а значит стили под этим атрибутом – значительнее.
Например:

Code
<div id=”test” class=”test2”>Содержание блока</div>

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

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

2. Возможность проставления якорных ссылок.
Использования атрибута id позволяет поставить якорную ссылку на объект страницы.
Например:

Code
<div id=”test”>Содержание блока</div>

Ссылка на содержания блока будет иметь следующий вид:

Code
http://site.ru/cat/#test

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

3. Дополнительные функции id.
Для атрибута id существует функция .getElementById().

4. Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:

Code
<div class=”test test2”>Содержание блока</div>

При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:

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

Для id – будет так:

Code
#test,
#test2 { font-size: 14px; }

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

Категория: CSS | Просмотров: 1115 | Добавил: Red_Line666x | 04:55 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 2008-2017 Школа HTML и CSS. Все права защищены.
При копировании материалов с данного сайта, гиперссылка на http://school-html-css.3dn.ru/ ОБЯЗАТЕЛЬНА! Вся информация защищена законами о защите авторских правах.
Полную информацию о копировании материалов читайте в разделе "Правила копирования информации"