Главная страница   /   4.3. Работа с цветами в CSS (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

4.3. Работа с цветами в CSS

Цвета играют важную роль для веб страниц, и при использовании CSS можно указать цвета разными способами. Наиболее простым способом является использование одного из предопределенных названий цветов или использование десятичного или шестнадцатеричного значения для каждого из красного, зеленого и синего компонентов. Десятичные значения разделены запятыми, а шестнадцатеричные значения, как правило, начинаются с #, например #ffffff, что обозначает белый цвет. Вы можете увидеть некоторые из предопределенных названий цветов и их десятичные и шестнадцатеричные эквиваленты в таблице 4-3.

Таблица 4-3: Выбранные CSS цвета
Название цвета Шестнадцатеричное значение Десятичное значение
Черный #000000 0,0,0
Серебряный #C0C0C0 192,192,192
Серый #808080 128,128,128
Оливковый #808000 128,128,0
Белый #FFFFFF 255,255,255
Желтый #FFFF00 255,255,0
Красно-коричневый #800000 128,0,0
Глубокий синий #000080 0,0,128
Красный #FF0000 255,0,0
Синий #0000FF 0,0,255
Фиолетовый #800080 128,0,128
Темно-бирюзовый #008080 0,128,128
Темно-фиолетовый #FF00FF 255,0,255
Морской волны #00FFFF 0,255,255

Эти цвета известны как основные, также CSS определяет дополнительные цвета. Существует слишком много названий цветов, чтобы их здесь перечислить, но полный список можно найти на www.w3.org/TR/css3-color. Есть много новых оттенков, определяющих дополнительные цвета, в том числе небольшие вариации для цветов основного списка. Например, в таблице 4-4 показан используемый расширенный набор оттенков серого цвета.

Таблица 4-4: Выбранные CSS цвета
Название цвета Шестнадцатеричное значение Десятичное значение
темно-серый #a9a9a9 169,169,169
темно-синевато-серый #2f4f4f 47,79,79
тускло-серый #696969 105,105,105
серый #808080 128,128,128
светло-серый #d3d3d3 211,211,211
светло-синевато-серый #778899 119,136,153
аспидно-серый (сине-серый) #708090 112,128,144

Определение более сложных цветов

Названия цветов и простые шестнадцатеричные значения не являются единственным способом определения цвета. Есть целый ряд функций, которые позволяют вам выбрать цвет. В таблице 4-5 описана каждая из доступных функций.

Таблица 4-5: Функции для определения CSS цветов
Функция Описание Пример
rgb(r, g, b) Указывает цвет при помощи RGB модели. color: rgb(112, 128, 144)
rgba(r, g, b, a) Определяет цвет при помощи RGB модели с дополнительным альфа-значением для указания непрозрачности. Значение 0 обозначает полную прозрачность, а значение 1 – полную непрозрачность. color: rgba(112, 128, 144, 0.4)
hsl(h, s, l) Определяет цвет при помощи HSL (тон, насыщенность и светлота) модели. color: hsl(120, 100%, 22%)
hsla(h, s, l, a) То же самое, что и HSL, но с дополнительным альфа-значением для указания непрозрачности. color: hsla(120, 100%, 22%, 0.4)