Классы и 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. Мы надеемся, что этот материал окажется полезным для вас.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *