Застосування кольору до елементів HTML за допомогою CSS
У CSS є чимало способів додавати кольори до елементів HTML задля створення бажаного вигляду сторінок. Цей посібник – ознайомлення, що знайомить з тим, як можна використовувати CSS для застосування кольорів до елементів HTML. У цьому посібнику наведено списки властивостей CSS, в чиїх значеннях задаються кольори, а також способи використання кольорів, як у таблицях стилів, так і без них.
[!NOTE] Важливо застосовувати кольори з розумом. Завжди обирайте доречні кольори, пересвідчуючись, що контраст між текстом і тлом достатній для прочитності, і завжди майте на увазі потреби людей з різними зоровими можливостями. Щоб дізнатися більше про кольори CSS як тип даних, перегляньте довідку Типу даних CSS
<color>
і Посібник з колірних значень CSS.
Властивості, що можуть приймати кольори
На рівні елементів, до всього в HTML може бути застосований колір. Погляньмо на різні сутності, візуалізовані на сторінці, як то текст, межі тощо. Будуть списки властивості CSS, які застосовують колір до кожної з них.
На фундаментальному рівні властивість color
визначає колір переднього плану вмісту елемента HTML, а властивість background-color
визначає колір фону елемента. Ці властивості можна використовувати практично на будь-якому елементі.
Текст
Щоразу, коли візуалізується елемент, ці властивості використовуються для з'ясування кольорів тексту, його фону та можливих прикрас тексту.
-
: Колір до застосування при нанесенні тексту та будь-яких прикрас тексту (наприклад, додавання підкреслень, надкреслень, перекреслень і так далі.
-
- : Колір тла тексту.
-
- : Задає ефект тіні, що застосовується до тексту. Серед параметрів тіні є базовий колір тіні (який потім розмивається і змішується з фоном на основі інших параметрів). Дивіться Тіні тексту, щоб дізнатися більше.
-
- : Усталеним кольором прикрас тексту (таких як підкреслення, перекреслення тощо) є
currentcolor
. Це ключове слово представляє поточне значення властивостіcolor
. Однак це значення можна перевизначити та використати для них інший колір, використовуючи властивістьtext-decoration-color
.
- : Усталеним кольором прикрас тексту (таких як підкреслення, перекреслення тощо) є
-
- : Колір для використання при візуалізації символів акцентів поруч з кожним символом тексту. Це використовується в основному при нанесенні тексту для східноазійських мов.
-
- : Колір для використання при нанесенні каретки (яку іноді звуть курсором введення тексту) всередині елемента. Це корисно лише в елементах, які можна редагувати, таких як
<input>
і<textarea>
, або елементах, атрибут HTMLcontenteditable
яких має значенняtrue
.
- : Колір для використання при нанесенні каретки (яку іноді звуть курсором введення тексту) всередині елемента. Це корисно лише в елементах, які можна редагувати, таких як
Рамки
Кожний елемент – це рамка з якогось роду вмістом, і на додачу до цього вмісту має фон і межі.
- Межі
Дивіться у розділі Меж список властивостей CSS, які можна використовувати для задання кольорів меж рамки елемента.
background-color
Колір фону для використання в областях елемента, де немає переднього вмісту.
box-shadow
Налаштовує внутрішню тінь і ефекти відкидання від рамки. Серед параметрів для кожної тіні присутній базовий колір тіні (який потім розмивається і змішується з фоном на основі інших параметрів).
column-rule-color
Колір для використання при нанесенні лінії, що розділяє колонки при використанні Багатоколонкового компонування CSS.
outline-color
Колір для використання при нанесенні окреслення навколо елемента. Це окреслення відрізняється від меж тим, що для нього не відводиться місце в документі. Окреслення не бере участі в рамковій моделі, накладаючись на інший вміст. Зазвичай окреслення використовується як ознака фокуса, показуючи, який елемент наразі має фокус і отримає події введення з клавіатури.
Межі
Навколо будь-якого елемента може бути нанесена межа. Базова межа елемента – це лінія, нанесена навколо країв вмісту елемента. Дивіться Рамкову модель, щоб дізнатися про відносини між елементами та їх межами, а також статтю Оформлення меж за допомогою CSS, щоб дізнатися більше про застосування стилів до меж.
Можна скористатися властивістю-скороченням border
, яка дає змогу налаштувати все, що стосується межі, за один раз (в тому числі неколірні особливості меж, як то їх ширину, стиль (суцільний, штриховий тощо) і так далі.
- Скорочення
border-color
Задає єдиний колір для використання на всіх сторонах межі елемента.
border-left-color
,border-right-color
,border-top-color
іborder-bottom-color
Дає змогу задати колір відповідної сторони межі елемента.
border-block-start-color
іborder-block-end-color
За допомогою цих властивостей можна задати колір, що використовується для нанесення меж, котрі розташовуються найближче до початку та кінця блоку, який оточується межею. У випадку використання письма зліва направо (так, як пишеться українська), блокова початкова межа – це верхній край, а блокова кінцева межа – нижній. Це відрізняється від рядкових початку та кінця, які є лівим та правим краями (відповідають тому, де починається та закінчується кожний рядок тексту в рамці).
border-inline-start-color
іborder-inline-end-color
Ці властивості дають змогу розфарбувати краї меж, розташовані найближче до початку та кінця початку ліній тексту всередині рамки. Яка саме сторона це буде – залежить від властивостей
writing-mode
,direction
іtext-orientation
, які зазвичай (але не завжди) використовуються для налаштування напрямку тексту відповідно до мови, яка відображається. Наприклад, якщо текст рамки візуалізується справа наліво, тоborder-inline-start-color
застосовується до правої сторони межі.
Задання кольорів як значень у списках стилів
Тепер, коли ви знаєте, які властивості CSS дають змогу застосовувати кольори до елементів, пора додавати кольори до ваших вебсайтів. Розгляньмо кілька прикладів використання кольорів у списку стилів. У цьому прикладі використовуються кілька властивостей, згаданих раніше, а концепція застосування кольорів у CSS однакова, незалежно від властивості.
Погляньмо спершу на результат, а потім перейдемо до коду, необхідного для його створення:
HTML
HTML, відповідальний за створення прикладу вище, показаний тут:
<div class="wrapper">
<div class="boxLeft">
<p>Це перша рамка.</p>
</div>
<div class="boxRight">
<p>Це друга рамка.</p>
</div>
</div>
Тут є елемент-обгортка <div>
, що містить два дочірніх елементи <div>
, кожен з яких має один дочірній абзац (<p>
). Кожному <div>
вмісту надається інакший вигляд.
CSS
Погляньмо на CSS, що створює результат вище, крок за кроком.
Примітка: У цьому прикладі використовуються кілька різних типів значень кольорів CSS, щоб продемонструвати їх використання. Це не рекомендується для промислового коду. При написанні CSS використовуйте найбільш інтуїтивний для вас та вашої команди тип значення.
.wrapper {
height: 110px;
padding: 10px;
display: flex;
gap: 10px;
text-align: center;
font:
28px "Marker Felt",
"Zapfino",
cursive;
border: 6px solid mediumturquoise;
}
div {
flex: 1;
}
Клас .wrapper
використовується для присвоєння стилів <div>
, що оточує весь інший вміст. Це задає висоту контейнера за допомогою height
, даючи ширині цього блокового елемента змогу залишитися на 100% відносно його батька. Задання display
зі значенням flex
і додавання 10px
проміжку
створює гнучкий контейнер для розміщення дочірніх елементів поруч з проміжками між собою. Значення flex
використовується для того, щоб дозволити гнучким дочірнім елементам збільшуватися для заповнення контейнера; це не впливає на сам гнучкий контейнер.
Цікавішим для нашої теми є використання властивості border
, що утворює межу навколо зовнішнього краю елемента. Ця межа – це суцільна лінія завширшки 6 пікселів, з іменованим кольором mediumturquoise
(середнім бірюзовим).
Усередині обгортки є ліва рамка та права рамка.
.boxLeft {
background-color: rgb(245 130 130);
outline: 2px solid darkred;
}
Клас .boxLeft
, що вживається для оформлення рамки зліва, задає колір фону та окреслення:
-
Колір фону рамки задається шляхом зміни значення властивості CSS
background-color
наrgb(245 130 130)
, із використанням функційного записуrgb()
. -
Для рамки визначено окреслення. На відміну від більш поширених
меж
,окреслення
взагалі не впливає на компонування; воно наноситься поверх того, що опинилося поза межами елемента, замість того, щоб отримувати відведене місце, як це відбувається зborder
. Тут окреслення – це суцільна темно-червона лінія завтовшки два пікселі. Зверніть увагу на використання ключового словаdarkred
при заданні кольору. -
Зауважте, що колір тексту не задається явно. Це означає, що значення
color
буде успадковано від найближчого елемента-контейнера, який визначає його. Усталено це чорний.
.boxRight {
background-color: hwb(270deg 63% 13%);
outline: 4px dashed #6e1478;
color: hsl(0deg 100% 100%);
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #8f8;
text-decoration: underline wavy #8f8;
text-shadow: 2px 2px 3px black;
}
[!NOTE] Стилі
text-decoration-*
включено окремо, оскільки Safari не підтримуєtext-decoration
як властивість-скорочення.
І нарешті, клас .boxRight
задає кілька стилів на рамці, що наноситься справа. Тоді встановлюються наступні кольори (з використанням п'яти різних способів визначення колірних значень):
background-color
задається за допомогою функційного записуhwb()
:hwb(270deg 63% 13%)
. Це середній фіолетовий колір.outline
рамки використовується для задання того, що вона повинна бути оточена лінією завтовшки чотири пікселі, яка має колір трохи глибшого фіолетового кольору, за допомогою шестицифрового значення#6e1478
.- Передній (текстовий) колір задається шляхом задання властивості
color
за допомогою функційного записуhsl()
:hsl(0deg 100% 100%)
. Це один з багатьох способів задання білого кольору. - Під текстом додається зелена хвиляста лінія, за допомогою скорочення
text-decoration
, разом з розгорнутим компонентом – для сумісності з різними браузерами. Використано 3-цифрове значенняhex-color
#8f8
, що еквівалентно#88ff88
. - Насамкінець, до тексту додається трошки тіні, за допомогою
text-shadow
. Параметрcolor
має значенняblack
, що є значеннямnamed-color
.
Використано п'ять різних способів запису кольору, щоб продемонструвати можливості. У реальному світі вам та вашій команді краще обрати певний спосіб запису кольору, щоб всі працювали з однаковим синтаксисом.
Інші способи використання кольорів
CSS – не єдина вебтехнологія, що підтримує кольори. Серед інших прикладів:
- API полотна HTML
Дає змогу наносити двовимірну графіку з бітовою картою на елемент
<canvas>
. Дивіться більше у нашому Підручнику з полотен.- SVG (Масштабована векторна графіка)
Дає змогу створювати зображення за допомогою команд, що наносять конкретні фігури, патерни та лінії. Команди SVG форматуються як XML, і можуть бути вбудовані безпосередньо в вебсторінку або розміщені на сторінці за допомогою елемента
<img>
, як будь-який інший тип зображення.- WebGL
Бібліотека вебграфіки – це API OpenGL, заснований на ES, для нанесення високопродуктивної двовимірної та тривимірної графіки у Вебі. Дивіться наш Підручник з WebGL, щоб дізнатися більше. Також дивіться WebGPU, наступника WebGL для сучасних графічних процесорів.
[!NOTE] Кілька вже застарілих атрибутів HTML приймали за значення кольори, наприклад,
bgcolor
таvlink
. Ці атрибути приймали лише значенняnamed-color
та трицифрові та шестицифрові значенняhex-color
.