HEX-цвета

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

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

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

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

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

Например:

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

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

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.

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

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

<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>