CSS color — колір тексту елемента

Властивість color задає колір тексту та його оздоблення, котре задане за допомогою властивості text-decoration.

Ця властивість може приймати як однорідний колір так і прозорість, але на відміну від зображень не може бути градієнтом.

Ти також можеш задати прозорість окремо, за допомогою властивості opacity.

Значення властивості color можуть успадковувати й інші css властивості, як наприклад:

• кордони (якщо колір не був для них заданий окремо за допомогою властивості border-color).
• маркери списків (при умові, що вигляд маркера не було змінено за допомогою властивості list-style-image, тоді властивість color не спрацює, бо маркер буде зображенням, а color застосовується тільки до тексту).

правити

Загальний опис

правити

Порада

Використовуйте background-color і color, щоб встановити колір тла та тексту, це допоможе зробити текст легшим для читання.

автор: Svitlana правити

Нотатка

Дія цієї властивості не поширюється на посилання.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

color: color|initial|inherit|currentColor|transparent|unset;

Властивість color може отримувати 6 значень:

color

Колір тексту.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

currentColor

Теж саме, що inherit.

автор: Svitlana

правити

transparent

Робить текст прозорим (невидимим).

автор: Svitlana

правити

unset

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	3
rgb()	1.0	1.0	1.0	3.5		4.0
rgba()	1.0	3.0	3.1	10		9.0
hsl()	1.0	1.0	3.1	9.5		9.0
hsla()	1.0	3.0	3.1	10		9.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
rgb()	1.0		1.0	1.0
rgba()	4.0		4.0	4.0
hsl()	1.0		1.0	4.0
hsla()	4.0		4.0	4.0

Приклади

+ запропонувати свій приклад у пісочниці

<h1>Заголовок зелений</h1>
<p>Абзац синій.</p>
<span>Цей текст успадкував червоний від body.</span>

body {
    color: red;
}

h1 {
    color: #00ff00;
}

p {
    color: rgb(0, 0, 255);
}

<div class="info">
  <p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>color</strong>:</p>
</div>

<main>
  Натискай сюди, щоб вибрати колір: <input type="color" class="input" id="input">

  <div id="ex">Це текст для прикладу</div>
</main>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.input {
  position: relative;
  top: 2px;
}

.info {
  background-color: #ccc;
  padding: 16px;
  margin-bottom: 36px;
}

main {
  padding: 16px;
}

#ex {
  margin-top: 36px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  font-family: monospace;
}

document.querySelectorAll('#input').forEach((el) => el.addEventListener('change', function () {
  document.querySelectorAll('#ex').forEach((n) => n.style.setProperty('color', document.querySelector('#input').value));
}));

<p>Ми можемо встановлювати колір для тексту, використовуючи різні значення:</p>

<div class="demo">
	<p class="name">gold</p>
	<p class="hex">#F12668</p>
	<p class="rgb">rgb(72, 102, 157)</p>
	<p class="rgba">rgba(72, 102, 157, 0.45)</p>
  <p class="hsl">hsl(0, 100%, 30%)</p>
	<p class="hsla">hsla(0, 60%, 77%, 0.7)</p>
</div>

body {
    font-family: sans-serif;
    text-align: center;
    line-height: 1.45; 
    font-size: 18px;
    padding: 16px 16px 0 16px; 
}

.demo {
    font-family: monospace;
    font-weight: 700;
    text-align: center;
    font-size: 18px;
}

.name { color: gold; }
.hex { color: #F12668; }
.rgb { color: rgb(72, 102, 157); }
.rgba { color: rgba(72, 102, 157, 0.45); }
.hsl { color: hsl(0, 100%, 30%); }
.hsla { color: hsla(0, 60%, 77%, 0.7); }

<div class="card">
  <p>Рамка, підкреслення й маркер узяли колір із <code>color</code>.</p>
  <ul><li>пункт списку</li></ul>
</div>

<div class="card alt">
  <p>Той самий блок, змінено лише <code>color</code>.</p>
  <ul><li>пункт списку</li></ul>
</div>

<p class="half">А цей текст напівпрозорий сам по собі: rgb(0 0 0 / 45%)</p>

body {
    font-family: sans-serif;
    font-size: 16px;
}

.card {
    color: #0172ad;
    border: 2px solid;
    padding: 10px 10px 10px 34px;
    margin-bottom: 14px;
}

.card p {
    text-decoration: underline;
}

.alt {
    color: #c0392b;
}

.half {
    color: rgb(0 0 0 / 45%);
    font-size: 20px;
}