В этой статье мы кратко рассмотрим, как применяются 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> Код <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> Код <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 } Код .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> </p> <p class="text"> <font> <font>Это наш второй абзац.</font> </font> </p> <p> </p> <p class="text"> <font> <font>Это наш третий абзац.</font> </font> </p> </div> Код <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> </p> <p class="text"> <font> <font>Это наш второй абзац.</font> </font> </p> <p> </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 } Код #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> Код <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> Код <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 } Код .content { margin: 10px; font-size: 15px; color: blue } .bordered { border: 2px solid #222 } Важно правильно использовать CSS идентификаторы и классы, исходя из изложенных выше правил. Иначе их неправильное использование может привести к нарушению функциональности HTML-кода. И даже если страница будет выглядеть нормально в определенном браузере или на конкретном устройстве, в другом браузере макет может быть «сломан».
По опыту разработки хочу сказать, что больше не использую ID, так как постоянно меняется шаблон ID'ы можно использовать, когда полностью закончена верстка и нужно ускорить рендеринг страницы, хотя особого эффекта вы не увидите