Ранее мы рассматривали как применить стили ко всем тегам. В данной статье пойдет речь как подключать разные стили для одних и тех же тегов на странице без использования атрибута style. Данный способ удобнее, чем использование атрибута style т. к. позволяет вносить изменения сразу на нескольких страницах при смене всего 1 строчки.
Чтобы компьютер понял какой стиль использовать нужно задать название атрибута у тега на странице и это же имя прописать в файле стилей с указанием свойств.
Подключить индивидуальные стили можно с помощью атрибутов «class»(класс) и «id», прописав их свойства в файле .css.
«class»(класс) — может быть применен к неограниченному количеству тегов. Вы задаете индивидуальный набор свойств и название этого класса в файле стилей. Затем на странице у тегов, для которых вы хотите применить этот набор свойств просто пишите в атрибуте class имя класса(class="имя класса") и стили, заданные в файле применяются для данного элемента.
Это наиболее распространенный способ, потому что в большинстве случаев его удобнее использовать, чем описанный ниже с помощью «id». Обычно атрибут «class» используется для оформления стилей таких элементов, которые могут повторяться на одной странице: заголовки, ссылки, текст, таблицы, картинки и т. п. Но даже если тег используется всего 1 раз, к нему тоже можно применить стили с помощью атрибута «class».
— Вы можете подключить один или несколько стилей с помощью атрибута класс(class) у неограниченного количества элементов.
— Для изменения нескольких тегов с одним классом на разных страницах достаточно изменить всего 1 строчку.
— Если на странице несколько тегов с одним и тем же классом, то при их изменении с помощью скрипта javascript легко запутаться, т. к. при обращении к тегу по имени класса нужно точно указать номер очередности каждого.
В файле .css пишется название стиля и в фигурных скобках {} пишутся свойства. Перед названием стиля нужно поставить точку, чтобы браузер понял, что он относится к class, а не к тегу.
В коде выше, мы задали классу «my_style_p» красный цвет с помощью свойства color.
Идентификатор(id) в отличие от класса(class) используются только для 1-ого тега на странице. Если вы зададите несколько одинаковых атрибутов на одной странице у разных тегов, то будет работать только самый первый. Это главный недостаток и отличие id(идентификатора) от атрибута класс(«class»).
Атрибут id используется для задания стилей, которые встречаются на странице только один раз, например: основной слой верхней(нижней) шапки, главный заголовок и т. п. На одной странице можно использовать неограниченное количество id, но при условии, что все их имена будут уникальные. Один и тот же id можно использовать только на разных страницах.
Легче организовать поиск элемента при использовании скриптов на языке javscript, т. к. элементов с одним классом может быть несколько, а с id только один.
Возможно задать стиль только у одного элемента на странице.
Подключение такое же, как и у атрибута «class», только вместо «class» пишется «id», а вместо точки перед именем стиля в css пишется #. А теперь подробно: Чтобы подключить стиль с помощью атрибута id(идентификатора), в файле .css пишется его название и внутри фигурных скобок{} указываются его свойства. Перед названием нужно поставить #, чтобы браузер понял, что стиль относится к id, а не к тегу.
В коде выше, мы задали идентификатору(id) «my_style_p» красный цвет с помощью свойства color.
Как вы понимаете использование id или class удобнее, чем атрибута style, т. к. позволяет внести изменения только в одну строчку, чтобы сменить стили у всех объектов с данным id или class на всех страницах. При использовании атрибута style изменения нужно будет вносить для каждого тега на каждой странице и часто это очень накладно.
Возможности атрибута class неограниченны, поэтому вы можете использовать его для любых случаев. А возможности атрибута id ограничены, т. к. одно имя id можно присвоить на странице только 1 раз. Если не знаете, что применить — используйте class, при желании его будет нетрудно сменить на id.
