XHTML, говорите? Ответы на часто задаваемые вопросы по XHTML и HTML

Купить манекены

Наш партнер предлагает купить манекены для магазины.

pf-torg.ru

Чем отличаются id и class

Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов “id” и “class”. Ведь эффект, вроде бы, одинаковый.

Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.

Суть

id - уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id. Например блоку с шапкой сайта можно дать id="title".

class - вольный признак, который дается обычно нескольким элементам, чтобы отличать их от других. Например, картинкам, которые просто сопровождают текст, можно дать class="decor", а картинкам, которые важны для понимания текста — class="content".

Следствия

Из этой сути прямо или косвенно вытекают остальные отличия, которые видны и в HTML, и в CSS, и в скриптах.

Якорные ссылки

Если нужно поставить ссылку на какой-то элемент в странице, то ему достаточно дать id (

...

) и ссылаться на него якорем (http://site/path/#about). Это, кстати, предпочтительный способ взамен старого .

Множественные признаки

Элементу можно задавать несколько классов через пробелы: . Причем их можно использовать и по отдельности:

/

* все important элементы */<br />
.important {color:red;}</p>
<p>… и в сочетании:</p>
<p>/* элементы с important и centered одновременно */<br />
.important.centered {border:solid black 1px;}<br />

Обратите внимание, что между классами в CSS-правиле нет пробела.

Разный вес в CSS

У каждого правила в CSS есть “вес”, по которому определяется порядок их применений. У id этот вес больше. Поэтому если у элемента задан и id, и class:

<br />
<h2 id="about" class="important">...</h2>
<p>

… то из двух правил

#about {color:green;}<br />
.important {color:red;}

… выиграет первое, цвет заголовка будет зеленым. (Веса правил — это отдельная песня, о ней будет статья в свое время.)

Поиск в скрипте

Элемент с “id” можно легко найти в скрипте с помощью функции document.getElementById(). Для классов такой функции нет.

Добавить в:
Google slashdot YahooMyWeb Digg Technorati Delicious Забобрить эту страницу! Добавить на Newsland.ru Добавить на СМИ2 Добавить на Ваау! Добавить на RUmarkz Добавить на rucity.com Добавить в закладки МоёМесто.ru

Web Html Css Дизайнер (designer)

Постоянные ссылки

При копировании ссылка на Заметки дизайнера обязательна!

URI

Html (ЖЖ)

BB-код (Для форумов)

Написать коммент

Вы должны войти, чтобы оставить коммент.

Trackback на эту запись  |  Комменты по RSS


Рекламка в тему

Рубрики

Архив по месяцам

Друзья

Мета