ГРУППА КУРСА
|
Главная >
Учебник CSS >
Установка цвета в CSSРазличным объектам на странице часто нужно указать цвет. Это можно сделать способами, которые рассмотрены в данной теме. Также мы рассмотрим, как установть в CSS прозрачный цвет элемента. Название цветаСуществуют стандартные веб-цвета, которые имеют свои названия. Для их использования нужно указать название цвета. Например, чтобы задать текстовому элементу зелёный цвет, нужно установить ему такой стиль:
Чтобы найти таблицу веб-цветов, достаточно в любом поисковике набрать: веб-цвета. Система RGBСистема RGB - это способ установки цвета с помощью совмещения трёх цветов - красного, зелёного и синего. Указывая интенсивность каждого из этих цветов, получается конкретный цвет. Для установки цвета в CSS свойстве сначала пишется слово rgb, а затем в скобках указываются три числа через запятую:
Каждое число может иметь значение от 0 до 255. 0 - это минимальная интенсивность, а 255 - максимальная. Например, чтобы установить тексту такой цвет, нужно указать ему следующий стиль:
Вместо чисел можно указывать проценты, 0% - это минимальная интенсивность, 100% - максимальная интенсивность. Тот же цвет можно получить, если установить стиль так:
RGBARGBA - это такой же способ установки цвета, что и RGB. Но у него есть ещё одно число - альфа канал. Это степень прозрачности. Он позволяет установить в CSS порзрачный цвет, то есть сделать элемент прозрачным. При этом через элемент можно видеть фон блока или другой элемент, который оказался под текущим элементом при позиционировании. Прозрачность может иметь значения от 0 до 1. При 1 элемент является непрозрачным. При 0 элемент является полностью прозрачным, то есть, его не видно. Любое число между этими значениями делает элемент прозрачным. Для установки цвета в CSS свойстве пишется слово rgba, затем в скобках через запятую указываются цвета и прозрачность. Чтобы сделать текст таким же цветом, но прозрачным, стиль нужно установить так:
Код в шестнадцатиричной системеВ CSS цвет можно установить с помощью числа в шестнадцатиричной системе счисления. Число состоит из шести знаков.
Перед числом ставится знак #. Чтобы устаносить такой же цвет текста, стиль нужно указать так:
Если в каждом из трёх значений цвета знаки повторяются, то цвет можно задать не шестизначным числом, а трёхзначным. Для примера установим разными способами один и тот же цвет:
В коде цвета буквы могут быть как большими, так и маленькими. Система HSLПри установке цвета в системе HSL, указываются три параметра - оттенок, насыщенность и осветление. Оттенок определяется на основе цветового кгруга. Он указывается в градусах от 0 до 360. 0 градусов соответствует самому верху круга. При этом, никаких знаков ставить не нужно, указывается просто число. Цветовой круг: Насыщенность определяет яркость цвета. Она указывается в процентах от 0 до 100. Осветление может сделать цвет более светлым или более тёмным. Указывается также в процентах. Для установки цвета пишется слово hsl, затем в скобках перечисляются параметры. Чтобы задать тексту тот же цвет, нужно указать ему следующий стиль:
HSLAHSLA - это способ установки цвета, при котором так же, как и при RGBA, есть альфа канал, устанавливающий прозрачный цвет элемента. Прозрачность также принимает значения от 0 до 1. Для установки цвета пишется слово hsla, затем в скобках указываются параметры и прозрачность. Чтобы сделать текст таким же цветом, но при этом прозрачным, ему нужно установить такой стиль:
Подбор цветаПодобрать нужный цвет можно, используя графический редактор. Например, в Photoshop для выбранного цвета показываются параметры во всех рассмотренных системах. Многие другие редакторы имеют подобную функцию. Современные редакторы кода тоже помогают подобрать цвет, когда вы работаете с файлом в формате css. В том числе, Visual studio code даёт такую возможность. Если вам нужен цвет элемента другого сайта, то вы можете найти этот элемент с помощью средств разаработки, которые есть в браузерах. В свойствах элемента вы найдёте нужный цвет. |