Как обозначается id в css

#superBlock  height: 200px; >

Данный селектор имеет много общих черт с селекторами класса. С его помощью, как и с помощью селектора класса, выбранному элементу можно присвоить определенный стиль или характеристики. Пример: для начала работы с селектором id нужно создать атрибут, посредством которого будут присваиваться классы:

ul> li id="important">Наша строка с уникальным стилемli> li>Другая строкаli> li>Другая строкаli> ul> style> /* пееркрасим строку с в красный */ #active  color: red; > style>

Стоит отметить то, что аналогично селектору класса, используя селектор id совместно с универсальным мы получаем бессмыслицу:

/* ниже два абсолютно тождественных стиля оформления */ *#important <> #important <>

Также важным является то, что селекторы id и типа можно объединять, что в свою очередь объединит свойства, присвоенные данным селекторам:

li#important  color: red; >

Данное правило справедливо только при употреблении такого id. Однако эффективность подобной конструкции мала, поскольку один и тот же id может встречаться на странице только один раз. Но все же этот пример имеет смысл в строго определенных случаях. К примеру, для элементов какого-то нетипичного списка. Еще одна особенность в работе с селектором идентификатора — регистрозависимость, то есть принципиально важное различие в использовании заглавных и строчных символов.

Различие id и классов

• первая особенность заключается в том, что селектор id имеет больший приоритет нежели класса и в случае пересечения их на одном и том же теге, оформление он получит от своего айдишника;
• идентификаторы присваиваются только одному конкретному элементу, в то время как класс может применяться к нескольким;

Ограничения в применении

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

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

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

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

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

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

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

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

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

#header

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

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

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

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

.content

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

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

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

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

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

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

В нем содержатся разделы меню ( #menu ) и контента ( #content ). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки , мы присвоили каждой из них 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

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

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

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

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

 
 
 
 Этот пункт имеет границы.  

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

.content < margin: 10px; font-size: 15px; color: blue >.bordered

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

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