Застосування кольору до елементів HTML за допомогою CSS

У CSS є чимало способів додавати кольори до елементів HTML задля створення бажаного вигляду сторінок. Цей посібник – ознайомлення, що знайомить з тим, як можна використовувати CSS для застосування кольорів до елементів HTML. У цьому посібнику наведено списки властивостей CSS, в чиїх значеннях задаються кольори, а також способи використання кольорів, як у таблицях стилів, так і без них.

[!NOTE] Важливо застосовувати кольори з розумом. Завжди обирайте доречні кольори, пересвідчуючись, що контраст між текстом і тлом достатній для прочитності, і завжди майте на увазі потреби людей з різними зоровими можливостями. Щоб дізнатися більше про кольори CSS як тип даних, перегляньте довідку Типу даних CSS <color> і Посібник з колірних значень CSS.

Властивості, що можуть приймати кольори

На рівні елементів, до всього в HTML може бути застосований колір. Погляньмо на різні сутності, візуалізовані на сторінці, як то текст, межі тощо. Будуть списки властивості CSS, які застосовують колір до кожної з них.

На фундаментальному рівні властивість color визначає колір переднього плану вмісту елемента HTML, а властивість background-color визначає колір фону елемента. Ці властивості можна використовувати практично на будь-якому елементі.

Текст

Щоразу, коли візуалізується елемент, ці властивості використовуються для з'ясування кольорів тексту, його фону та можливих прикрас тексту.

  • color

  • : Колір до застосування при нанесенні тексту та будь-яких прикрас тексту (наприклад, додавання підкреслень, надкреслень, перекреслень і так далі.

  • background-color

    • : Колір тла тексту.

  • text-shadow

    • : Задає ефект тіні, що застосовується до тексту. Серед параметрів тіні є базовий колір тіні (який потім розмивається і змішується з фоном на основі інших параметрів). Дивіться Тіні тексту, щоб дізнатися більше.

  • text-decoration-color

    • : Усталеним кольором прикрас тексту (таких як підкреслення, перекреслення тощо) є currentcolor. Це ключове слово представляє поточне значення властивості color. Однак це значення можна перевизначити та використати для них інший колір, використовуючи властивість text-decoration-color.

  • text-emphasis-color

    • : Колір для використання при візуалізації символів акцентів поруч з кожним символом тексту. Це використовується в основному при нанесенні тексту для східноазійських мов.

  • caret-color

    • : Колір для використання при нанесенні каретки (яку іноді звуть курсором введення тексту) всередині елемента. Це корисно лише в елементах, які можна редагувати, таких як <input> і <textarea>, або елементах, атрибут HTML contenteditable яких має значення 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.

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.