94. Селекторы и свойства в CSS

Селектор в CSS – элемент (или группа элементов), для которого описываются стили. Например, селектор, тег h1, а свойство – цвет текста. Пример такого описания:

Пример селектора

h1 {
    color: #F1F1F1;
}

А так в общем виде

селектор {
    свойство: значение;
}

Селектор может состоять из таких частей:

Селектор тега, id селектор или селектор класса
Селектор псевдокласса и (или) селектор атрибута

Например, селектор может быть таким:

Пример «сложного селектора»

#header .block h1:hover {
    color: #F1F1F1;
}

Можно перечислять несколько разных селекторов и описывать для них одинаковые свойства. Проще показать на примере.

Так плохо

h1 {
    color: #000000;
}
p {
    color: #000000;
}
.bold {
    color: #000000;
}

А так хорошо

h1, p, .bold {
    color: #000000;
}

Это ознакомительный урок, по селекторам будет целый курс далее.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Свойство background для работы с фономЦвета и фон

Универсальные атрибуты в HTMLРазметка текста

Как сделать плавный переход в CSSАнимация

Добавляем градиент к фону элементаЦвета и фон

Тег TD в HTML таблицахТаблицы

Работа с файлами в PythonЗнакомство с Python

Акцентирование (выделение) текста в HTMLРазметка текста

Обработка исключений (try/except) в PythonЗнакомство с Python

Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python

Предыдущий урок «93. Что такое CSS?» Следующий урок «95. Основные правила и знакомство с селекторами»

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например: сохранение прогресса прохождения уроков, участие в рейтинге среди пользователей, прохождение тестов, просмотр внешних ссылок и скриншотов в некоторых курсах), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

Для тегов <h1> и <p> (не дописывайте новые селекторы, все уже есть) укажите два свойства: color: #FF0000 и text-align: center. Не забудьте точки с запятой (;) после свойств

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.