Использование классов и идентификаторов для назначения стилей

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

Селекторы класса

Селектор класса позволяет задать несколько стилей для одного элемента или тега в документе. Например, вам может понадобиться создать области текста, отображаемые цветом, отличным от цвета остального текста в документе. В этом случае можно назначить классы параграфам:

<style type="text/css">
  p { color: #0000ff; }
  p.alert { color: #ff0000; }
</style>

Эти стили задают для всех параграфов синий цвет (#0000FF), но любой абзац с классом "alert" будет выводиться красным цветом.

Атрибут class является более специфичным, чем первое правило CSS, которое использует только селектор тега. Вот как это можно использовать в HTML-разметке:

<p>
Этот абзац будет отображаться синим цветом, который является цветом текста по умолчанию.
</p>
<p>
Этот абзац также будет синим.
</p>
<p class="alert">
А этот абзац будет отображаться красным цветом, так как атрибут class переопределяет стандартный синий цвет.
</p>

В этом примере стиль "p.alert" будет применяться только к параграфам, которые используют класс "alert". Если вы хотите применить этот HTML style class для нескольких элементов, нужно удалить элемент из начала стиля (только не забудьте оставить точку):

<style type="text/css">
.alert {background-color: #ff0000;}
</style>

Теперь можно применять этот класс к любому элементу:

<p class="alert">
Этот параграф будет отображаться красным цветом.
</p>
<h2 class="alert">Этот элемент h2 также будет красным.</h2>

На сегодняшний день классы CSS применяются к большинству элементов, потому что с ними легче работать, чем с идентификаторами.

Селекторы ID

Селектор ID позволяет присвоить имя определенному стилю, не связывая его с тегом или другим HTML-элементом. Допустим, что у вас есть блок div, который содержит информацию о событии. Можно задать для него id "event", а затем выделить этот блок черной рамкой шириной в 1 пиксель:

<style type="text/css">
#event { border: 1px solid #000; }
</style>

Проблема, связанная с идентификаторами, заключается в том, что они не могут повторяться в HTML-документе. Они должны быть уникальными. Так что если у вас есть три блока событий, и для них нужно создать рамку, придется присвоить им идентификаторы "event1", "event2" и "event3" и задать стили отдельно для каждого. Поэтому было бы гораздо проще использовать упомянутый выше HTML div class "event" и задать стили для всех сразу.

Идентификаторы являются более специфичными, чем классы. Например, если нужно переопределить ранее установленный стиль, это может быть трудно сделать, если использовать много идентификаторов. По этой причине многие веб-разработчики отошли от использования идентификаторов в разметке, даже если планируется использовать это значение только один раз. Вместо этого для назначения почти всех стилей применяют менее специфичные классы.

Но идентификаторы незаменимы, если нужно создать страницу, которая содержит анкорные ссылки. Например, если у вас есть параллакс-сайт. Он содержит весь контент на одной странице со ссылками, с помощью которых можно "перепрыгивать" к различным частям страницы. Это делается с помощью идентификаторов и текстовых ссылок, которые использует эти анкорные ссылки. Вы просто добавляете значение этого атрибута, которому предшествует символ #, в атрибут ссылки href. Например, следующим образом:

<a href="#event"> Это ссылка </a>

Если вы хотите создать такой тип внутри страничной навигации, без использования идентификаторов вам не обойтись. Но вы все равно можете применять HTML class для определения общих стилей.