Цвет текста и фона: Тренажер CSS

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

В этом тренажере вы попрактикуетесь в применении CSS свойств для изменения цвета текста и фона элементов веб-страницы. Вам будут представлены фрагменты HTML и CSS кода с пропусками. Ваша задача - заполнить пропуски, чтобы добиться желаемого визуального результата. Каждое задание сфокусировано на использовании различных способов задания цвета: именованные цвета, шестнадцатеричные коды, RGB и RGBA значения.

Список тем

Изменение цвета текста

Измените цвет текста в заголовке `<h1>` на красный. Используйте наиболее простой способ.

CSS

h1 {
  input1: input2;
}

                     h1 {
  input1: input2;
}

HTML

<h1>Заголовок</h1>

Используйте свойство `color` и ключевое слово `red` для задания красного цвета.

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

Результат

Сообщения

Выполнить

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

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

Изменение цвета фона

Сделайте фон параграфа `<p>` желтым. Используйте свойство `background-color`.

CSS

p {
  input1: input2;
}

                     p {
  input1: input2;
}

HTML

<p>Текст параграфа</p>

Используйте свойство `background-color` и ключевое слово `yellow`.

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

Результат

Сообщения

Выполнить

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

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

Использование HEX-кода

Задайте цвет текста для элемента с классом `"highlight"` с помощью HEX-кода `#0000FF` (синий цвет).

CSS

.highlight {
  input1: input2;
}

                     .highlight {
  input1: input2;
}

HTML

<p class="highlight">Этот текст должен быть синим.</p>

Используйте свойство `color` и укажите HEX-код цвета.

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

Результат

Сообщения

Выполнить

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

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

Использование RGB

Установите зеленый цвет фона для `div` с помощью RGB-значения `rgb(0, 128, 0)`.

CSS

div {
  input1: input2;
}

                     div {
  input1: input2;
}

HTML

<div>Этот блок должен иметь зеленый фон.</div>

Используйте свойство `background-color` и функцию `rgb()` с соответствующими значениями.

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

Результат

Сообщения

Выполнить

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

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

Использование RGBA

Сделайте фон элемента `<span>` полупрозрачным красным, используя RGBA-значение `rgba(255, 0, 0, 0.5)`.

CSS

span {
  input1: input2;
}

                     span {
  input1: input2;
}

HTML

<span>Этот текст на полупрозрачном красном фоне.</span>

Используйте свойство `background-color` и функцию `rgba()`, где последний параметр задает прозрачность (от 0 до 1).

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

Результат

Сообщения

Выполнить

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

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

Комбинирование цвета текста и фона

Задайте белый цвет текста и черный цвет фона для кнопки `<button>`. Используйте именованные цвета.

CSS

button {
  input1: input2;
  input3: input4;
}

                     button {
  input1: input2;
  input3: input4;
}

HTML

<button>Нажми меня</button>

Используйте свойства `color` и `background-color` с соответствующими ключевыми словами.

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

Результат

Сообщения

Выполнить

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

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

Применение стилей к нескольким элементам

Сделайте все параграфы `<p>` на странице с синим цветом текста и желтым фоном. Используйте групповой селектор.

CSS

input1 {
  color: input2;
 background-color: input3;
}

                     input1 {
  color: input2;
 background-color: input3;
}

HTML

<p>Параграф 1</p>
<p>Параграф 2</p>
<div>Не параграф</div>

Используйте селектор тега `p` для применения стилей ко всем параграфам.

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

Результат

Сообщения

Выполнить

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

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

Использование сокращенного свойства background

Установите для элемента `body` светло-серый фон, используя сокращенное свойство `background` и HEX код `#f0f0f0`.

CSS

body {
  input1: input2;
}

                     body {
  input1: input2;
}

HTML

<body>
  <h1>Заголовок</h1>
  <p>Текст</p>
</body>

Используйте свойство `background` и укажите HEX-код цвета.

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

Результат

Сообщения

Выполнить

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

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

Специфичность селекторов

Измените цвет текста в параграфе с классом `"special"` на красный, даже если у всех параграфов `<p>` уже установлен синий цвет.

CSS

p {
  color: blue;
}
input1 {
  input2: red;
}

                     p {
  color: blue;
}
input1 {
  input2: red;
}

HTML

<p>Обычный параграф</p>
<p class="special">Особый параграф</p>

Селектор класса (`.special`) имеет более высокий приоритет, чем селектор тега (`p`).

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

Результат

Сообщения

Выполнить

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

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

Наследование стилей

Установите для `body` цвет текста `green`. Убедитесь, что все дочерние элементы наследуют этот цвет, если он не переопределен явно.

CSS

body {
  input1: input2;
}

h1 {
  /* Стили для h1 */
}

                     body {
  input1: input2;
}

h1 {
  /* Стили для h1 */
}

HTML

<body>
  <h1>Заголовок</h1>
  <p>Текст параграфа</p>
  <span>Текст внутри span</span>
</body>

Свойство `color` наследуется дочерними элементами.

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

Результат

Сообщения

Выполнить

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

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

Переопределение наследования

Установите для `body` цвет текста `green`. Переопределите цвет для тега `<h1>` на `blue`.

CSS

body {
  color: green;
}

h1 {
  input1: input2;
}

                     body {
  color: green;
}

h1 {
  input1: input2;
}

HTML

<body>
  <h1>Заголовок</h1>
  <p>Текст параграфа</p>
</body>

Задайте `color: green;` для `body` и `color: blue;` для `h1`.

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

Результат

Сообщения

Выполнить

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

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

Фон с изображением

Добавьте фоновое изображение `https://naytikurs.ru/img/1.png` для элемента `div` с классом `"container"`.

CSS

.container {
  input1: input2('https://naytikurs.ru/img/1.png');
  width: 200px; 
  height: 200px; 
}

                     .container {
  input1: input2('https://naytikurs.ru/img/1.png');
  width: 200px; 
  height: 200px; 
}

HTML

<div class="container"></div>

Используйте свойство `background-image` и функцию `url()`.

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

Результат

Сообщения

Выполнить

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

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