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