Прежде чем что-то оформить, браузеру нужно объяснить — что именно. За это отвечают селекторы: они выбирают элементы, к которым применятся стили. Самый простой из них — селектор по тегу. А цвет текста и фона — те свойства, с которых начинается любое оформление: они мгновенно меняют облик страницы и задают настроение всему сайту.

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

Что уже умеем / что добавим

Вы уже подключили CSS и написали первое правило. Теперь разберём селекторы по тегу подробнее и освоим цвет во всех основных форматах. В сквозном проекте мы зададим единую цветовую гамму лендингу: цвет фона секций и цвет текста.

Что вы узнаете в рамках статьи

• Как работает селектор по тегу.
• Как задавать цвет текста свойством color.
• Как задавать цвет фона свойством background-color.
• Какими способами можно записывать цвет: имена, HEX, rgb.
• Как один селектор применяет стиль сразу ко всем таким элементам.

Ключевые термины

• Селектор по тегу — селектор, выбирающий все элементы указанного тега.
• color — свойство цвета текста.
• background-color — свойство цвета фона элемента.
• Именованный цвет — цвет по названию, например red, teal.
• HEX-код — цвет в шестнадцатеричном виде, например #1a3c8c.
• RGB — цвет по компонентам красного, зелёного и синего, например rgb(255, 0, 0).

Селектор по тегу

Селектор по тегу — это просто имя элемента перед фигурными скобками. Правило применится ко всем элементам с таким тегом на странице:

p {
  color: #333333;
}

Здесь все абзацы p получат тёмно-серый текст — и те, что уже есть, и те, что вы добавите позже. В этом сила и удобство: пишете правило один раз, а действует оно на все подходящие элементы сразу.

Если нужно оформить одинаково несколько разных тегов, их перечисляют через запятую:

h1, h2, h3 {
  color: #1a3c8c;
}

Такое правило покрасит заголовки трёх уровней одним цветом. Запятая означает «и тот, и другой, и третий».

Цвет текста

Цвет текста задаёт свойство color. Оно применяется к содержимому элемента:

h1 {
  color: teal;
}

Заголовок станет бирюзовым. Свойство color наследуется: если задать цвет для body, его унаследуют все вложенные элементы, у которых не задан свой цвет. Это удобно — можно задать основной цвет текста один раз для всей страницы.

Цвет фона

Цвет фона элемента задаёт свойство background-color. Фон заполняет всю площадь элемента, включая его внутренние отступы:

body {
  background-color: #f5f5f5;
}

h2 {
  background-color: #eaeaea;
}

Фон всей страницы станет светло-серым, а у заголовков h2 появится своя чуть более тёмная подложка. В отличие от color, фон не наследуется — каждый элемент по умолчанию прозрачен и показывает фон родителя, пока вы не зададите ему собственный.

Способы записи цвета

Цвет в CSS можно записать несколькими способами, и все они равноправны:

h1 { color: red; }                 /* по имени */
h1 { color: #ff0000; }             /* HEX-код */
h1 { color: rgb(255, 0, 0); }      /* RGB */

Именованные цвета (red, blue, teal, coral) удобны для быстрых экспериментов, но их выбор ограничен. HEX-код — самый распространённый формат: решётка и шесть шестнадцатеричных цифр, по паре на красный, зелёный и синий. RGB задаёт те же три компонента числами от 0 до 255. На практике чаще всего используют HEX, потому что дизайнеры отдают цвета именно в этом формате.

Все три записи выше дают один и тот же красный цвет — выбирайте тот формат, что удобнее в конкретной ситуации.

Применяем в проекте

Зададим лендингу аккуратную цветовую гамму. Сделаем фон страницы светлым, основной текст — тёмно-серым, а заголовки — фирменного синего цвета.

body {
  background-color: #f5f5f5;
  color: #333333;
}

h1, h2 {
  color: #1a3c8c;
}

Обновите страницу: фон светлый, текст мягкого тёмно-серого оттенка (он читается приятнее чистого чёрного), а оба заголовка — единого синего цвета. Мы задали основной цвет текста один раз для body, и абзацы унаследовали его автоматически. Лендинг стал выглядеть цельно.

Частые ошибки

• Путаница color и background-color.
  Первое — цвет текста, второе — цвет фона.
• Пропущенная решётка в HEX.
  Пишите #1a3c8c, а не 1a3c8c — без # цвет не примется.
• Опечатка в имени цвета.
  grey и gray работают оба, но darkgrey с опечаткой — уже нет.
• Ожидание наследования фона.
  background-color не наследуется; задавайте его тем элементам, которым нужен фон.

Итоги

Прекрасная работа — вы научились управлять цветом! Теперь вы выбираете элементы селектором по тегу, красите текст и фон и свободно записываете цвета именами, HEX-кодами и в формате RGB. Ваш лендинг получил продуманную цветовую гамму и выглядит гораздо профессиональнее.

Так держать! В следующем уроке мы научимся выбирать элементы точнее — с помощью классов, чтобы оформлять не «все абзацы сразу», а именно те, что нужно.