|
|
||||||
|
|
CSS: чем отличаются class от idНа первый взгляд нет никакой разницы что использовать: id или class. Ведь присвоив одинаковые параметры CSS стилей для id и class - результат будет идентичен. На самом деле, отличий между id и class в CSS практичесски нет, за исключением приоритета их обработки. Но в некоторых других случаях, которые весьма часто используются в web-разработке, разница весьма ощутима. Эта статья как раз и выделяет все отличия class и id. IdId - это уникальный идентификатор элемента. На одной странице один идентификатор применяется только единожды, хотя можно применять и несколько одинаковых идентификаторов в пределах одной страницы, но это может вызвать проблемы при использовании HTML-якорей и JS. Если попытаться присвоить одному элементу (HTML-тегу) два различных ID, то сработает только правила из первого (самого левого) ID Пример 1: как не желательно использовать идентификаторы (ID)
<p id="my_id_r7t">Блок выделенного текста</p> <!-- HTML --> <p id="my_id_r7t">Блок выделенного текста</p> Пример 2: как нельзя использовать идентификаторы (ID)
<p id="my_id_r7t" id="my_id_r9t">Присвоение двух или более id 1-му элементу не допускается</p> В случае одновременного применения к одному элементу id и class, приоритет у ID будет выше, чем у class: Определение стилей CSS
#my_id_r7t {color: green; font-weight: bold;} .my_class_r7t {color: blue; font-style: italic;} HTML с использованием стилей CSS
<p class="my_class_r7t" id="my_id_r7t">Этому абзацу присвоены класс my_class и идентификатор my_id.</p> Этому абзацу присвоены класс my_class и идентификатор my_id. Как видно, цвет приобрел значения, записанные в идентификаторе. Но если присмотрется внимательнее, то id и class могут с успехом дополнять друг-друга: жирный шрифт, заданный в идентификаторе сочетается с курсивным начертанием, записанным в class. Если же дописать дескриптору <p> еще и стиль: <p class="my_class_r7t" style="color: grey" id="my_id_r7t">, то результат будет таким: Самым высоким приоритетом обладает стиль, присвоенный дискриптору с помощью style="...". Хороший пример приоритетов, приведен в . В кратце, приоритеты в порядке убывания таковы: style, id, class, стиль тега. Элемент id может быть применён в качестве HTML-якоря, вместо более древней конструкции <a name="imya_jakorya"></a>, для того, чтобы можно было сослаться на определенную часть страницы, без ее перезагрузки с попомщью <a href="#imya_jakorya">Наверх</a>. Если на странице окажется несколько идентичных id, возникнет неоднозначная ситуация. При программировании страниц с помощью JS, зачастую используется функция getElementById(), которая также "рассчитывает" на то, что идентификатор должен быть уникальным. В противном случае могут возникнуть ошибки в коде. ClassПри использовании class, одному HTML-дескриптору можно назначить стили из нескольких классов одновременно: .my_class_r7t {color: blue; font-style: italic;} .my_class_ffR5 {color: black; background-color: #fafafa; padding: 3px; border: 1px solid #757575; margin-left: 30px;} Имена различных классов записываются через пробел: <p class="my_class_ffR5 my_class_r7t">Пример применения 2-ух различных классов для 1-го HTML-тега.</p> Как это выглядит, смотрите ниже: Результат применения двух различных классов для 1-го дескриптора HTML. Классы my_class_r7t и my_class_ffR5 устанавливают различные цвета содержимому HTML-тега. Использован будет тот цвет, который определен в файле стилей позже (в данном случае class my_class_ffR5 записан после my_class_r7t). Порядок применения классов в самом HTML-дескрипторе значения не имеет. Чтобы назначить составным классам уникальное стилевое оформление, они записываются вместе, без проблеов: .my_class_bbbb755 {font-weight: bold;} .my_class_ffR5.my_class_bbbb755 {text-align: right;} Выравнивание по правому краю, будет применено только в случае, когда одному HTML-дескриптору присвоено сразу 2 класса: <p class="my_class_ffR5 my_class_bbbb755">Пример применения стилей для составных классов</p> Как это выглядит, смотрите ниже: Пример применения стилей для составных классов Один и тот же class, в отличае от id, можно без проблем присваивать не ограниченному кол-ву различных элементов: <div class="my_class_ffR5">...</div> <p class="my_class_ffR5">...</p> <h5 class="my_class_ffR5">...</h5> <div class="my_class_ffR5">...</div> <p class="my_class_ffR5">...</p> Class или id - что использовать?На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы нечаяно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.
Опубликовано: 2011/06/07
HTML-код ссылки на эту страницу:
<a href="https://petrenco.com/html_css.php?txt=50" target="_blank">CSS id или class</a> 82388
Комментарии
Полезная статья
Статья познавательная, только заметил ошибку:
"приоритеты в порядке убывания таковы: style, id, css, стиль тега." скорее всего Вы имели в виду: "style, id, class, стиль тега." Спасибо, исправил.
Спасибо, учитель!
Спасибо.
Познавательная статья. То , что надо. Большое спасибо!
Познавательная статья. То , что надо. Большое спасибо!
Сэнсэй, аригато!
Добавить комментарий
|
|||||