Академия: Курс Сodecademy - Learn HTML & CSS - Стилизация с помощью CSS (Цвета)
![](https://img.golos.io/proxy/https://s26.postimg.org/872b2258p/html-css.jpg)
В данном уроке будут разбираться методы стилизации элементов с помощью CSS. В первой части будут представлены основные цветовые форматы и рассмотрены способы их применения в CSS.
Также мы немного разработали такое важное свойство HTML-элементов, как - цвет. Ведь профессиональные сайты часто используют различные сочетания цветов, чтобы создать визуально привлекательный пользовательский интерфейс (UX).
В первой части этого урока мы узнаем, как использовать CSS для создания разноцветных и привлекательных веб-страниц.
![](https://img.golos.io/proxy/https://s26.postimg.org/nbtgvec95/New-_Mind-_Map.jpg)
Передний план и фон
- С помощью CSS свойства
color
можно изменять цвет переднего плана. - Свойство CSS
background-color
изменяет цвет фона.
h1 {
color: Red;
background-color: Blue;
}
Именованные цвета
![](https://img.golos.io/proxy/https://s26.postimg.org/94ovafa89/colors.jpg)
К счастью, нам не обязательно их все запоминать! В Интернете доступно множество ресурсов, на которых представлены все именованные цвета в CSS.
Формат цвета - RGB
Формат RGB (Red, Green, Blue) работает, смешивая разные количества красного (R), зеленого (G) и синего (B). Каждый цвет (R, G или B) может принимать 1 из 256 возможных значений (от 0 до 255). Это дает 16 777 216 вариантов.
![](https://img.golos.io/proxy/https://s26.postimg.org/6jl6fxt3d/New-_Mind-_Map_1.jpg)
Чтобы при стилизации использовать формат RGB, нам необходимо указать значение rgb ().
h1 {
color: rgb(123, 20, 233);
background-color: rgb(99, 21, 127);
}
В Интернете есть множество ресурсов, известных как подборщики цветов, которые позволяют нам подобрать разные значения RGB.
Формат цвета - Hex
h1 {
color: #09AA34;
}
Если шестнадцатеричный цветовой код состоит из одинаковых символов, его размер может быть сокращен, например:
h1 {
color: #FFFFFF;
color: #FFF;
}
h2 {
color: #AA33BB;
color: #A3B;
}
Формат цвета HSL
![](https://img.golos.io/proxy/https://s26.postimg.org/52lqasww9/hsl-color-wheel-pagespeed-ce-if6-exzipy.jpg)
Насыщенность - количество серого в заданном цвете, которое измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, а 100% -
максимальное значение насыщенности.
Светлота задает яркость цвета и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее. Крайнее значение 0% соответствуют чёрному цвету, а 100% - белому цвету.
Как видно из примера ниже, использование в CSS цветовой схемы HSL очень похоже на применение RGB.
h1 {
color: hsl(182, 20%, 50%);
}
Поскольку цветовая схема HSL реализована в новой спецификации CSS3, старые браузеры могут ее не поддерживать.
Форматы цвета - RGBA и HSLA
Пример применения формата RGBA:
h1 {
color: rgba(123, 88, 9, 0.5);
}
Пример применения формата HSLA:
h1 {
color: hsla(239, 45%, 22%, 0.4);
}
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
- Свойство CSS
color
изменяет цвет переднего плана (фактический цвет элемента). - Свойство CSS
background-color
изменяет цвет фона. - Именованные цвета представлены в 147 возможных вариантах.
- Форматы RGB и Heх предлагают более 16 миллионов вариантов различных цветов.
- Формат HSL - новый способ определения цветов в CSS3.
- Форматы RGBA и HSLA позволяют задать прозрачность элемента.
Свое мнение и личные впечатления
Оказывается их количество, применяемых в CSS - более 16 миллионов и их можно указывать в различных форматах. Также порадовала возможность задавать прозрачность цвета с помощью alpha-канала.
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
Конспект подготовлен для Академии Голоса @academy.