Пошук уроків, статей та іншого контенту
Навчіться задавати колір тексту, фону та меж за допомогою CSS-властивостей color, background-color і border-color.
Властивість color задає колір тексту елемента.
p {
color: blue;
}У цьому прикладі весь текст усередині елементів <p> буде синім.
Колір можна записати кількома способами.
Для поширених кольорів можна використовувати їхні назви:
.title {
color: darkgreen;
}
.warning {
color: red;
}CSS підтримує багато назв кольорів, наприклад:
red — червоний;
blue — синій;
green — зелений;
black — чорний;
white — білий;
gray — сірий;
orange — помаранчевий.
Назви зручні для простих прикладів, але в реальних проєктах частіше потрібен точніший відтінок.
Шістнадцятковий колір починається із символу # і містить шість символів:
.title {
color: #1d4ed8;
}
.text {
color: #333333;
}Перші дві цифри описують кількість червоного кольору, наступні дві — зеленого, а останні дві — синього.
Наприклад:
.black {
color: #000000;
}
.white {
color: #ffffff;
}Є також скорочений запис для кольорів, у яких кожна пара символів однакова:
.text {
color: #333;
}Запис #333 еквівалентний запису #333333.
rgb()Функція rgb() задає колір за значеннями червоного, зеленого та синього компонентів:
.text {
color: rgb(40, 40, 40);
}Кожне значення може бути від 0 до 255:
.red {
color: rgb(255, 0, 0);
}
.blue {
color: rgb(0, 0, 255);
}Властивість background-color задає колір фону елемента.
.card {
background-color: lightblue;
}Фон зафарбовує всю область елемента, зокрема його внутрішні відступи.
Колір фону можна вказати будь-яким знайомим способом:
.page {
background-color: #f4f4f4;
}
.button {
background-color: rgb(30, 64, 175);
}
.note {
background-color: white;
}Щоб текст добре читався, потрібно вибирати контрастні кольори:
.button {
color: white;
background-color: #2563eb;
}Білий текст на синьому фоні зазвичай читається краще, ніж сірий текст на світло-сірому фоні.
Властивість border-color задає колір межі елемента.
.card {
border-color: #2563eb;
}Однак border-color сам по собі не створює видиму межу. Спочатку потрібно задати її ширину та стиль:
.card {
border-width: 2px;
border-style: solid;
border-color: #2563eb;
}Найчастіше ці властивості записують скорочено за допомогою border:
.card {
border: 2px solid #2563eb;
}У такому записі:
2px — товщина межі;
solid — стиль межі;
#2563eb — її колір.
Якщо стиль межі не заданий, браузер не покаже межу, навіть якщо border-color має значення.
Можна встановити різні кольори для кожної сторони:
.box {
border-style: solid;
border-width: 3px;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: orange;
}Також можна вказати різні кольори через border-color:
.box {
border-style: solid;
border-width: 3px;
border-color: red green blue orange;
}Значення застосовуються за годинниковою стрілкою:
верхня межа — red;
права — green;
нижня — blue;
ліва — orange.
На початковому етапі зручніше використовувати один колір для всіх сторін:
.box {
border: 1px solid #cccccc;
}У наступному прикладі колір тексту, фону та меж задано для картки з повідомленням.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Кольори в CSS</title>
<style>
body {
color: #222222;
background-color: #f3f4f6;
font-family: Arial, sans-serif;
}
.card {
max-width: 400px;
margin: 40px auto;
padding: 24px;
background-color: white;
border: 2px solid #2563eb;
}
.card-title {
color: #1d4ed8;
}
.card-text {
color: rgb(75, 85, 99);
}
.button {
padding: 10px 16px;
color: white;
background-color: #2563eb;
border: 2px solid #1e40af;
}
</style>
</head>
<body>
<article class="card">
<h1 class="card-title">Вітаємо!</h1>
<p class="card-text">
Це приклад використання кольору тексту, фону та меж.
</p>
<button class="button">Продовжити</button>
</article>
</body>
</html>У прикладі:
body має темний колір тексту та світло-сірий фон;
.card має білий фон і синю межу;
.card-title має синій колір тексту;
.card-text має сірий колір тексту;
.button має білий текст, синій фон і темнішу синю межу.
Деякі властивості, зокрема color, можуть успадковуватися від батьківського елемента.
<div class="content">
<p>Цей текст успадкує колір від батьківського елемента.</p>
</div>.content {
color: #374151;
}Якщо для <p> не задано власний color, він використає колір батьківського елемента .content.
Власне правило має перевагу:
.content {
color: #374151;
}
.content p {
color: #dc2626;
}У цьому випадку текст абзацу буде червоним, оскільки для нього встановлено окремий колір.
Фон і межа зазвичай не успадковуються автоматично. Якщо елемент не має власного background-color, це не означає, що він отримає фон батьківського елемента.
Ключове слово transparent робить колір прозорим.
.button {
color: #2563eb;
background-color: transparent;
border: 1px solid #2563eb;
}У цьому прикладі кнопка не має видимого кольору фону, але має синій текст і синю межу.
border-color.box {
border-color: red;
}Межа може не відображатися, тому що не задано її стиль. Додайте стиль і товщину:
.box {
border: 2px solid red;
}.title {
color: 2563eb;
}Перед шістнадцятковим значенням обов’язково потрібен символ #:
.title {
color: #2563eb;
}Світлий текст на світлому фоні важко читати:
.card {
color: #eeeeee;
background-color: #ffffff;
}Використовуйте кольори з достатнім контрастом:
.card {
color: #222222;
background-color: #ffffff;
}.parent {
background-color: yellow;
}Дочірній елемент не отримує окремий фон автоматично. Якщо потрібно встановити фон для нього, задайте властивість безпосередньо:
.child {
background-color: white;
}Створіть блок із такими властивостями:
колір тексту — темно-сірий;
колір фону — світло-жовтий;
межа — 2px solid помаранчевого кольору.
Один із можливих варіантів:
<div class="message">
Будь ласка, перевірте введені дані.
</div>.message {
color: #713f12;
background-color: #fef3c7;
border: 2px solid #f59e0b;
padding: 16px;
}color задає колір тексту.
background-color задає колір фону елемента.
border-color задає колір межі.
Для видимої межі потрібно вказати не лише колір, а й стиль, наприклад solid, та товщину.
Колір можна записувати назвою, у шістнадцятковому форматі або через rgb().
Для зручного читання тексту важливо забезпечувати достатній контраст між текстом і фоном.