Каскадные таблицы стилей определить внешний вид элемента веб-страницы, подключившись к атрибутам, которые вы применяете к этому элементу. Эти атрибуты могут быть либо идентификатором, либо классом, и, как и все атрибуты, они добавляют полезную информацию к элементам, к которым они прикреплены.
В зависимости от того, какой атрибут вы добавляете к элементу, вы можете написать селектор CSS для применения необходимые визуальные стили, необходимые для достижения внешнего вида этого элемента и веб-сайта в целом.
Хотя идентификаторы или классы работают с целью привязки к ним с помощью правил CSS, современный веб-дизайн В методах предпочтение отдается классам, а не идентификаторам отчасти потому, что они менее специфичны и с ними легче работать в целом.
Один или несколько классов в CSS?
В большинстве случаев вы назначаете элементу один атрибут класса, но на самом деле вы не ограничены только одним классом, как вы с идентификаторами. Пока элемент может иметь только один атрибут ID, вы можете дать элементу несколько классов, и в некоторых случаях это упростит стилизацию вашей страницы и многое другое. гибкий.
Если вам нужно назначить элементу несколько классов, добавьте дополнительные классы и просто разделите их пробелом в своем атрибуте.
Например, в этом абзаце есть три класса:
Это будет текст абзаца
Это устанавливает следующие три класса для тега абзаца:
- Pullquote
- Рекомендуемые
- Оставил
Обратите внимание на пробелы между каждым из этих значений класса. Именно эти пространства делают их разными, индивидуальными классами. По этой же причине в именах классов не может быть пробелов, потому что в этом случае они будут выделены как отдельные классы.
Как только у вас есть значения вашего класса в HTML, затем вы можете назначить их как классы в своем CSS и применить стили, которые вы хотите добавить. Например.
.pullquote {... }
.featured {... }
p.left {... }
В этих примерах пары объявлений и значений CSS отображаются внутри фигурных скобок, и именно так эти стили будут применены к соответствующему селектору.
если ты установить класс для определенного элемента (Например, р. левый), вы все равно можете использовать его как часть списка классов; однако имейте в виду, что это повлияет только на те элементы, которые указаны в CSS. Другими словами, р. левый стиль будет применяться только к абзацам с этим классом, поскольку ваш селектор фактически говорит применить его к «абзацам со значением класса оставил, "Напротив, два других селектора в примере не определяют определенный элемент, поэтому они будут применяться к любому элементу, который использует эти значения класса.
Множественные классы, семантика и JavaScript
Еще одно преимущество использования нескольких классов состоит в том, что это увеличивает возможности интерактивности.
Примените новые классы к существующим элементам с помощью JavaScript, не удаляя ни один из начальных классов. Вы также можете использовать классы для определения семантика элемента - добавить дополнительные классы, чтобы определить, что этот элемент означает семантически. Этот подход заключается в том, как Микроформаты работает.
Преимущества нескольких классов
Слоение нескольких классов может упростить добавление специальных эффектов к элементам без необходимости создания совершенно нового стиля для этого элемента.
Например, чтобы перемещать элементы влево или вправо, вы можете написать два класса:
оставил.
а также.
верно.
с просто.
плыть налево;
а также.
float: right;
в них. Затем, когда у вас есть элемент, который нужно переместить влево, вы просто добавляете класс «left» в его список классов.
Однако здесь есть прекрасная линия для прогулки. Помните, что веб-стандарты диктуют разделение стиля и структуры. Структура обрабатывается с помощью HTML, а стиль - с помощью CSS. Если ваш HTML-документ заполнен элементами, у всех которых есть имена классов, такие как «красный» или «левый», то есть имена, которые диктуете, как должны выглядеть элементы, а не то, что они есть, вы пересекаете границу между структурой и стилем.
Недостатки нескольких классов
Самый большой недостаток использования нескольких одновременных классов для ваших элементов заключается в том, что это может сделать их немного громоздкими для просмотра и управления с течением времени. Может оказаться трудным определить, какие стили влияют на элемент и влияют ли на него какие-либо скрипты. Многие из доступных сегодня фреймворков, например Bootstrap, интенсивно используют элементы с несколькими классами. Этот код может выйти из-под контроля, и с ним будет очень быстро работать, если вы не будете осторожны.
Когда вы используете несколько классов, вы также рискуете, что стиль одного класса переопределит стиль другого. Это столкновение может затруднить понимание того, почему ваши стили не применяются, даже если кажется, что они должны это делать. Помните о специфичности, даже если атрибуты применяются к этому элементу.
Используя такой инструмент, как инструменты для веб-мастеров в Google Chrome, вы можете легче увидеть, как ваши классы влияют на ваши стили, и избежать этой проблемы конфликта стилей и атрибутов.