Загрузка...

CSS Classes and IDs: What to Use?

Thread in Web development created by Hangman666 Jul 13, 2016. 410 views

Sort
  1. Hangman666
    Hangman666 Topic starter Jul 13, 2016 Хранитель Идей 342 Mar 10, 2016
    В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.

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

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

    Как используется CSS-селектор ID
    Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:
    Code
    <div id="header">
    
<font>
    
<font class="">Это заголовок нашей веб-страницы.
    
</font>
    
</font>
    
</div>

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

    #header { width: 100%; height: 80px; background: blue }
    Обратите внимание на использование # (хэша) перед именем идентификатора.

    Как используется селектор CSS класса
    Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:
    Code
    <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 можно применить стили к этим абзацам следующим образом:
    Code
    .content { margin: 20px 0; line-height: 24px; font-size: 15px }

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

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

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

    Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:
    Code
    <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) каждому абзацу в разделе контента.

    Назначим стили для этих элементов:
    Code
    #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 класс и идентификатор. Например, вам нужно разместить на странице две панели с одним размером и стилями, но в разных местах. В этом случае можно назначить для панелей один класс, чтобы задать их размер и стили, а затем назначить им разные идентификаторы, чтобы задать их позиции:
    Code
    <div id="box1" class="box">
    
<font>
    
<font class="">...</font>
    
</font>
    
</div>
    
<div id="box2" class="box">
    
<font>
    
<font>...</font>
    
</font></div>

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

    Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:
    Code
    .content { margin: 10px; font-size: 15px; color: blue }
    
.bordered { border: 2px solid #222 }

    Важно правильно использовать CSS идентификаторы и классы, исходя из изложенных выше правил. Иначе их неправильное использование может привести к нарушению функциональности HTML-кода. И даже если страница будет выглядеть нормально в определенном браузере или на конкретном устройстве, в другом браузере макет может быть «сломан».
     
    Jul 13, 2016
  2. RaysMorgan
    RaysMorgan Jul 16, 2016 Че скажете 54,016 Mar 7, 2013
    По опыту разработки хочу сказать, что больше не использую ID, так как постоянно меняется шаблон
    ID'ы можно использовать, когда полностью закончена верстка и нужно ускорить рендеринг страницы, хотя особого эффекта вы не увидите
     
    Jul 16, 2016
  3. Localhost_inactive_inactive
    Localhost_inactive_inactive Oct 1, 2016 Banned 0 Oct 1, 2016
    Я тоже редко использую иды.
     
    Oct 1, 2016
  4. RaysMorgan
    RaysMorgan Oct 2, 2016 Че скажете 54,016 Mar 7, 2013
    Вывод: Используй классы, чтобы избежать проблем в дальнейшем)
     
    Oct 2, 2016
Loading...
Top