Цвета CSS: правила выбора и оформления

Зачем нужны? Цвета в CSS необходимы для создания веб-страницы и оформления ее элементов: фона, шрифта, блоков и т.д. Механизм задействует пиксели мониторов и экранов, сообщая каждому из них необходимый оттенок.

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

Объекты цвета в CSS

Каждый элемент HTML обладает атрибутом цвета, присваивание которого может выполняться с помощью задания свойств CSS отдельным составляющим этого элемента (тексту, границам и др.).

В общем случае текст с точки зрения верстки HTML обладает свойством color, а фон элемента — свойством background-color. Здесь атрибуты задают цвет соответствующих параметров. Эти свойства могут применяться практически для каждого элемента.

Текст

Ниже будут даны свойства, определяющие цвет непосредственно текста, а также любых элементов оформления текста.

color

Задает не только цвета текста в CSS, но и оттенки подчеркивания, зачеркивания и подобных оформительских элементов.

background-color

Определяет цвет фоновой подложки.

text-shadow

Добавляет эффект тени для текстовых элементов, а также задает параметры этих теней. Например, данным свойством определяется основной цвет тени. Он путем задания дополнительных атрибутов смешивается с фоном определенным образом.

text-decoration-color

По умолчанию цвет всех элементов оформления текста наследуется от свойства color. Но его можно указать явно, прописав в параметре text-decoration-color. Таким образом, например, задается цвет ссылки в CSS.

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 32015

text-emphasis-color

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

caret-color

Задает цвет каретки (курсора), определяемой в свою очередь свойством caret. Может использоваться только по отношению к изменяемым объектам HTML (<input>, <textarea> и т. п.), а также к элементам с установленным атрибутом contenteditable.

Блоки

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

borders

Представляет собой целую группу свойств, присваивающих цвет границам блоков.

background-color

Задает фоновый цвет.

column-rule-color

Определяет цвет разделителей текстовых колонок.

outline-color

Данным свойством формируется цвет контура, в отличие от границ элемента не перекрывающего другой элемент. Например, таким контуром подсвечивается кнопка, находящаяся в фокусе.

Границы

Граница может быть создана вокруг содержимого любого объекта верстки. Все свойства границ можно задать одним общим свойством border. При этом определяется не только цвет, но и прочие характеристики линии, среди которых толщина (width) и начертание (style).

border-color

Этим свойством задается общий для всей границы цвет.

border-left-color, border-right-color, border-top-color, and border-bottom-color

А для задания цвета отдельно каждой стороне границы используются данные свойства (соответственно для левой, правой, верхней и нижней части).

border-block-start-color, border-block-end-color

Позволяют задать цвет границ, расположенных вблизи соответственно начала или конца блока (то есть, рядом с верхним или нижним краем блока для письма слева направо). Здесь следует делать различие с текстовой строкой, где ее левый край соответствует началу, а правый — концу строки.

border-inline-start-color, border-inline-end-color

Определяется цвет границы, находящейся ближе всего соответственно к началу либо концу текстового содержимого блока. Здесь начало и конец задаются свойствами writing-mode, direction и text-orientation. Это в большинстве случаев необходимо для задания направления текста. К примеру, когда текст идет справа налево, свойство border-inline-start-color будет устанавливать цвет для правого края.

Свойства цвета в CSS

Обычно свойством color задается цвет текстовых символов. Если необходимо закрасить большую площадь или фон, используется background-color. В частности, таким образом определяют цвет кнопки в CSS. Аналогичный элемент в формате SVG закрашивается при помощи свойства fill. Наконец, для задания параметров границ вокруг элементов верстки используют border (или stroke для элементов SVG).

• Тени

Контролируются свойствами text-shadow (для текста) и box-shadow (для блока). В первом случае задаются вертикальная и горизонтальная составляющая тени. Опционально свойство text-shadow может принимать и третий параметр — радиус рассеивания. Для блочных элементов дополнительно к этому задается необязательный параметр радиуса распространения. Помимо внешних теней имеется возможность создавать внутренние.

• Градиенты

Для задания линейного градиента цвета в CSS существуют параметры направления, точки изменения цвета и коэффициент прозрачности.

Подобным образом задаются градиенты для формата SVG. В этом случае формируется блок <linearGradient>. Для обращения к нему используется идентификатор.

Код выглядит следующим образом:

<linearGradient id=»Gradient»>

<stop id=»st1″ offset=»0″ stop-color=»white» stop-opacity=»0″ />

<stop id=»st2″ offset=»0.3″ stop-color=»black» stop-opacity=»1″ />

</linearGradient>

Имеется поддержка непрозрачности, дающей возможность создавать привлекательные эффекты.

Способы задать цвет в CSS

Выбор ключевого слова

Проще всего выбрать предопределенное имя цвета из списка ключевых слов CSS. Данный перечень насчитывает 147 таких слов, из которых 17 — заимствованные из HTML названия цветов: white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua, fuchsia, lime, maroon, navy, olive, teal. Остальные 130 были добавлены позднее в CSS версии 2.

Кодировка RGB (RGBA)

В системе RGB для кодирования цвета используются три цифры, соответственно определяющие процент красного, зеленого и синего. Итоговый цвет образуется смешением указанных. Для получения любого оттенка нужно каждой букве задать значение в диапазоне от 0 до 255. Так, темно-фиолетовый цвет имеет RGB код 204, 51, 255. Чтобы задать цвет шрифта в CSS, достаточно добавить эти значения в соответствующее свойство:

