Мы используем идентификаторы и классы для вёрстке на определенный элемент HTML, чтобы манипулировать им с помощью CSS по другому от другого аналогичного элемента, но в чем разница между ними? В этом посте мы кратко рассмотрим, как классы и идентификаторы используются в CSS и мы постараемся помочь вам лучше понять, как решить и когда использовать CSS class или id, предоставляя некоторые простые примеры.
В CSS вы можете назначать и управлять стилем HTML элементов на странице с помощью нескольких селекторов. Идентификатор и класс - это два из наиболее часто используемых селекторов CSS, которые не только помогают создавать макет HTML документа, но также помогают его стилизовать. Они также используются для контроля и управления элементами через JavaScript, но это немного другая тема.
Идентификаторы
1. Для каждого элемента может быть установлен только один идентификатор.
2. Идентификатор должен использоваться только на странице.
Вы должны использовать идентификатор, если на странице есть один элемент, которым вы хотите управлять. Давайте сначала начнем с того, как используются идентификаторы и селектора классов, а затем мы продолжим с их различиями и когда использовать каждый из них.
Пример:
Код
<div id="main-header">ZORNET.RU</div>
Селектор ID
Идентификатор определяется в вашем HTML следующим образом:
Код
<div id="element">
<! - вещи идут здесь ->
</div>
И в вашем CSS вы можете настроить таргетинг на элемент и применить к нему стили:
Код
#element {
background: blue;
}
Стили CSS применяются на основе правил, относящихся к каскаду и специфичности.
Классы
1.1.Те же классы могут быть установлены для нескольких элементов.
1.2. Для одного и того же элемента может использоваться более одного класса
Вы должны использовать Class, если хотите манипулировать несколькими элементами на одной странице или сайте. Класс поможет вам сэкономить время, манипулируя всеми элементами за один раз.
Пример:
Код
<div class="column">ZORNET.RU №2</div>
Селектор class
Классы применяются в HTML следующим образом:
Код
<div class="element">
<! - материал идет здесь->
</div>
И вы нацеливаете элемент в CSS как это (что я уже продемонстрировал в предыдущем разделе):
Код
.element {
background: blue;
}
Селекторы классов, на мой взгляд, сильно недооценены и намного более чистые и удобные в использовании опции для применения стилей к элементам.
Вывод:
Все из одного вида или на повторяющихся элементах должны иметь элементы, и все элементы, которые вы хотите использовать для повторного использования на странице должны иметь класс.
