Классы и ID CSS: Что использовать?

В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.

В CSS мы можем управлять стилями HTML-элементов веб-страницы с помощью ряда селекторов. ID и классы являются двумя наиболее часто используемыми селекторами CSS, с помощью которых можно не только задавать структуру HTML-документа, но и назначать стили.

Сначала рассмотрим, как используются CSS классы и идентификаторы, а затем определим различия между ними, и когда лучше применять каждый из них.

Как используется CSS-селектор ID

Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:

<div id="header">
<font>
<font class="">Это заголовок нашей веб-страницы.
</font>
</font>
</div>

В файле CSS можно применить стили к этому элементу div:

#header { width: 100%; height: 80px; background: blue }

Обратите внимание на использование # (хэша) перед именем идентификатора.

Как используется селектор CSS класса

Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:

<p class="content">
<font>
<font class="">Это наш первый пункт.</font>
</font>
</p>
<p class="content">
<font>
<font>Это наш второй абзац.</font>
</font>
</p>
<p class="content">
<font>
<font>Это наш третий абзац.</font>
</font>
</p>

В файле CSS можно применить стили к этим абзацам следующим образом:

.content { margin: 20px 0; line-height: 24px; font-size: 15px }

Обратите внимание на использование точки перед именем класса.

В чем разница между CSS-классами и ID

Рассмотрим, в чем состоит разница между CSS классами и идентификаторами. В приведенных выше примерах мы использовали селектор ID (#header) для одного элемента, а селектор класса (.content) — для нескольких.

Это потому, что значение идентификатора может быть присвоено только одному элементу HTML, и несколько элементов на одной странице не могут иметь одинаковый ID. Например, на странице может присутствовать только один элемент с идентификатором #header или один элемент с идентификатором #footer. Значение класса может быть присвоено одному или нескольким HTML-элементам. Например, нескольким абзацам с классом .content.

Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:

<div id="menu">
<a class="link">
<font>
<font class="">Ссылка 1 </font>
</font></a>
 <a class="link">
<font>
<font class="">Ссылка 2 </font>
</font>
</a>
 <a class="link">
<font>
<font class="">Ссылка 3 </font>
</font>
</a>
 <a class="link">
<font>
<font class="">Ссылка 4</font>
</font>
</a>
</div> 
<div id="content">
<p class="text">
<font>
<font class="">Это наш первый пункт.</font>
</font><
/p>
<p>&nbsp;</p>
<p class="text">
<font>
<font>Это наш второй абзац.</font>
</font>
</p>
<p>&nbsp;</p>
<p class="text">
<font>
<font>Это наш третий абзац.</font>
</font>
</p>
</div>

В приведенном выше HTML коде мы присвоили контейнеру <div> ID (#container), так как у нас на странице есть только один контейнер.

В нем содержатся разделы меню (#menu) и контента (#content). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки <a>, мы присвоили каждой из них CSS класс (.link). Аналогичным образом мы присвоили класс (.text) каждому абзацу в разделе контента.

Назначим стили для этих элементов:

#container { width: 1080px; margin: 0 auto; background: #eee }
 
#menu { height: 90px; background: #ddd }
.link { color: #000; text-decoration: none }
 
#content { padding: 20px }
.text { font-size: 15px }

Когда использовать в CSS класс, а когда ID

ID используется для отдельных элементов, которые присутствуют на странице только в одном месте. Например, заголовка, подвала или меню. Класс используется для одного или нескольких элементов, которые присутствуют на странице: параграфов, ссылок, кнопок, полей ввода. Также можно использовать класс для единичного элемента. Чтобы привыкнуть к этому различию, лучше завести привычку использовать классы для управления несколькими элементами одного типа.

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

<div id="box1" class="box">
<font>
<font class="">...</font>
</font>
</div> 
<div id="box2" class="box">
<font>
<font>...</font>
</font></div>

Элементам также можно назначить в CSS несколько классов одновременно. Это полезно, когда нужно задать стили группе элементов в пределах элемента определенного типа на странице. Например, предположим, что у вас есть класс .content, который применяется ко всем абзацам. Если вы хотите добавить определенным абзацам рамку, то можно добавить еще один класс. Например, .bordered:

<p class="content">
<font>
<font class="">Этот пункт не имеет границ.</font>
</font>
</p> 
<p class="content bordered">
<font>
<font>Этот пункт имеет границы.</font>
</font>
</p>

Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:

.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }

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

На этом мы завершаем сравнение классов и ID CSS. Мы надеемся, что этот материал окажется полезным для вас.