color: rgb (205, 51, 255);

Читайте также!

Блоки CSS: принципы вёрстки современных сайтов

Подробнее

Усовершенствованная система RGBA предполагает добавление четвертой цифры, ответственной за прозрачность цвета. Значение этого параметра изменяется в пределах от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Таким образом, полупрозрачный цвет будет иметь коэффициент 0,5. RGBA-код темно-фиолетового полупрозрачного оттенка выглядит внутри свойства CSS так:

color: rgba (204, 51, 255, 0.5);

Итак, система RGBA аналогична RGB, за исключением того, что добавляется четвертый параметр, определяющий степень прозрачности. Он называется альфа-каналом и позаимствован из графического дизайна.

Кодировка HSL

Данная система берет за основу такие характеристики цвета, как оттенок (hue), насыщенность (saturation) и уровень осветления (lightness). Этими тремя английскими словами и образована аббревиатура HSL. Переведем наш темно-фиолетовый цвет в этот формат и внесем его в свойство CSS:

color: hsl (285, 100%, 60%);

Итак, здесь первый параметр определяет угол оттенка в градусах на цветовом круге. Второе значение в процентах указывает насыщенность. В данном случае она максимально яркая. Уровень осветления дается также в процентах. Здесь этот показатель составляет 60% от максимального светлого тона.

Кодировка HSLA

Подобно системе RGBA в данную модификацию HSL добавляется альфа-канал, определяемый в диапазоне от 0 до 1. Полупрозрачный цвет также задается значением 0,5. Темно-фиолетовый цвет в таком формате выглядит следующим образом:

color: hsla (285, 100%, 60%, 0.5);

Шестнадцатеричная кодировка

Шестнадцатеричные коды цветов в CSS выглядят как семизначные наборы символов, всегда начинающиеся с #.

Дарим скидку от 60%
на обучение «Дизайнер» до 01 декабря

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

В CSS это используется так:

color: #f00;

color: ##bbff20

Следует иметь в виду, что в устаревших браузерах поддержка форматов RGBA и HSL может отсутствовать. Соответствующие объявления будут игнорироваться. Тогда в качестве фонового цвета задается значение по умолчанию (полностью прозрачный), а для текста либо назначается черный цвет, либо значение наследуется от родительского элемента.

Чтобы явным образом определить цвет для старых браузеров в RGB, в шестнадцатеричном формате или через ключевые слова, необходимо ввести дополнительное правило. Оно должно предшествовать непосредственно определяющему цвет правилу. Дело в том, что когда для одного и того же свойства устанавливается два правила, сперва выполняется последнее, а если оно не поддерживается — предыдущее. Таким образом обеспечивается своеобразная страховка в случае отсутствия поддержки.

Только до 28.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Установка цвета фона или фонового рисунка

В качестве фона может использоваться изображение. Если необходимо лишь изменить цвет, в CSS существует свойство background-color. А чтобы подгрузить фоновый рисунок, используют свойство background-image. Если ни один из этих параметров явным образом не задан, по умолчанию устанавливается значение transparent (прозрачный фон).

Рассмотрим применение данных свойств внутри кода HTML.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Фоновый цвет и фоновый рисунок</title>

<style type=»text/css»>

BODY {

background-color: #98560F; /* Задается цвет фона*/

background-image: url(images/bg.jpg); /* Определяется адрес фонового изображения */

}

</style>

</head>

<body>

<p>…</p>

</body>

</html>

Также существует свойство background-repeat. При наличии заданного фонового рисунка оно определяет, как часто это изображение будет повторяться для заполнения фона и каким образом. В свойстве используются следующие значения: repeat (размножение как в вертикальном, так и в горизонтальном направлениях), repeat-x (только по горизонтали), repeat-y (только по вертикали), no-repeat (рисунок не повторяется). Образец применения приведен ниже.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Фон</title>

<style type=»text/css»>

BODY {

background-image: url(images/gradient.png); /* Задается путь к изображению */

background-color: #b9c79a; /* Устанавливается фоновый цвет */

background-repeat: repeat-x; /* Задается заполнение фона по горизонтали */

}

</style>

</head>

<body>

<p>…</p>

</body>

</html>

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

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

Чтобы явно расположить фоновый рисунок в определенной области экрана, используют свойство background-position. Оно может фиксировать изображение по горизонтали справа, слева или по центру (right, left, center) либо по вертикали сверху, снизу или по центру (top, bottom, center). Кроме того, данное свойство принимает относительные значения в процентах и абсолютные значения в пикселях или в иных величинах.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Фон</title>

<style type=»text/css»>

BODY {

background-attachment: fixed; /* Фиксируется фон */

background-image: url(images/home.png); /* Задается адрес фонового изображения */

background-repeat: no-repeat; /* Отключается повторение фона */

background-position: right bottom; /* Определяется положение фонового рисунка */

}

</style>

</head>

<body>

<p>…</p>

</body>

</html>

Читайте также!

Полиморфизм: суть, проблемы применения

Подробнее

Здесь изображение, служащее фоном, располагается на странице внизу справа. Для перемещения его в левый верхний угол задается параметр свойства background-position: left top.

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование