HEX-цвета

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

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

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

Вот базовый синтаксис для использования шестнадцатеричных (hex) цветов в 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>). Ваша задача — использовать шестнадцатеричные коды цветов для background colors. Следуйте инструкциям ниже:

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

Шпаргалка

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

Базовый синтаксис:

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

Пример:

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

Сокращенную запись можно использовать, когда обе цифры в каждой паре одинаковы:

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

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

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