Что такое селектор

• Что такое селектор?

Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

• Селекторы по типу элемента (Селекторы по тегам)

В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д. Правила задаются в следующем виде.

Тег { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько

• Селектор по классу

В HTML документе, селекторы по классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.

.classname { свойство: значение; }

• Селекторы по ID

Селекторы по ID производят выборку всех элементов по ID, полностью совпадающих с селектором.

#id_value { свойство: значение; }

• Групповые селекторы

Через групповые селекторы можно выбирать несколько элементов.

h1, h2, h3, h4, h5, h6 { свойство: значение; }

• Универсальный селектор (*)

Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).

* { свойство: значение; }

• Селекторы потомков

Основное назначение селекторов потомков заключается в том, чтобы единообразно отформатировать элементы, которые расположены внутри других элементов (содержатся внутри других элементов).

header a {свойство: значение;}

• Псевдоклассы

Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить разные динамические эффекты на странице

**a:hover{свойство: значение;}**

• Псевдоэлементы

Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.

p::before {свойство: значение;}

p::after {свойство: значение;}

• Селектор по атрибуту

С помощью селекторов атрибутов вы можете выбрать элементы с конкретными атрибутами.

input[type="text"] {свойство: значение;}

Упражнение:

Приступаем к верстке нового макета CloudBudget

https://drive.google.com/file/d/1UFXBJtugbiscSdIz4bN07w7ymCzV7YLV/view?usp=sharing

Задание:

1. Сделать HTML разметку и задать классы для блоков