arey1983

7 лет назад

Академия: Курс Сodecademy - Learn HTML & CSS - Стилизация с помощью CSS (Цвета)

Всем доброго времени суток и хорошего настроения! Продолжаю изучать курс online-образовательного портала Сodecademy - "Learn HTML & CSS" в рамках проекта "Академия" от @ontofractal.

В данном уроке будут разбираться методы стилизации элементов с помощью CSS. В первой части будут представлены основные цветовые форматы и рассмотрены способы их применения в CSS.

Цвета в CSS

В предыдущей части данного курса мы познакомились с основами CSS, а именно узнали как связать файлы HTML и CSS вместе и как работает синтаксис CSS.

Также мы немного разработали такое важное свойство HTML-элементов, как - цвет. Ведь профессиональные сайты часто используют различные сочетания цветов, чтобы создать визуально привлекательный пользовательский интерфейс (UX).

В первой части этого урока мы узнаем, как использовать CSS для создания разноцветных и привлекательных веб-страниц.

Передний план и фон

Применяя свойства цветов в CSS мы можем влиять на следующие параметры дизайна веб-страницы:

С помощью CSS свойства color можно изменять цвет переднего плана.
Свойство CSS background-color изменяет цвет фона.

h1 {
color: Red;
background-color: Blue;
}

В приведенном выше примере текст заголовка будет отображаться красным цветом, а фон заголовка будет синим.

Именованные цвета

В последнем приведенном примере мы использовали такие цвета, как Red и Blue. В CSS эти цвета технически известны как именованные цвета. В общей сложности они представлены в 147 возможных вариантах.

К счастью, нам не обязательно их все запоминать! В Интернете доступно множество ресурсов, на которых представлены все именованные цвета в CSS.

Формат цвета - RGB

Хотя именованные цвета и представлены в 147 различных вариантах, но если учесть всю гибкость CSS, это недостаточное количество. Чтобы использовать весь спектр цветов, поддерживаемых CSS, мы можем применить формат RGB.

Формат RGB (Red, Green, Blue) работает, смешивая разные количества красного (R), зеленого (G) и синего (B). Каждый цвет (R, G или B) может принимать 1 из 256 возможных значений (от 0 до 255). Это дает 16 777 216 вариантов.

Чтобы при стилизации использовать формат RGB, нам необходимо указать значение rgb ().

h1 {
color: rgb(123, 20, 233);
background-color: rgb(99, 21, 127);
}

В приведенном выше примере три числа в круглых скобках представляют значения для R, G и B соответственно.

В Интернете есть множество ресурсов, известных как подборщики цветов, которые позволяют нам подобрать разные значения RGB.

Формат цвета - Hex

В CSS существует еще один способ для указания цвета - в виде шестнадцатеричного цветового кода (Hex).

h1 {
color: #09AA34;
}

При чтении слева направо каждая группа из двух символов отвечает за значение красного, зеленого и синего цветов соответственно. В приведенном выше примере 09 относится к значению красного цвета, AA относится к значению зеленого цвета, а 34 - соответствует синему. Все шестнадцатеричные цветовые коды начинаются с символа - #.

Если шестнадцатеричный цветовой код состоит из одинаковых символов, его размер может быть сокращен, например:

h1 {
color: #FFFFFF;
color: #FFF;
}

h2 {
color: #AA33BB;
color: #A3B;
}

Формат цвета HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).

Оттенок - значение цвета на цветовом круге, которое задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.

Насыщенность - количество серого в заданном цвете, которое измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, а 100% -
максимальное значение насыщенности.

Светлота задает яркость цвета и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее. Крайнее значение 0% соответствуют чёрному цвету, а 100% - белому цвету.

Как видно из примера ниже, использование в CSS цветовой схемы HSL очень похоже на применение RGB.

h1 {
color: hsl(182, 20%, 50%);
}

Поскольку цветовая схема HSL реализована в новой спецификации CSS3, старые браузеры могут ее не поддерживать.

Форматы цвета - RGBA и HSLA

Форматы RGBA и HSLA похожи по синтаксису на RGB и HSL, но включают в себя alpha-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, а значение 1 - непрозрачности.

Пример применения формата RGBA:

h1 {
color: rgba(123, 88, 9, 0.5);
}

Пример применения формата HSLA:

h1 {
color: hsla(239, 45%, 22%, 0.4);
}

В приведенных выше примерах значение alpha (a) было установлено равным 0,5 и 0,4 соответственно.

Подводим итоги

Давайте посмотрим чему мы научились и что нового мы для себя узнали:

Свойство CSS color изменяет цвет переднего плана (фактический цвет элемента).
Свойство CSS background-color изменяет цвет фона.
Именованные цвета представлены в 147 возможных вариантах.
Форматы RGB и Heх предлагают более 16 миллионов вариантов различных цветов.
Формат HSL - новый способ определения цветов в CSS3.
Форматы RGBA и HSLA позволяют задать прозрачность элемента.

Свое мнение и личные впечатления

Очень понравился данный урок. В нем подробно и понятно расписаны форматы и свойства цветов, применяемых в CSS.

Оказывается их количество, применяемых в CSS - более 16 миллионов и их можно указывать в различных форматах. Также порадовала возможность задавать прозрачность цвета с помощью alpha-канала.

Предыдущие части курса Сodecademy - "Learn HTML & CSS"

1. Основы HTML

2. HTML-контент

3. Основы CSS

Конспект подготовлен для Академии Голоса @academy.

Академия: Курс Сodecademy - Learn HTML &amp; CSS - Стилизация с помощью CSS (Цвета)