css властивість color


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

Властивість `color`

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

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

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

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

Використовуйте background-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);
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів