От автора: в css классы и идентификаторы позволяют привязать стили к любым элементам, но суть их работы немного отличается друг от друга. Как они работают и каковы особенности их применения?
Стилевые классы
Классы – это наиболее часто используемые селекторы в css. В большинстве случаев прописывание стилей различным элементам идет через них. Все потому, что class, в отличие от id, можно задавать многим тегам, поэтому он может быть применен для стилизации целой группы блоков. Например:
|
1 2 3 4 |
.center-wrap{ max-width: 960px; margin: 0 auto; } |
Теперь какому бы блоку мы ни прописали class center-wrap, он получит максимальную ширину в 960 пикселей и будет центрирован. И мы можем прописать его и для шапки, и для контента, и для футера.
Класс вообще для того и создан, чтобы стилизовать группу, а не одиночный блок. Хотя при этом никто не запрещает задавать новый уникальный class только одному элементу. Вы вполне можете это делать.
Несколько классов: как это работает?
Стилевые классы имеют еще одну особенность – их можно задавать несколько одному html-элементу. Даже не несколько, а бесконечное количество, тут никаких ограничений нет. Например:
|
1 |
<div class = "red transform m-size"></div> |
Первый может отвечать за цвет, второй – за какой-либо эффект, третий – за размер. К слову, такой подход сделан в css-фреймворках. Например, в Bootstrap. CSS-фреймворк – это уже по сути готовые написанные стили и вам остается лишь прописать нужные свойства элементам.
Если оба класса, которые применяются к элементу, содержат одинаковое стилевое свойство с разным значением, то применится то значение, которое записано в таблице стилей последним. Например:
|
1 |
<div class = "first two"></div> |
|
1 2 3 4 5 6 |
.first{ Color: red; } .two{ Color: green; } |
В данном случае текст в блоке будет зеленым, а не красным, потому что это стилевое правило стоит в таблице стилей позже первого, а значит, переопределяет его.
Идентификаторы
Наверняка вы зарегистрированы в какой-нибудь соц. сети? У вашему аккаунта там гарантированно есть какой-то id. Правда это не имеет ничего общего с css-идентификаторами, но общая их особенность вот в чем – id может быть только одним для одного конкретного элемента.
Нельзя задавать более 1 id одному элементу, а также нельзя давать один и тот же идентификатор двум разным элементам. Задается он с помощью атрибута id.
Из этого всего становится понятно, что идентификатор предназначен для стилизации одного конкретного элемента. Обычно он применяется по отношению к крупным элементам сайта. Например, к шапке (header), блоку контента (content), футеру (footer). То есть это те элементы, которые присутствуют на любом сайте в единственном числе и не повторяются. Также это может быть главная навигация, боковая колонка, форма комментариев и т.д.
Приоритетность в стилях
Если говорить о приоритетности в css, то тут идентификатор берет верх над классом. Давайте рассмотрим пример:
|
1 |
<div class = "green" id = "brown"></div> |
У нас есть 1 блок. Мы задали ему класс и идентификатор. Пропишем стили:
|
1 2 3 4 5 6 |
.green{ color: green; } #brown{ color: brown; } |
Какого цвета будет текст в блоке: зеленого или коричневого? Коричневого. И не потому, что идентификатор стоит в таблице стилей дальше класса. В данном случае это неважно, можно было бы поставить его перед, но результат все равно был бы таковым. Все потому, что идентификатор можно задать только 1. Соответственно, это очень точная характеристика элемента.
Дело в том, что для браузера чем точнее селектор, тем он является более приоритетным для выполнения записанных в нем свойств. Например, возьмем простой селектор тега – p. Он обращается ко всем абзацам на странице. Очень широкий селектор, так как абзацев очень много.
Но давайте попробуем селектор p.right{}. Он уже обратится только к тем абзацам, которые имеют класс right. То есть их может быть на самом деле много, но в любом случае их будет меньше, чем абзацев всего.
А теперь обратимся, допустим, к селектору #p-text. Он очень точный, так как выберет всего 1 элемент, у которого имеется этот идентификатор. Соответственно, вы можете привязать к элементу хоть 7 классов и прописать в них стили, но идентификатора хватит, чтобы все нужные стили переопределить.
Подытоживаем
В общем-то, сегодня мы достаточно подробно разобрали работу этих важных компонентов css, а также для чего они нужны. Могу сказать, что стилевые классы используются обычно чаще. Я видел шаблоны, где вообще использовались только они. И это нельзя назвать какой-то грубой ошибкой, если так подумать.
Стилевой класс вы можете использовать как для стилизации группы элементов, так и для одного. Идентификатор же используется строго для одного элемента. Если вы попробуете один и тот же id прописать двум элементам, то это не сработает. Также нельзя одному элементу определять более одного идентификатора – это уникальная метка, которая может быть только в одном числе.
Если мы говорим о приоритетности, то id приоритетнее класса, но тот, в свою очередь, приоритетней обычных селекторов тегов.
Вот такие пироги, друзья. Еще одну вещь могу сказать – без этих вещей css просто немыслим, почти все стили в каскадных таблицах записываются, привязываясь либо к стилевому классу, либо к id. Если вы используете редактор кода с подсветкой синтаксиса, то это можно будет легко увидеть.
