Цвета CSS: правила выбора и оформления
Зачем нужны? Цвета в CSS необходимы для создания веб-страницы и оформления ее элементов: фона, шрифта, блоков и т.д. Механизм задействует пиксели мониторов и экранов, сообщая каждому из них необходимый оттенок.
Как задать? В CSS существует несколько способов задать цвет через наименование или с помощью необходимых значений. Второй метод также разделяется в зависимости от того, на какой браузер рассчитан показ изображения.
Объекты цвета в CSS
Каждый элемент HTML обладает атрибутом цвета, присваивание которого может выполняться с помощью задания свойств CSS отдельным составляющим этого элемента (тексту, границам и др.).
В общем случае текст с точки зрения верстки HTML обладает свойством color, а фон элемента — свойством background-color. Здесь атрибуты задают цвет соответствующих параметров. Эти свойства могут применяться практически для каждого элемента.
Текст
Ниже будут даны свойства, определяющие цвет непосредственно текста, а также любых элементов оформления текста.
Задает не только цвета текста в CSS, но и оттенки подчеркивания, зачеркивания и подобных оформительских элементов.
Определяет цвет фоновой подложки.
Добавляет эффект тени для текстовых элементов, а также задает параметры этих теней. Например, данным свойством определяется основной цвет тени. Он путем задания дополнительных атрибутов смешивается с фоном определенным образом.
По умолчанию цвет всех элементов оформления текста наследуется от свойства color. Но его можно указать явно, прописав в параметре text-decoration-color. Таким образом, например, задается цвет ссылки в CSS.
С помощью данного свойства определяется цвет, выделяющий диакритические знаки, которые прилегают к каждому символу. В основном параметр используется при работе с алфавитами восточноазиатских языков.
Задает цвет каретки (курсора), определяемой в свою очередь свойством caret. Может использоваться только по отношению к изменяемым объектам HTML (, и т. п.), а также к элементам с установленным атрибутом contenteditable.
Блоки
С точки зрения CSS любой элемент верстки представляется как прямоугольный блок, содержащий какое-то наполнение и имеющий фон и границы.
Представляет собой целую группу свойств, присваивающих цвет границам блоков.
Определяет цвет разделителей текстовых колонок.
Данным свойством формируется цвет контура, в отличие от границ элемента не перекрывающего другой элемент. Например, таким контуром подсвечивается кнопка, находящаяся в фокусе.
Границы
Граница может быть создана вокруг содержимого любого объекта верстки. Все свойства границ можно задать одним общим свойством border. При этом определяется не только цвет, но и прочие характеристики линии, среди которых толщина (width) и начертание (style).
Этим свойством задается общий для всей границы цвет.
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. В этом случае формируется блок . Для обращения к нему используется идентификатор.
Код выглядит следующим образом:
Имеется поддержка непрозрачности, дающей возможность создавать привлекательные эффекты.
Способы задать цвет в 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.
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ ресурсов об IT-сфере
Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT
ТОП 50+ сервисов и приложений от Geekbrains
Безопасные и надежные программы для работы в наши дни