В CSS селекторы играют ключевую роль, позволяя вам указать, к каким элементам HTML применять определённые стили. Существует несколько типов селекторов, но два из самых основных и часто используемых — это селекторы по тегам и селекторы по классам.
Селекторы по тегам
Селекторы по тегам позволяют применить стиль ко всем элементам определённого типа на веб-странице. Для этого используется название тега. Стили, применяемые через селекторы по тегам, влияют на каждый элемент этого типа в документе, если только они не переопределены более специфичными селекторами.
Пример:
p {
color: blue;
font-size: 16px;
}
В этом примере все параграфы (<p>) на странице будут иметь синий цвет текста и размер шрифта 16 пикселей.
Селекторы по классам
Селекторы по классам позволяют применить стиль к группе элементов, имеющих один и тот же класс. Класс задаётся в HTML-элементе с помощью атрибута class и может быть присвоен любому количеству элементов. В CSS для обозначения селектора класса используется точка . перед названием класса.
Пример:
<p class="highlight">Это выделенный текст.</p>
<p>Это обычный текст.</p>.highlight {
color: red;
font-weight: bold;
}
В этом примере только элементы с классом highlight будут иметь красный цвет и жирное начертание. Второй параграф, не имеющий класса highlight, останется неизменным.
Когда использовать селекторы по тегам и по классам
- Селекторы по тегам идеально подходят для определения общего стиля элементов одного типа на всей странице или сайте. Например, они могут быть использованы для установки базового шрифта, цвета текста и других общих стилей для всего документа.
- Селекторы по классам предпочтительны, когда вам нужно стилизовать определённые элементы или группы элементов, которые должны отличаться от остальных или иметь дополнительные стилевые характеристики. Классы обеспечивают гибкость и повторное использование стилей для различных элементов.
Заключение
Понимание и правильное использование селекторов по тегам и по классам является фундаментом для эффективной работы с CSS. Эти селекторы обеспечивают мощный инструментарий для контроля внешнего вида веб-страниц, позволяя создавать структурированные, читаемые и легко поддерживаемые стилевые листы.
