Задаємо колір тексту. Атрибут кольору тега font. Настроювання кольору для тексту в CSS. Методи представлення кольорів Завдання кольору за допомогою RGB
У цій статті ми ознайомимося з можливостями HTML та CSS щодо зміни кольору тексту на сторінках сайту. Буде розглянуто декілька варіантів. Для кожного окремого випадку зручний свій конкретний спосіб.
Для початку відзначимо, що всі кольори можна задавати у трьох форматах:
- Назва кольору (red, blue, green тощо)
- Шістнадцятковий формат (#104A00, #0F0 і т.д.)
- Формат rgba (rgba(0,0,0,0.5) і т.д.)
На нашому сайті представлена повна палітра та назви html кольорів для сайту, де можна вибрати відповідний колір.
Спосіб 1. Через html тег
Самим простим способомзмінити колір тексту в html є використання тега . Він дозволяє змінити колір, розмір та стиль тексту. Для цього він має три атрибути. Синтаксис:
Наведемо приклад
Звичайний шрифт Синій шрифт Червоний шрифт більшого розміру
На сторінці перетворюється на наступне
Звичайний шрифт. Синій шрифт. А це червоний шрифт більшого розміру
Нова версія стандарту HTML5 його не підтримує. Але всі сучасні браузери розуміють і ще мабуть довго розумітимуть. Тег font поширений на сайтах. Що втім легко пояснити його доступністю та простотою.
Спосіб 2. Через атрибут style
Є другий схожий спосіб зміни кольору шрифту. Для цього є атрибут style, який можна застосовувати до будь-яких html тегів (
, , , , , , Наведемо приклад Синій колір тексту Синій колір тексту Зелений колір тексту Якщо текст не змінює свій колір, можна спробувати скористатися декларацією!important Синій колір тексту Також варто чистити кеш браузера після кожного внесення змін до файлів стилів .css. Самий кращий спосібзмінити колір тексту на сайті це скористатися можливостями CSS-таблиць. Їх можна підключати на сайт, а далі змінювати значення в одному місці та внесені поправки відображатимуться на всьому сайті відразу. У цьому уроці ми розглянемо останній атрибут тега , який визначає колір тексту. За промовчанням текст має чорний колір, який виводиться на білому тлі. Для того щоб змінити колір тексту в htmlпотрібно застосувати атрибут color тега : Для завдання кольору достатньо вказати назву, наприклад: red, green, blue. Розглянемо невеликий приклад:
Текст зеленого кольору Текст червоного кольору Текст фіолетового кольору Подивимося результат у браузері: Текст у першому абзаці став зеленим, у другому – червоним, а третьому – фіолетовим. Усього існує 16 назв основних кольорів та 130 додаткових. Повний списоккольорів ви можете переглянути в таблиці кольорів html. Цей спосіб позначення кольору дуже простий, але обмежений. Тому для того, щоб змінити колір у html – коді, частіше використовують шістнадцяткове число перед яким стоїть знак решітки (#), наприклад: За допомогою такого позначення можна отримати понад 16 мільйонів кольорів та їх відтінків! Отримати код кольору можна за допомогою , який є на сайті, або скориставшись палітрою кольорів у Photoshop. Розглянемо приклад і запишемо наступний код:
Текст зеленого кольору Текст червоного кольору Текст фіолетового кольору Збережемо файл і подивимося на результат: Як ви бачите, ми задали тексту ті ж кольори, як і в першому прикладі, тільки тут ми скористалися шістнадцятковою системою обчислення або іншими словами ми задали колір у форматі HEX. Тепер ви навчилися змінювати колір тексту в html і наприкінці уроку пропоную повторити всі атрибути тега , і задати тексту відразу кілька параметрів, а саме: шрифт, розмір та колір. Запишіть приклад:
Задаємо тексту шрифт, розмір та колір Задаємо тексту шрифт, розмір та колір Модуль CSS color докладно описує значення, які дозволяють авторам визначати кольори та непрозорість html-елементів, а також значення якості color. Властивість задає колір шрифту за допомогою різних системкольоропередачі. Властивість визначає колір текстового вмісту елемента. Крім того, воно використовується для надання потенційного непрямого значення (currentColor) для будь-яких інших властивостей, які набувають значення кольору. Властивість успадковується. Список основних ключових слів включає наступні значення: Назви кольорів не чутливі до регістру. Синтаксис Color: teal; Формат значення 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) та ключових слів. Ця інформація буде корисна новачкам та рекомендується до прочитання. Шістнадцяткова системачислення ( hexadecimal, hex) ґрунтується на числі 16. Для запису шістнадцяткового значення використовується 16 символів: арабські цифри від 0 до 9 і перші літери латинського алфавіту (A, B, C, D, E, F). Колір у шістнадцятковому форматі записується у вигляді трьох двозначних чисел від 00 до FF (перед ними обов'язково ставиться символ ґрат #), що відповідає трьом компонентам: Red, Green, Blue (колірна модель RGB). Інакше кажучи, запис кольору можна як #RRGGBB , де перша пара символів визначає рівень червоного, друга – рівень зеленого, третя – рівень синього цвета. Результуючий колір є поєднання цих трьох кольорів. Деякі шістнадцяткові значення кольорів можна записати скорочено. Для цього слід перетворити запис виду #RRGGBB на #RGB. Це можна зробити у тому випадку, коли в hex-числі є три пари однакових символів. Скорочена форма запису зустрічається досить часто, і для ознайомлення ми наведемо кілька прикладів скорочень. До речі, hex-значення кольорів не чутливі до регістру – ви можете використовувати як великі, так і малі літери, все залежить від вашого бажання та смаку. Приклади скороченого запису hex-квітів: Другий спосіб вказівки кольору 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 можна майже так само, як і 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, застосують до елемента другу властивість із прозорістю. Задавати колір у 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 та раніше. Ще один спосіб представлення квітів у веб – це ключові слова, за допомогою яких можна вказати колір елемента. Приклад: P ( color: black; ) Існує 16 стандартних кольорів, які можна записати у значенні якості color: Ці кольори підтримують усі браузери. Крім них, є ще близько 130 додаткових ключових слів для різних відтінків кольорів. Повну таблицю цих кольорів можна побачити у довіднику W3C. Використання таких ключових слів є допустимим, але є ризик, що якесь слово не сприйметься браузером. Тому замість ключових слів рекомендується записувати шістнадцятковий код кольору. У CSS колір тексту задається за допомогою властивості color , яке значення можна записати кількома способами – у шістнадцятковому (hex) вигляді, у форматі RGB чи HSL чи вказавши ключове слово. Щоб уникнути неправильного відображення кольору, заданого за допомогою ключового слова, краще вказувати його значення hex. Також можна задати елементу прозорість за допомогою альфа-каналу (формати RGBA і HSLA). При цьому варто враховувати, що браузер IE8 та його ранні версіїне підтримують формати RGBA, HSL та HSLA. У HTML колірможна ставити трьома способами: Деякі кольори можна задавати за їх назвою, використовуючи як значення назву кольору на англійській мові. Найпоширеніші ключові слова: black (чорний), white (білий), red (червоний), green (зелений), blue (синій) та ін.
Колір тексту – червоний Найбільш популярні кольори стандарту Консорціуму Всесвітньої павутини(англ. World Wide Web Consortium, W3C): Приклад використання різних колірних назв: При відображенні різних кольорів на моніторі за основу береться палітра RGB. Будь-який колір отримують, змішуючи три основні: R - червоний (red), G - зелений (green), В - синій (blue). Яскравість кожного кольору задається одним байтом і, отже, може набувати значення від 0 до 255. Наприклад, RGB (255,0,0) відображається як червоний, так як червоний встановлюється в його найвище значення (255), а інші встановлені в 0 Також можна задавати колір у відсотковому відношенні. Кожен із параметрів позначає рівень яскравості відповідного кольору. Наприклад: значення 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 та RGB): Коди кольорів (фон) за насиченістю та відтінком.,
,
Спосіб 3. Через стилі CSS
Властивість color
1. Пріоритетні кольори: якість color
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
2.2. Числові значення кольору
2.2.1. Кольори моделі RGB
Шістнадцяткові кольори (hex)
Скорочений запис hex-квітів
HEX-код
Скорочений запис
#FFDD66
#FD6
#8833FF
#83F
#333333
#333
#cccccc
#ccc
Колірна модель RGB
Де шукати значення кольорів
Колірна модель RGBA
Колірні моделі HSL (HSLA)
Стандартні кольори HTML
Ключове слово кольору
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
Підсумки
Завдання кольору в HTML за його назвою
Колір Назва Колір Назва Колір Назва Колір Назва
Black
Gray
Silver
White
Yellow
Lime
Aqua
Fuchsia
Red
Green
Blue
Purple
Maroon
Olive
Navy
Teal
Приклад: завдання кольору за назвою
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Завдання кольору за допомогою RGB
Приклад: Завдання кольору за допомогою RGB
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Завдання кольору за шістнадцятковим значенням
Приклад: Колір HEX
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний+зелений=жовтий: #FFFF00
червоний+синій=фіолетовий: #FF00FF
зелений+синій=блакитний: #00FFFF
Англійська назва
Російська назва
Зразок
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