В CSS можно задать стили для HTML-элементов, используя селекторы класса, тега и ID. Каждый тип селектора имеет свою синтаксическую структуру и применяется для разных целей. Вот как это работает:
Селекторы тега
Селекторы тега применяют стили к HTML-элементам определенного типа. Синтаксис прост: вы используете имя тега как селектор. Например, для изменения стиля всех параграфов (<p>) на странице:
p {
color: blue;
font-size: 16px;
}
Это правило CSS применит синий цвет и размер шрифта 16 пикселей ко всем параграфам на веб-странице.
Селекторы класса
Селекторы класса позволяют применить стили к элементам, имеющим определенный атрибут class. Синтаксис селектора класса начинается с точки (.), за которой следует имя класса. Например, чтобы стилизовать элементы с классом highlight:
.highlight {
background-color: yellow;
font-weight: bold;
}
Элементы с классом highlight получат желтый фон и жирное начертание текста.
Селекторы ID
Селекторы ID применяют стили к элементу с конкретным атрибутом id. Поскольку в HTML-документе ID должен быть уникальным, селектор ID влияет только на один элемент. Синтаксис селектора ID начинается с решетки (#), за которой следует имя ID. Например:
#main-title {
color: green;
font-size: 24px;
}
Элемент с ID main-title будет отображаться зеленым цветом шрифта размером 24 пикселя.
Комбинирование селекторов
Вы также можете комбинировать селекторы для более специфического выбора элементов. Например, если вы хотите применить стили только к параграфам с классом highlight внутри определенного раздела с ID section1, вы можете написать:
#section1 p.highlight {
color: red;
background-color: black;
}
Это правило применяется к параграфам с классом highlight только внутри элемента с ID section1, делая текст красным на черном фоне.
Использование селекторов класса, тега и ID позволяет точно настроить внешний вид веб-страницы, делая CSS мощным инструментом для веб-разработчиков.
