Задаємо тексту шрифт, розмір та колір

Задаємо тексту шрифт, розмір та колір

У першій частині книги, в деяких прикладах, ми вже демонстрували, як встановити колір тексту в 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-квітів:

Колірна модель 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:

Ці кольори підтримують усі браузери. Крім них, є ще близько 130 додаткових ключових слів для різних відтінків кольорів. Повну таблицю цих кольорів можна побачити у довіднику W3C.

Використання таких ключових слів є допустимим, але є ризик, що якесь слово не сприйметься браузером. Тому замість ключових слів рекомендується записувати шістнадцятковий код кольору.

Підсумки

У CSS колір тексту задається за допомогою властивості color , яке значення можна записати кількома способами – у шістнадцятковому (hex) вигляді, у форматі RGB чи HSL чи вказавши ключове слово. Щоб уникнути неправильного відображення кольору, заданого за допомогою ключового слова, краще вказувати його значення hex.

Також можна задати елементу прозорість за допомогою альфа-каналу (формати RGBA і HSLA). При цьому варто враховувати, що браузер IE8 та його ранні версії не підтримують формати RGBA, HSL та HSLA.

У HTML колір можна задавати трьома способами:

Завдання кольору в HTML за його назвою

Деякі кольори можна задавати за їхньою назвою, використовуючи як значення назву кольору англійською мовою. Найпоширеніші ключові слова: black (чорний), white (білий), red (червоний), green (зелений), blue (синій) та ін.

Колір тексту – червоний

Найбільш популярні кольори стандарту Консорціуму Всесвітньої павутини (World Wide Web Consortium, W3C):

Приклад використання різних колірних назв:

Приклад: завдання кольору за назвою

• Спробуй сам »

Заголовок на червоному тлі

Заголовок на помаранчевому фоні

Заголовок на фоні лайм

Білий текст на блакитному тлі

Заголовок на червоному тлі

Заголовок на помаранчевому фоні

Заголовок на фоні лайм

Білий текст на блакитному тлі

Завдання кольору за допомогою 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):

Коди кольорів (фон) за насиченістю та відтінком.