css властивість color
Властивість color задає колір тексту та його оздоблення, котре задане за допомогою властивості text-decoration.
Ця властивість може приймати як однорідний колір так і прозорість, але на відміну від зображень не може бути градієнтом.
Ти також можеш задати прозорість окремо, за допомогою властивості opacity.
Значення властивості color можуть успадковувати й інші css властивості, як наприклад:
- кордони (якщо колір не був для них заданий окремо за допомогою властивості
border-color). - маркери списків (при умові, що вигляд маркера не було змінено за допомогою властивості
list-style-image, тоді властивість color не спрацює, бо маркер буде зображенням, аcolorзастосовується тільки до тексту).
- Порада
-
Використовуйте
автор: Svitlanabackground-colorіcolor, щоб встановити колір тла та тексту, це допоможе зробити текст легшим для читання. - Нотатка
-
Дія цієї властивості не поширюється на посилання.
автор: 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
| Значення без задання: | Відсутнє |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.color="#0000FF" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 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 |
Приклади
+ запропонувати свій приклад у пісочниці
Колір тексту успадковується: span бере червоний від body, а h1 і p мають власні кольори, які перекривають успадкований.
HTML
<h1>Заголовок зелений</h1>
<p>Абзац синій.</p>
<span>Цей текст успадкував червоний від body.</span>CSS
body {
color: red;
}
h1 {
color: #00ff00;
}
p {
color: rgb(0, 0, 255);
}Встановлюємо колір для різних елементів
Встановлюємо колір тексту за допомогою різних значень
Коментарі
Коментарів ще немає — будьте першим!