Фоновый цвет (background-color): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии упражнений вы попрактикуетесь в использовании CSS свойства `background-color` для изменения фонового цвета различных HTML-элементов. Задания построены от простого к сложному и помогут вам закрепить синтаксис и понять, как применять это свойство к разным селекторам. Вам нужно будет заполнить пропущенные части CSS кода, чтобы достичь нужного визуального результата.

Список тем

Фон для всей страницы

Измените фоновый цвет всей страницы на светло-серый (#f0f0f0). Для этого вам нужно применить стиль к основному элементу документа.

CSS

body {
  input1: #f0f0f0;
}

                     body {
  input1: #f0f0f0;
}

HTML

<body>
  <h1>Привет, мир!</h1>
  <p>Это простой пример страницы.</p>
</body>

Чтобы стилизовать всю страницу, используйте селектор `body`. Вам нужно указать свойство для задания фонового цвета и присвоить ему значение `#f0f0f0`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фон для блока по ID

Задайте синий фоновый цвет (#aaccff) для блока с идентификатором `main-block`. Найдите этот блок в HTML и примените к нему соответствующий стиль.

CSS

input1 {
  background-color: #aaccff;
  padding: 15px; /* Добавлено для наглядности */
}

                     input1 {
  background-color: #aaccff;
  padding: 15px; /* Добавлено для наглядности */
}

HTML

<div>
  <p>Этот блок не должен измениться.</p>
</div>
<div id="main-block">
  <p>Этот блок должен стать синим.</p>
</div>

Используйте селектор по ID (`#имя_id`) для выбора элемента. Затем примените свойство `background-color` со значением `#aaccff`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фон для элементов по классу

Сделайте фон всех элементов с классом `highlight` светло-зелёным (#d0f0c0). Обратите внимание, что таких элементов может быть несколько.

CSS

input1 {
  input2: #d0f0c0;
  padding: 5px; /* Добавлено для наглядности */
}

                     input1 {
  input2: #d0f0c0;
  padding: 5px; /* Добавлено для наглядности */
}

HTML

<div>
  <p class="highlight">Этот параграф нужно выделить.</p>
  <p>Этот параграф обычный.</p>
  <span class="highlight">И этот текст тоже выделить.</span>
</div>

Используйте селектор по классу (`.имя_класса`) для выбора всех элементов с этим классом. Затем примените свойство `background-color` со значением `#d0f0c0`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фон для заголовка

Задайте жёлтый фоновый цвет (#ffffcc) для заголовка `h2`. Найдите нужный селектор и свойство.

CSS

input1 {
  input2: #ffffcc;
  padding: 8px;
}

                     input1 {
  input2: #ffffcc;
  padding: 8px;
}

HTML

<body>
  <h1>Главный заголовок</h1>
  <h2>Подзаголовок страницы</h2>
  <p>Какой-то текст под заголовком.</p>
</body>

Используйте селектор тега (`h2`) для выбора заголовка. Примените свойство `background-color` со значением `#ffffcc`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Исправление синтаксиса

В коде есть ошибки синтаксиса. Исправьте их, чтобы применить оранжевый фон (#ffcc99) к элементу с классом `box`. Допишите недостающие символы.

CSS

.box input1
  background-color: #ffcc99 input2
  padding: 20px;
}

                     .box input1
  background-color: #ffcc99 input2
  padding: 20px;
}

HTML

<div class="box">
  Содержимое блока.
</div>

CSS правила заключаются в фигурные скобки `{}`. Каждое объявление свойства должно заканчиваться точкой с запятой `;`. Проверьте, все ли на месте.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фон для параграфа внутри блока

Задайте светло-фиолетовый фон (#e6e6fa) только для параграфов (`p`), которые находятся внутри элемента с ID `container`. Другие параграфы на странице не должны измениться.

CSS

input1 {
  background-color: #e6e6fa;
  padding: 5px;
}

                     input1 {
  background-color: #e6e6fa;
  padding: 5px;
}

HTML

<div id="container">
  <h2>Заголовок внутри контейнера</h2>
  <p>Этот параграф должен стать фиолетовым.</p>
</div>
<p>Этот параграф находится вне контейнера и не должен измениться.</p>

Используйте комбинатор потомков (пробел между селекторами), чтобы выбрать `p` только внутри `#container`. Например: `селектор_родителя селектор_потомка`. Затем примените свойство `background-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Завершение правила для фона

Допишите CSS правило, чтобы применить розовый фон (#ffebf0) к элементу `span` с классом `note`. Вам нужно указать свойство и завершить правило.

CSS

span.note {
  input1: #ffebf0;
  border: 1px solid #ccc; /* Добавлено для наглядности */
input2

                     span.note {
  input1: #ffebf0;
  border: 1px solid #ccc; /* Добавлено для наглядности */
input2

HTML

<p>Это обычный текст, а это <span class="note">важное примечание</span>.</p>

Используйте селектор `.note` (или `span.note` для большей точности). Добавьте свойство `background-color` со значением `#ffebf0;` и не забудьте закрывающую фигурную скобку `}`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фон и внутренний отступ

Для элемента с классом `padded-box` уже задан внутренний отступ (`padding`). Добавьте к этому правилу свойство, чтобы установить фоновый цвет `#e0f7fa` (светло-голубой).

CSS

.padded-box {
  padding: 25px;
  input1: #e0f7fa;
  border: 1px solid blue;
}

                     .padded-box {
  padding: 25px;
  input1: #e0f7fa;
  border: 1px solid blue;
}

HTML

<div class="padded-box">
  Этот блок имеет отступы и должен получить фон.
</div>

Найдите CSS правило для `.padded-box`. Внутри этого правила добавьте новое объявление: свойство `background-color` со значением `#e0f7fa;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фон для дочерних элементов

Задайте светло-коричневый фон (#f5f5dc) для всех непосредственных дочерних элементов `<li>` списка с ID `item-list`. Элементы `<li>` во вложенных списках не должны измениться.

CSS

input1 {
  background-color: #f5f5dc;
}

                     input1 {
  background-color: #f5f5dc;
}

HTML

<ul id="item-list">
  <li>Пункт 1</li>
  <li>Пункт 2
    <ul>
      <li>Вложенный пункт 2.1 (не менять фон)</li>
    </ul>
  </li>
  <li>Пункт 3</li>
</ul>

Используйте комбинатор дочерних элементов (`>`), чтобы выбрать только прямых потомков. Селектор будет выглядеть как `#item-list > li`. Затем примените свойство `background-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разные фоны для разных элементов

Задайте разные фоновые цвета: для `div` с классом `header` - цвет `#cceeff`, а для `div` с классом `footer` - цвет `#ccffcc`. Допишите недостающие свойства.

CSS

.header {
  input1: #cceeff;
  padding: 10px;
}

.footer {
  input2: #ccffcc;
  padding: 10px;
  margin-top: 10px;
}

                     .header {
  input1: #cceeff;
  padding: 10px;
}

.footer {
  input2: #ccffcc;
  padding: 10px;
  margin-top: 10px;
}

HTML

<div class="header">
  Это шапка сайта.
</div>
<div class="content">
  Основное содержимое...
</div>
<div class="footer">
  Это подвал сайта.
</div>

Вам нужно дописать свойство `background-color` в двух разных CSS правилах: одно для `.header`, другое для `.footer`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку