Ранее мы рассматривали как применить стили ко всем тегам. В данной статье пойдет речь как подключать разные стили для одних и тех же тегов на странице без использования атрибута 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.