Ранее мы рассматривали как применить стили ко всем тегам. В данной статье пойдет речь как подключать разные стили для одних и тех же тегов на странице без использования атрибута style. Данный способ удобнее, чем использование атрибута style т. к. позволяет вносить изменения сразу на нескольких страницах при смене всего 1 строчки.
Чтобы компьютер понял какой стиль использовать нужно задать название атрибута у тега на странице и это же имя прописать в файле стилей с указанием свойств.
Подключить индивидуальные стили можно с помощью атрибутов «class»(класс) и «id», прописав их свойства в файле .css.
«class»(класс) — может быть применен к неограниченному количеству тегов. Вы задаете индивидуальный набор свойств и название этого класса в файле стилей. Затем на странице у тегов, для которых вы хотите применить этот набор свойств просто пишите в атрибуте class имя класса(class=»имя класса») и стили, заданные в файле применяются для данного элемента.
Это наиболее распространенный способ, потому что в большинстве случаев его удобнее использовать, чем описанный ниже с помощью «id». Обычно атрибут «class» используется для оформления стилей таких элементов, которые могут повторяться на одной странице: заголовки, ссылки, текст, таблицы, картинки и т. п. Но даже если тег используется всего 1 раз, к нему тоже можно применить стили с помощью атрибута «class».
Плюсы метода:
Минусы:
В файле .css пишется название стиля и в фигурных скобках {} пишутся свойства. Перед названием стиля нужно поставить точку, чтобы браузер понял, что он относится к class, а не к тегу.
<!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_p {color:red;}В коде выше, мы задали классу «my_style_p» красный цвет с помощью свойства color.
Идентификатор(id) в отличие от класса(class) используются только для 1-ого тега на странице. Если вы зададите несколько одинаковых атрибутов на одной странице у разных тегов, то будет работать только самый первый. Это главный недостаток и отличие id(идентификатора) от атрибута класс(«class»).
Атрибут id используется для задания стилей, которые встречаются на странице только один раз, например: основной слой верхней(нижней) шапки, главный заголовок и т. п. На одной странице можно использовать неограниченное количество id, но при условии, что все их имена будут уникальные. Один и тот же id можно использовать только на разных страницах.
Плюсы:
Минусы:
Подключение такое же, как и у атрибута «class», только вместо «class» пишется «id», а вместо точки перед именем стиля в css пишется #. А теперь подробно: Чтобы подключить стиль с помощью атрибута id(идентификатора), в файле .css пишется его название и внутри фигурных скобок{} указываются его свойства. Перед названием нужно поставить #, чтобы браузер понял, что стиль относится к id, а не к тегу.
<!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_p {color:red;}В коде выше, мы задали идентификатору (id) «my_style_p» красный цвет с помощью свойства color.
Как вы понимаете использование id или class удобнее, чем атрибута style, т. к. позволяет внести изменения только в одну строчку, чтобы сменить стили у всех объектов с данным id или class на всех страницах. При использовании атрибута style изменения нужно будет вносить для каждого тега на каждой странице и часто это очень накладно.
Возможности атрибута class неограниченны, поэтому вы можете использовать его для любых случаев. А возможности атрибута id ограничены, т. к. одно имя id можно присвоить на странице только 1 раз. Если не знаете, что применить — используйте class, при желании его будет нетрудно сменить на id.
Команда Hardkod профессионально доработает ваш сайт: добавим новый функционал, улучшим существующие процессы, подключим платежные системы и CRM. Мы технически поддержим ваше развитие, превращая пожелания в рабочие инструменты для увеличения продаж. Вы фокусируетесь на стратегии — мы на её техническом воплощении. Звоните 8 (800) 350-81-86 или оставляйте заявку на сайте.
Обновлено: 22 ноября 2024
Время на чтение: 5 минут
Количество просмотров: 112
Закажите услугу прямо сейчас и получите консультацию специалиста бесплатно
Оставить заявку
Локальное продвижение сайтов помогает поднять его позиции в выдаче поисковых систем и, вместе с тем, шире охватить аудиторию в тех местах...
Вы наверняка тоже думали, что турбо-страницы нужны для быстрой загрузки контента, когда у пользователя слабый интернет? Тогда спешим...
Зачастили задачи по настройке HTTPS для платежных систем. Нужно отдать должное Яндекс.Кассе, все-таки внесла свою лепту в развитие...
Мы используем файлы cookie для улучшения работы нашего сайта и предоставлении вам наиболее полезного контента.
Связаться с нами
Как вам удобнее связаться с нами?
Написать в Telegram
Написать в WhatsApp
Звонок 8 800 350 81 86
Получим ваш запрос и быстро подключимся к решению проблемы
Спасибо за заявку!
Наш менеджер свяжется с вами в ближайшее время.
Успешно!
Чек-лист отправлен на указанный Email-адрес
