HEX-цвета

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 26 из 76.

HEX-цвета — это способ задавать цвета с помощью шестнадцатеричных значений. Шестнадцатеричный код цвета — это шестизначный код, которому предшествует символ решётки (#) и который обозначает количество красного, green и синего света, из которых состоит цвет.

Каждая пара цифр в коде представляет интенсивность одного из этих основных цветов, изменяющуюся от 00 (отсутствие интенсивности) до FF (полная интенсивность). HEX-цвета предоставляют широкий выбор цветовых вариантов и широко используются в веб-дизайне.

Вот базовый синтаксис использования шестнадцатеричных цветов в CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Например:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

Вы также можете использовать сокращённую запись для HEX-цветов, когда обе цифры в каждой паре совпадают. Например:

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

Задание

Легко

Вам дан HTML-документ с двумя заголовками (<h1> и <h2>) и абзацем (<p>). Ваша задача — использовать шестнадцатеричные коды цветов для background colors. Выполните следующие шаги:

Напишите правило CSS для элемента <h1>. Установите background color равным electric purple, используя цветовой код #BF00FF.
Напишите правило CSS для элемента <h2>. Установите background color равным neon green, используя #39FF14.
Напишите правило CSS для всех элементов <p>. Установите background color равным light gray, используя #D3D3D3.

ТРЕБУЕМЫЙ ФОРМАТ ВЫВОДА: <translation> [Ваш переведённый контент здесь] </translation>

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

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>