Главная /
Блог /
Подключаем id и class (класс) в css, их различия

Подключаем id и class (класс) в css, их различия

Автор статьи

Александр Одинцов

Технический специалист Hardkod

Обновлено: 22 ноября 2024

Время на чтение: 5 минут

Количество просмотров: 423

Ранее мы рассматривали как применить стили ко всем тегам. В данной статье пойдет речь как подключать разные стили для одних и тех же тегов на странице без использования атрибута style. Данный способ удобнее, чем использование атрибута style т. к. позволяет вносить изменения сразу на нескольких страницах при смене всего 1 строчки.

Чтобы компьютер понял какой стиль использовать нужно задать название атрибута у тега на странице и это же имя прописать в файле стилей с указанием свойств.

Подключить индивидуальные стили можно с помощью атрибутов «class»(класс) и «id», прописав их свойства в файле .css.

Содержание статьи:

1 способ. Подключение стилей с помощью атрибута «class»

«class»(класс) — может быть применен к неограниченному количеству тегов. Вы задаете индивидуальный набор свойств и название этого класса в файле стилей. Затем на странице у тегов, для которых вы хотите применить этот набор свойств просто пишите в атрибуте class имя класса(class=»имя класса») и стили, заданные в файле применяются для данного элемента.

Это наиболее распространенный способ, потому что в большинстве случаев его удобнее использовать, чем описанный ниже с помощью «id». Обычно атрибут «class» используется для оформления стилей таких элементов, которые могут повторяться на одной странице: заголовки, ссылки, текст, таблицы, картинки и т. п. Но даже если тег используется всего 1 раз, к нему тоже можно применить стили с помощью атрибута «class».

Плюсы метода:

Вы можете подключить один или несколько стилей с помощью атрибута класс(class) у неограниченного количества элементов.
Для изменения нескольких тегов с одним классом на разных страницах достаточно изменить всего 1 строчку.

Минусы:

Если на странице несколько тегов с одним и тем же классом, то при их изменении с помощью скрипта javascript легко запутаться, т. к. при обращении к тегу по имени класса нужно точно указать номер очередности каждого.

Как установить стиль с помощью атрибута class

В файле .css пишется название стиля и в фигурных скобках {} пишутся свойства. Перед названием стиля нужно поставить точку, чтобы браузер понял, что он относится к class, а не к тегу.

Пример подключения атрибута class (код страницы .html)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="my_style.css">
</head>
<body>
<p class="my_style_p">Текстовое содержание</p>
</body>
</html>

Пример кода самого файла стилей (код страницы my_style.css)

.my_style_p {color:red;}

В коде выше, мы задали классу «my_style_p» красный цвет с помощью свойства color.

Результат в браузере

2 способ. Подключение стилей с помощью атрибута «id» и отличие от класса (class)

Идентификатор(id) в отличие от класса(class) используются только для 1-ого тега на странице. Если вы зададите несколько одинаковых атрибутов на одной странице у разных тегов, то будет работать только самый первый. Это главный недостаток и отличие id(идентификатора) от атрибута класс(«class»).

Атрибут id используется для задания стилей, которые встречаются на странице только один раз, например: основной слой верхней(нижней) шапки, главный заголовок и т. п. На одной странице можно использовать неограниченное количество id, но при условии, что все их имена будут уникальные. Один и тот же id можно использовать только на разных страницах.

Плюсы:

Легче организовать поиск элемента при использовании скриптов на языке javscript, т. к. элементов с одним классом может быть несколько, а с id только один.

Минусы:

Возможно задать стиль только у одного элемента на странице.

Подключение стиля с помощью атрибута id

Подключение такое же, как и у атрибута «class», только вместо «class» пишется «id», а вместо точки перед именем стиля в css пишется #. А теперь подробно: Чтобы подключить стиль с помощью атрибута id(идентификатора), в файле .css пишется его название и внутри фигурных скобок{} указываются его свойства. Перед названием нужно поставить #, чтобы браузер понял, что стиль относится к id, а не к тегу.

Пример подключения атрибута id (код страницы .html)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="my_style.css">
</head>
<body>
<p id="my_style_p">Текстовое содержание</p>
</body>
</html>

Пример кода самого файла стилей (код страницы my_style.css)

#my_style_p {color:red;}

В коде выше, мы задали идентификатору (id) «my_style_p» красный цвет с помощью свойства color.

Результат в браузере

Отличие использования id, class от атрибута style

Как вы понимаете использование id или class удобнее, чем атрибута style, т. к. позволяет внести изменения только в одну строчку, чтобы сменить стили у всех объектов с данным id или class на всех страницах. При использовании атрибута style изменения нужно будет вносить для каждого тега на каждой странице и часто это очень накладно.

Что лучше id или class

Возможности атрибута class неограниченны, поэтому вы можете использовать его для любых случаев. А возможности атрибута id ограничены, т. к. одно имя id можно присвоить на странице только 1 раз. Если не знаете, что применить — используйте class, при желании его будет нетрудно сменить на id.

Нужна доработка сайта?