).
Приведем пример
Синий цвет текста
Зеленый цвет текста
Синий цвет текста
Зеленый цвет текста
Если текст не изменяет свой цвет, то можно попробовать воспользоваться декларацией!important
Синий цвет текста
Также стоит чистить кэш браузера после каждого внесения изменения в файлы стилей.css.
Способ 3. Через стили CSS
Самый лучший способ поменять цвет текста на сайте это воспользоваться возможностями CSS-таблиц. Их можно подключать на сайт, а далее изменять значения в одном месте и внесенные поправки будут отображаться на всем сайте сразу.
Модуль CSS color подробно описывает значения, которые позволяют авторам определять цвета и непрозрачность html-элементов, а также значения свойства color .
Свойство color
1. Приоритетные цвета: свойство color
Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство описывает цвет текстового содержимого элемента. Кроме того, оно используется для предоставления потенциального косвенного значения (currentColor) для любых других свойств, которые принимают значения цвета.
Свойство наследуется.
2. Значения цвета
2.1. Основные ключевые слова
Список основных ключевых слов включает в себя следующие значения:
Название
|
HEX
|
RGB
|
Цвет
|
---|
black
|
#000000
|
0,0,0
|
|
silver
|
#C0C0C0
|
192,192,192
|
|
gray
|
#808080
|
128,128,128
|
|
white
|
#FFFFFF
|
255,255,255
|
|
maroon
|
#800000
|
128,0,0
|
|
red
|
#FF0000
|
255,0,0
|
|
purple
|
#800080
|
128,0,128
|
|
fuchsia
|
#FF00FF
|
255,0,255
|
|
green
|
#008000
|
0,128,0
|
|
lime
|
#00FF00
|
0,255,0
|
|
olive
|
#808000
|
128,128,0
|
|
yellow
|
#FFFF00
|
255,255,0
|
|
navy
|
#000080
|
0,0,128
|
|
blue
|
#0000FF
|
0,0,255
|
|
teal
|
#008080
|
0,128,128
|
|
aqua
|
#00FFFF
|
0,255,255
|
|
Названия цветов не чувствительны к регистру.
Синтаксис
Color: teal;
2.2. Числовые значения цвета
2.2.1. Цвета модели RGB
Формат значения RGB в шестнадцатеричном формате — это знак # , за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная запись RGB #rgb преобразуется в шестизначную форму #rrggbb путем копирования цифр, а не путем добавления нулей. Например, #fb0 расширяется до #ffbb00 . Это гарантирует, что белый #ffffff может быть указан в короткой записи #fff , и удаляет любые зависимости от глубины цвета дисплея.
Формат значения RGB в функциональной нотации — rgb(, за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует символ) . Целочисленное значение 255 соответствует 100% и F или FF в шестнадцатеричной записи:
Rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF
Символы пробела допускаются вокруг числовых значений.
В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.
P {
color: #211C18;
}
В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.
Шестнадцатеричные цвета (hex)
Шестнадцатеричная система счисления (hexadecimal, hex
) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.
Сокращенная запись hex-цветов
Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.
Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.
Примеры сокращенной записи hex-цветов:
HEX-код
|
Сокращенная запись
|
---|
#FFDD66
|
#FD6
|
#8833FF
|
#83F
|
#333333
|
#333
|
#cccccc
|
#ccc
|
Цветовая модель RGB
Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:
P {
color: rgb(0, 255, 0);
}
А вот желтовато-горчичный оттенок имеет такое значение:
Color: rgb(94, 81, 3);
/* ниже – тот же цвет, записанный в шестнадцатеричном виде: */
color: #5E5103;
Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:
Color: rgb(100%, 100%, 100%);
Где искать значения цветов
Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC .
Цветовая модель RGBA
Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:
P {
color: rgba(94, 81, 3, .9);
}
Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:
P {
color: rgb(94, 81, 3);
color: rgba(94, 81, 3, .9);
}
Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.
Цветовые модели HSL (HSLA)
Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:
P {
color: hsl(165, 100%, 50%);
}
Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:
Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.
Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:
P {
color: hsla(165, 100%, 50%, .6);
}
HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.
Стандартные цвета HTML
Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:
P {
color: black;
}
Существует 16 стандартных цветов, которые можно записать в значении свойства color:
Ключевое слово цвета
|
HEX-код
|
RGB
|
---|
red
|
#FF0000
|
255, 0, 0
|
maroon
|
#800000
|
128, 0, 0
|
yellow
|
#FFFF00
|
255, 255, 0
|
olive
|
#808000
|
128, 128, 0
|
lime
|
#00FF00
|
0, 255, 0
|
green
|
#008000
|
0, 128, 0
|
aqua
|
#00FFFF
|
0, 255, 255
|
teal
|
#008080
|
0, 128, 128
|
blue
|
#0000FF
|
0, 0, 255
|
navy
|
#000080
|
0, 0, 128
|
fuchsia
|
#FF00FF
|
255, 0, 255
|
purple
|
#800080
|
128, 0, 128
|
white
|
#FFFFFF
|
255, 255, 255
|
silver
|
#C0C0C0
|
192, 192, 192
|
gray
|
#808080
|
128, 128, 128
|
black
|
#000000
|
0, 0, 0
|
Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C .
Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.
Итоги
В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.
Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.
В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html
, нужно применить атрибут color тега :
Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
Урок 6. Изменяем цвет текста
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Посмотрим результат в браузере:
Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
Урок 6. Изменяем цвет текста
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Сохраним файл и посмотрим на результат:
Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
Задаем тексту несколько параметров
Задаем тексту шрифт, размер и цвет
Задаем тексту шрифт, размер и цвет
В HTML цвет можно задавать тремя способами:
Задание цвета в HTML по его названию
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:
Цвет текста – красный
Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):
Цвет
| Название
| Цвет
| Название
| Цвет
| Название
| Цвет
| Название
|
---|
| Black
|
| Gray
|
| Silver
|
| White
|
| Yellow
|
| Lime
|
| Aqua
|
| Fuchsia
|
| Red
|
| Green
|
| Blue
|
| Purple
|
| Maroon
|
| Olive
|
| Navy
|
| Teal
|
Пример использования различных цветовых названий:
Пример: задание цвета по его названию
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Задание цвета с помощью RGB
При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red)
, G — зеленый (green)
, В — синий (blue)
. Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255.
Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:
Пример: Задание цвета с помощью RGB
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Задание цвета по шестнадцатеричному значению
Значения R
G
B
также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки #
, например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки #
можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.
Пример: Цвет HEX
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный+зеленый=желтый: #FFFF00
красный+синий=фиолетовый: #FF00FF
зеленый+синий=голубой: #00FFFF
Список широко распространённых цветов (название, HEX и RGB):
Английское название
|
Русское название
|
Образец
|
HEX
|
RGB
|
---|
Amaranth
|
Амарантовый
|
|
#E52B50
|
229
|
43
|
80
|
---|
Amber
|
Янтарный
|
|
#FFBF00
|
255
|
191
|
0
|
---|
Aqua
|
Сине-зеленый
|
|
#00FFFF
|
0
|
255
|
255
|
---|
Azure
|
Лазурный
|
|
#007FFF
|
0
|
127
|
255
|
---|
Black
|
Черный
|
|
#000000
|
0
|
0
|
0
|
---|
Blue
|
Синий
|
|
#0000FF
|
0
|
0
|
255
|
---|
Bondi Blue
|
Вода пляжа Бонди
|
|
#0095B6
|
0
|
149
|
182
|
---|
Brass
|
Латунный
|
|
#B5A642
|
181
|
166
|
66
|
---|
Brown
|
Коричневый
|
|
#964B00
|
150
|
75
|
0
|
---|
Cerulean
|
Лазурный
|
|
#007BA7
|
0
|
123
|
167
|
---|
Dark spring green
|
Тёмный весенне-зелёный
|
|
#177245
|
23
|
114
|
69
|
---|
Emerald
|
Изумрудный
|
|
#50C878
|
80
|
200
|
120
|
---|
Eggplant
|
Баклажановый
|
|
#990066
|
153
|
0
|
102
|
---|
Fuchsia
|
Фуксия
|
|
#FF00FF
|
255
|
0
|
255
|
---|
Gold
|
Золотой
|
|
#FFD700
|
250
|
215
|
0
|
---|
Gray
|
Серый
|
|
#808080
|
128
|
128
|
128
|
---|
Green
|
Зелёный
|
|
#00FF00
|
0
|
255
|
0
|
---|
Indigo
|
Индиго
|
|
#4B0082
|
75
|
0
|
130
|
---|
Jade
|
Нефритовый
|
|
#00A86B
|
0
|
168
|
107
|
---|
Lime
|
Лайм
|
|
#CCFF00
|
204
|
255
|
0
|
---|
Malachite
|
Малахитовый
|
|
#0BDA51
|
11
|
218
|
81
|
---|
Navy
|
Тёмно-синий
|
|
#000080
|
0
|
0
|
128
|
---|
Ochre
|
Охра
|
|
#CC7722
|
204
|
119
|
34
|
---|
Olive
|
Оливковый
|
|
#808000
|
128
|
128
|
0
|
---|
Orange
|
Оранжевый
|
|
#FFA500
|
255
|
165
|
0
|
---|
Peach
|
Персиковый
|
|
#FFE5B4
|
255
|
229
|
180
|
---|
Pumpkin
|
Тыква
|
|
#FF7518
|
255
|
117
|
24
|
---|
Purple
|
Фиолетовый
|
|
#800080
|
128
|
0
|
128
|
---|
Red
|
Красный
|
|
#FF0000
|
255
|
0
|
0
|
---|
Saffron
|
Шафрановый
|
|
#F4C430
|
244
|
196
|
48
|
---|
Sea Green
|
Зелёное море
|
|
#2E8B57
|
46
|
139
|
87
|
---|
Swamp green
|
Болотный
|
|
#ACB78E
|
172
|
183
|
142
|
---|
Teal
|
Сине-зелёный
|
|
#008080
|
0
|
128
|
128
|
---|
Ultramarine
|
Ультрамариновый
|
|
#120A8F
|
18
|
10
|
143
|
---|
Violet
|
Фиолетовый
|
|
#8B00FF
|
139
|
0
|
255
|
---|
Yellow
|
Жёлтый
|
|
#FFFF00
|
255
|
255
|
0
|
---|
Коды цветов (фон) по насыщенности и оттенку.