Класс против ID
Каскадные таблицы стилей (CSS) - это язык, который описывает внешний вид и форматирование документа, написанного с использованием языка разметки. CSS широко используется для стилизации веб-страниц, написанных на HTML. CSS позволяет указывать собственные селекторы стилей в дополнение к применению стилей для элементов HTML. Это делается с помощью селекторов ID и класса. При указании стиля для одного уникального элемента используется селектор идентификатора. При указании стиля для группы элементов используется селектор класса.
Что такое класс?
В CSS селектор классов можно использовать для применения вашего собственного стиля к группе элементов. Селектор класса используется для применения определенного стиля к набору элементов того же класса. В CSS селектор класса обозначается точкой (.). Ниже приведен пример селектора класса, определенного в CSS.
.мой класс {
цвет синий;
font-weight: жирный;
}
HTML может ссылаться на класс, определенный в CSS, используя класс атрибута, как показано ниже.
Это мое форматирование
Это снова мое форматирование
Как показано выше, один и тот же класс может использоваться для нескольких элементов, а один элемент может использовать несколько классов. Когда несколько классов используются в одном элементе, классы вставляются в атрибут класса, разделенный пробелом, как показано ниже.
Это мое форматирование с использованием двух классов
Что такое ID?
В CSS селектор ID можно использовать для применения вашего собственного стиля к одному уникальному элементу. В CSS селектор идентификатора обозначается хешем (#). Ниже приведен пример селектора идентификатора, определенного в CSS.
#мой ID {
красный цвет;
выравнивание текста: вправо;
}
HTML может ссылаться на селектор идентификатора, определенный в CSS, используя идентификатор атрибута, как показано ниже.
Это моя форма форматирования селектора идентификаторов
ID уникальны. Поэтому каждый элемент может иметь только один идентификатор, а каждая страница может иметь только один элемент с этим конкретным идентификатором. У идентификаторов есть важная характеристика, которую можно использовать в браузере. Если URL-адрес страницы содержит хеш-значение (например, https://myweb.com#my_id), браузер попытается автоматически найти элемент с идентификатором «my_id» и прокрутить веб-страницу для отображения этого элемента. Это одна из причин, по которой на странице должен быть один элемент с этим конкретным идентификатором, чтобы браузер мог найти этот элемент.
В чем разница между классом и идентификатором?
Несмотря на то, что и селектор классов, и селектор идентификаторов можно использовать для применения вашего собственного стиля к элементам на веб-странице, они имеют некоторые важные различия. Селектор классов можно использовать для применения вашего собственного стиля к группе элементов, в то время как селектор ID используется для применения стиля к одному уникальному элементу. При использовании идентификаторов каждый элемент может иметь только один идентификатор, и каждая страница может иметь только один элемент с этим конкретным идентификатором, но класс можно использовать для нескольких элементов, а один элемент может использовать несколько классов. Кроме того, идентификатор можно использовать для автоматической прокрутки страницы для отображения элемента с этим идентификатором, но это невозможно с помощью селектора класса.
