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

правити

Переглядачі

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

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

Переглядач
color	1.0	1.0	1.0	3.5	3.0
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

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

Переглядач
color	1.0	1.0	1.0
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);
}