Введение в селекторы

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 10 из 76.

В CSS селекторы — это шаблоны, используемые для выбора HTML-элементов, которые вы хотите стилизовать. Они являются важной частью правил CSS, так как определяют, к каким элементам будут применены стили.

Существует множество типов селекторов, каждый из которых выбирает элементы по-разному. Понимание селекторов является основой для освоения CSS и создания веб-страниц с качественным оформлением.

Вот базовое правило CSS с селектором:

selector {
    property: value;
}

selector: Указывает на HTML-элементы, к которым будут применены стили.
property: Атрибут стиля, который вы хотите изменить (например, color, font-size).
value: Значение, которое вы хотите установить для свойства (например, blue, 16px).

Например:

p {
    color: blue;
    font-size: 16px;
}

В этом примере p является селектором, который выбирает все элементы абзацев. Объявления устанавливают цвет текста синим и размер шрифта 16 пикселей для всех абзацев.

Задание

Легко

Вам дан HTML-документ. Используйте внутренние CSS-стили, чтобы оформить документ со следующими свойствами:

Установите цвет фона для всех заголовков h1 на green.
Установите цвет текста для всех заголовков h1 на white.
Установите размер шрифта для всех абзацев (p) на 18px.

Вам предоставлен начальный CSS-код для этого.

Шпаргалка

CSS-селекторы — это шаблоны, используемые для выбора HTML-элементов, которые вы хотите стилизовать. Они определяют, к каким элементам будут применены стили.

Базовая структура правила CSS:

selector {
    property: value;
}

selector: Выбирает HTML-элементы для стилизации
property: Атрибут стиля, который вы хотите изменить (например, color, font-size)
value: Значение, которое вы хотите установить для свойства (например, blue, 16px)

Пример выбора всех элементов абзаца:

p {
    color: blue;
    font-size: 16px;
}

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>