css властивість color
Властивість color задає колір тексту та його оздоблення, котре задане за допомогою властивості text-decoration.
Ця властивість може приймати як однорідний колір так і прозорість, але на відміну від зображень не може бути градієнтом.
Ти також можеш задати прозорість окремо, за допомогою властивості opacity.
Значення властивості color можуть успадковувати й інші css властивості, як наприклад:
- кордони (якщо колір не був для них заданий окремо за допомогою властивості
border-color). - маркери списків (при умові, що вигляд маркера не було змінено за допомогою властивості
list-style-image, тоді властивість color не спрацює, бо маркер буде зображенням, аcolorзастосовується тільки до тексту).
| Порада: | Використовуйте |
| Нотатка: | Дія цієї властивості не поширюється на посилання. |
Синтаксис
color: color|initial|inherit|currentColor|transparent|unset;Властивість color може отримувати 6 значень:
colorКолір тексту.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
currentColorТеж саме, що inherit.
transparentРобить текст прозорим (невидимим).
unsetКомбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
| Значення без задання: | Відсутнє |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.color="#0000FF" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| color | 1.0 |
3.0 |
1.0 |
1.0 |
3.5 |
| rgb() | 1.0 |
4.0 |
1.0 |
1.0 |
3.5 |
| rgba() | 1.0 |
9.0 |
3.0 |
3.1 |
10 |
| hsl() | 1.0 |
9.0 |
1.0 |
3.1 |
9.5 |
| hsla() | 1.0 |
9.0 |
3.0 |
3.1 |
10 |
| Переглядач | |||
|---|---|---|---|
| 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 |
Мобільних переглядачів ще не додано.
Приклади
Встановлюємо колір тексту за допомогою різних значень
Встановлюємо колір для різних елементів
Синтаксис властивості
body {
color: red;
}
h1 {
color: #00ff00;
}
p {
color: rgb(0,0,255);
}