Только до 4.12
Вечерний «Путь в ИТ» с Иваном Ургантом
Кнопка закрыть топ-бар
ГлавнаяБлогЦвета CSS: правила выбора и оформления
Цвета CSS
1 589
Время чтения: 10 минут

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

1 589
Время чтения: 10 минут
Сохранить статью:
Сохранить статью:

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

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

В статье рассказывается: 
  1. Объекты цвета в CSS
  2. Свойства цвета в CSS
  3. Способы задать цвет в CSS
  4. Установка цвета фона или фонового рисунка
  5. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

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

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

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

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

Текст

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

color

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

background-color

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

text-shadow

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

text-decoration-color

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

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

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

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

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.

ТОП-30 IT-профессий
2022 года с доходом
от 200 000 ₽
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

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

Александр Сагун
Александр Сагун
Исполнительный
директор Geekbrains
pdf иконка

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

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

doc иконка

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

pdf иконка

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb
doc 1,7mb
Уже скачали 16141 pdf иконка

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

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

color: rgb (205, 51, 255);

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

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

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

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

Кодировка 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 выглядят как семизначные наборы символов, всегда начинающиеся с #.

В каждой такой комбинации первые два числа после # определяют уровень красного, следующие два — уровень зеленого, последние два — уровень синего. В свою очередь каждая пара может принимать значения от 0 до 255. Эта система отличается от RGB только тем, что цвета задаются в шестнадцатеричной форме, а не в десятичной.

Наличие в паре одинаковых значений позволяет сократить код до одного символа, но при условии, что во всех остальных парах также имеются одинаковые символы. Так, код #ff0000 можно уменьшить до #f00, а подобное сокращение #bbff20 уже недопустимо.

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

color: #f00;

color: ##bbff20

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

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

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

Только до 5.12
Как за 3 часа
разбираться в IT
лучше, чем 90%
новичков и выйти на
доход в 200 000 ₽?
Приглашаем вас на бесплатный онлайн-интенсив «Путь в IT»! За несколько часов эксперты GeekBrains разберутся, как устроена сфера информационных технологий, как в нее попасть и развиваться.
Александр Волчек CEO GeekBrains

Интенсив «Путь в IT» поможет:

  • За 3 часа разбираться в IT лучше, чем 90% новичков.
  • Понять, что действительно ждет IT-индустрию в ближайшие 10 лет.
  • Узнать как по шагам c нуля выйти на доход в 200 000 ₽ в IT.
При регистрации вы получите в подарок:
pdf иконка

«Колесо компетенций»

Тест, в котором вы оцениваете свои качества и узнаете, какая профессия в IT подходит именно вам

doc иконка

«Критические ошибки, которые могут разрушить карьеру»

Собрали 7 типичных ошибок, четвертую должен знать каждый!

pdf иконка

Тест "Есть ли у вас синдром самозванца?"

Мини-тест из 11 вопросов поможет вам увидеть своего внутреннего критика

Хотите сделать первый шаг и погрузиться в мир информационных технологий? Регистрируйтесь и смотрите интенсив:
Только до 5 декабря
Осталось 17 мест

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

В качестве фона может использоваться изображение. Если необходимо лишь изменить цвет, в 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.

Оцените статью
Рейтинг: 5
( голосов 1 )
Поделиться статьей
Добавить комментарий

Забрать
гарантированный
подарок

Получите бесплатно подборку файлов от GeekBrains:

Осталось 17 мест

Поздравляем! Вы выиграли 4 курса по ИТ профессиям. Чтобы закрепить подарок и получить к нему доступ, заполните информацию в открывшемся окне

×
Петр Озеров
Петр Озеров печатает ...