HEX-цвета

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

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

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

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

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

Например:

p {
    color: #FF0000; /* Красный */
    background-color: #00FF00; /* Зелёный */
}

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

p {
    color: #F00; /* Красный (эквивалент #FF0000) */
    background-color: #0F0; /* Зелёный (эквивалент #00FF00) */
}

Задание

Легко

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

Напишите правило CSS для элемента <h1>. Установите цвет фона — электрический фиолетовый, используя шестнадцатеричный код цвета #BF00FF.
Напишите правило CSS для элемента <h2>. Установите цвет фона — неоновый зелёный, используя #39FF14.
Напишите правило CSS для всех элементов <p>. Установите цвет фона — светло-серый, используя #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>