Разница между class и id на примере тега div
Сегодня уже трудно найти сайт, где не использовался бы такой нужный и важный тег <div>. Посмотрите код любого сайта, который найдете в интернете и увидите, что тег <div> чаще других тегов встречается в HTML документе. Причина такой популярности – это блочная верстка. Иными словами с помощью блочного тега <div> верстаются сайты.
Благодаря этому тегу весь HTML код документа имеет наглядную и логически понятную структуру. В которой легко разобраться не только верстальщику, но и другим специалистам, совместно работающим над одним проектом. Однако тег <div> без своих «сателлитов» - селекторов id и class ничего не стоит.
Классы и идентификаторы
Классы (class) и идентификаторы (id) выполняют одни и те же задачи. Они задают разные стили для тега <div>, как во внешнем CSS файле, так и внутри документа, через тег style. Тут надо пояснить, что они работают в связке не только с тегом <div>, но и со многими другими тегами.
Рассмотрим на примере ниже следующий код HTML-разметки:
<div id="content">
Учиться никогда не поздно!
</div>
<div class="content">
Повторение мать учения
</div>
Зададим внешний вид HTML документу с помощью CSS файла стилей:
/* знак # перед именем - обозначение id */
#content {
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}
/* (.) перед именем обозначает class */
.content {
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}
Имена id и class задает сам разработчик произвольно, исходя из смысловой нагрузки. Мы назвали их просто content. Нельзя давать имена русскими буквами, можно использовать цифры, символ дефиса (-) и подчеркивания (_).
Мы видим два абсолютно одинаковых блока. К верхнему блоку применяется селектор id, а к нижнему блоку применятся селектор class. Вы спросите, где же разница между div-ами id и class? Чисто внешне, пока никакой разницы, до тех пор, пока мы применяем по одному id и class на одну страницу.
В чем тогда различие между class и id?
Различие кроется в самом названии id, значит идентификатор, то есть уникальный. Главное отличие от классов в том, что селектор id может использоваться на странице только один раз. Селектор class, наоборот может применяться на одной странице бесконечное количество раз.
Например:
.content /* может применяться к любым тегам */
div.content /* применяется только к тегам div с классом .content */
div#content /* для id такая запись не имеет смысла, он уникален */
Так же стоит отметить, что у id свойств выше приоритет, чем у свойств классов.
<style>
#text {color: red;}
.text {color: blue;}
</style>
<div id="text" class="text">красный текст</div>
Этот пример наглядно демонстрирует, что несмотря на то, что class с синим текстом находится ниже, текст все равно красный. Если бы id не имел приоритета, то текст был бы синий.
Кроме того конкретному тегу можно задавать несколько классов, перечисляя их через пробел. Такая система позволяет не создавать лишних классов, а использовать их более эффективно. У id селектора разумеется такой возможности нет.
Есть еще одно важное отличие, оно касается программистов. Если планируется обратиться к элементу HTML документа через язык JavaScript, то обязательно надо применять id, реализовывать это через классы намного сложнее.
Когда лучше использовать id, а когда class?
Если на странице какой-нибудь из элементов, например, шапка сайта, меню, кнопка, используется только один раз, то надо применять id. Селектор class применяется к одному тегу или к разным тегам столько раз, сколько раз они прописаны на странице. Например, картинки, маркированные списки, абзацы.
В заключении хочу дать дружественный совет всем тем, кто хочет научиться самостоятельно создавать сайты. Очень долго и не эффективно черпать знания о сайтостороении из статей и уроков. Обратите внимание на мой видеокурс по данной тематике. Это один из лучших курсов для начинающих.
-
Создано 07.09.2017 11:53:32
-
Михаил Русаков
Комментарии (1):
Здравствуйте, Михаил! Строю сайт чисто на HTML и, чтобы потом можно было обратиться к JS (если выучу сей язык), ставлю „где ни попадя“ ID. Например: <header id="header" header class="container header"> <main id="main" main class="container main main-content"> <div id="block" class="block"> И так далее по „списку“ до конца каркаса сайта. Вот что вычитал у вас: «Если планируется обратиться к элементу HTML документа через язык JavaScript, то обязательно надо применять id, реализовывать это через классы намного сложнее. https://myrusakov.ru/div-id-class.html В других источниках: Именовать id для нужд js можно как угодно, главное чтобы было понятно. Но при условии, что id не будет использоваться в качестве селектора для стилей. Именовать id для нужд js. Получение доступа к элементу из JavaScript. В языке есть специальный метод, чтобы найти элемент по атрибуту id и получить к нему доступ — getElementById(). Дальше с найденным элементом можно производить нужные действия..... Для меня это пока темный лес... Просветите, пожалуйта хотя бы в двух словах, если найдется время: «Да» — «Нет». «Хуже не будет». С уважением, Валерий.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.