Свойства цвета
CSS имеет несколько опций для определения цвета текста и фоновых областей на веб-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом HTML, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц предлагая более простые и удобные варианты управления цветом.
В табл. 1 перечислены свойства элементов, предназначенных для задания цвета.
Установка цвета
Цвет, используя CSS, можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию (пример 1).
Пример 1. Установка цвета элемента по его названию
Lorem ipsum dolor sit amet.
2. По шестнадцатеричному значению
Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML (пример 2).
Пример 2. Установка цвета элемента по шестнадцатеричному значению
H1 < color: #fc0; >P Lorem ipsum
Lorem ipsum dolor sit amet.
Также допустимо использовать сокращенную запись, вроде #fc0 . Она означает, что каждый символ дублируется, в итоге получим #ffcc00 .
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении (пример 3).
Пример 3. Установка цвета элемента по шестнадцатеричному значению
P Lorem ipsum dolor sit amet.
Установка цвета фона и фонового рисунка
Цвет фона определяется значением свойства background-color , а изображение, которое используется в качестве фона, задается свойством background-image . Значением по умолчанию для цвета фона является transparent , которое устанавливает прозрачный фон. Для установки фонового рисунка используется абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно фоновый рисунок и цвет фона, который будет использоваться в случае недоступности файла изображения.
Пример 4. Цвет фона и фоновое изображение
Lorem ipsum dolor sit amet.
Если задано фоновое изображение, то свойство background-repeat определяет его повторяемость и способ, как это делать. Допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали) и no-repeat (только один рисунок, без повторения), как показано в примере 5.
Пример 5. Повторяемость фонового рисунка
Lorem ipsum dolor sit amet.
В данном примере фоновый рисунок повторяется по горизонтали.
Положение фона определяется свойством background-position . У него два значения, положение по горизонтали (может быть — right , left , center ) и вертикали (может быть — top , bottom , center ). Положение можно, также, задавать в процентах, пикселах или других абсолютных единицах (пример 6).
Lorem ipsum dolor sit amet.
В данном примере фон будет помещен в правый нижний угол страницы. Если нужно определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position: left top .
Свойство background-attachment: fixed фиксирует фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.
color
Свойство, чтобы покрасить текст в разные цвета. Богатое разнообразие доступных значений.
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство color задаёт цвет текста.
Пример
Скопировать ссылку «Пример» Скопировано
Наследует значение свойства color у ближайшего родителя, у которого оно указано:
.element color: currentColor;>.element color: currentColor; >
Задаёт значение по названию цвета:
.element color: red; color: orange; color: tan; color: rebeccapurple;>.element color: red; color: orange; color: tan; color: rebeccapurple; >
HEX-код цвета, 3- или 6-символьные для сплошных и 4- и 8-символьные для полупрозрачных:
.element color: #090; color: #009900; color: #090a; color: #009900aa;>.element color: #090; color: #009900; color: #090a; color: #009900aa; >
Значение RGB в старом синтаксисе rgb для сплошных и rgba для полупрозрачных:
.element color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6);>.element color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6); >
Значение RGB в новом синтаксисе rgb для сплошных и для полупрозрачных:
.element color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%);>.element color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%); >
Значение HSL в старом синтаксисе hsl для сплошных и hsla для полупрозрачных:
.element color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%);>.element color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%); >
Значение HSL в новом синтаксисе hsl для сплошных и для полупрозрачных:
.element color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%);>.element color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); >
Как понять
Скопировать ссылку «Как понять» Скопировано
Любому элементу веб-страницы можно задать свой цвета текста. Свойство color задаёт его для текста, а также для элементов его оформления, например, подчёркивания, линии над текстом, перечёркивания и других.
Чтобы задать фон текста, используйте свойство background — color , а рамки элемента можно раскрасить с помощью border — color .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Цвет можно задать с помощью названия цвета, в формате HEX, RGB, HSL или с помощью ключевых слов. Подробно о возможных значениях можно прочитать в статье «Цвета в вебе».
Название цвета
Скопировать ссылку «Название цвета» Скопировано
Можно использовать название цвета или его оттенка на английском из списка именованных цветов. Это базовый набор непрозрачных цветов, например, красный red , синий blue , оранжевый orange , чёрный black , тёмно-серый darkgray , светло-серый, lightgrey , белый white , а также смешанные цвета, вроде цвета морской волны lightseagreen , василькового cornflowerblue или томатного tomato .
HEX-код
Скопировать ссылку «HEX-код» Скопировано
Шестнадцатеричный код цвета в цветовой модели RGB, который начинается с # , например, #ff0000 . Сплошные цвета записываются в формате # R R G G B B или в сокращённом # R G B (если символы каждой группы одинаковые). Например #009900 или #090 . Если нужно указать прозрачность, она добавляется в конце в HEX-формате # R R G G B B A A или # R G B A , например #00990055 или #0905 .
Раньше нельзя было задать цвет в нотации # R G B A и приходилось использовать функцию rgba ( ) , но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию rgb ( ) , где прозрачность можно задать в дробях или процентах.
Формат RGB
Скопировать ссылку «Формат RGB» Скопировано
Для задания цвета используется функция rgb ( ) , например, rgb ( 0 63 255 ) для синего. Каждое из трёх значений отвечает за отдельный канал RGB и может быть записано числом от 0 до 255 или в процентах. Для добавления прозрачности, после записи каналов нужно поставить слэш и записать нужное значение от 0 до 1 или в процентах, например rgb ( 0 63 255 / 0 . 5 ) для полупрозрачного синего.
Раньше синтаксис RGB отличался от современного и вы всё ещё можете встретить его в коде или выбрать для лучшей кроссбраузерности, см. Can I use. Для разделения каналов внутри функции нужно было использовать запятые rgb ( 0 , 63 , 255 ) , а для добавления прозрачности — специальную функцию rgba ( ) , которая принимала последним параметром прозрачность цвета, например rgba ( 255 , 0 , 0 , 0 . 5 ) .
Формат HSL
Скопировать ссылку «Формат HSL» Скопировано
Цветовая модель HSL описывает те же цвета, что и HSL, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl ( 120 100 % 50 % ) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единицы 120deg , второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb , с помощью слэша со значением, например hsl ( 120 100 % 50 % / 0 . 5 ) полупрозрачный зелёный.
Синтаксис hsl ( ) отличался от современного точно так же, как rgb ( ) : нужны были запятые и специальная функция hsla ( ) для задания прозрачности цвета. Используйте старый синтаксис для лучшей совместимости и не удивляйтесь, если встретите его в коде.
Ключевые слова
Скопировать ссылку «Ключевые слова» Скопировано
Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb ( 0 0 0 / 0 ) , но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.
Полезные ссылки
Скопировать ссылку «Полезные ссылки» Скопировано
Лучше всегда доверять выбор цвета профессионалам, но иногда мы делаем проект для себя и нам нужно сделать хорошую подборку цветов для проекта. В этом случае лучше всего не изобретать велосипед, а воспользоваться уже подходящими опенсорсными подборками:
Или создать что-то своё, но под руководством профессионалов. Например:
И отдельно присмотритесь к сервисам, которые умеют подбирать безопасные цвета для людей с особенностями их восприятия:
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Ничего лучше чёрного текста на белом фоне пока не придумали. Или белого на чёрном, если читаешь ночью. Убедись, что цвет текста выглядит контрастно на заданном фоне, лучше даже проверить.
💡 Свойство цвета можно анимировать при помощи transition 🎉
💡 Если вам нужно задать полупрозрачный текст, используй значение с указанием альфа-канала. Не используй для этих целей opacity . Иначе при добавлении в элемент другого контента, например, иконки, он тоже станет полупрозрачным. Это, скорее всего, не входило в ваши планы.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Цвет текста — наследуемое свойство. Если на странице преобладает какой-то цвет, то его можно задать для селектора html . В этот цвет будет автоматически окрашен весь текст на странице.
🛠 Ключевое слово current Color нужно, чтобы использовать текущий или унаследованный цвет текста в других местах, где можно указать цвет фона, рамки и прочего, например:
Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока наследуют цвет от текста. Блок выше 👆 тоже наследует фоновый цвет от текста, для которого задано свойство «color».div class="parent"> Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока наследуют цвет от текста. div class="child">div> Блок выше 👆 тоже наследует фоновый цвет от текста, для которого задано свойство «color». div>
.parent color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;> .child background: currentColor; height: 110px;>.parent color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; > .child background: currentColor; height: 110px; >