Свойство color в CSS
Свойство color определяет цвет текстового содержимого и текстовых декораций. Фоновый цвет можно сочетать с цветом текста, чтобы сделать его более читаемым. Веб-цвета можно найти в разделе HTML цвета, а выбрать предпочитаемые цвета поможет наш инструмент Color Picker. Значение по умолчанию для этого свойства — currentcolor.
| Начальное значение | currentcolor |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимация | Да. Цвет можно анимировать. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.color = "#1c87c9"; |
Синтаксис
Синтаксис CSS-свойства color
color: color | initial | inherit;Пример свойства color:
Пример CSS-свойства color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Результат
INFO
В качестве значения для свойства color можно использовать шестнадцатеричные коды, RGB, HSL или названия цветов. Примечание: начальное значение — currentcolor, что означает наследование цвета текста от родительского элемента.
Пример свойства color со значением цвета по имени:
Пример CSS-свойства color со значением цвета по имени
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Пример свойства color со шестнадцатеричным значением:
Пример CSS-свойства color со шестнадцатеричным значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Пример свойства color со значением RGB:
Пример CSS-свойства color со значением RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Пример свойства color со значением HSL:
Пример CSS-свойства color со значением HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| color | Определяет цвет текста и текстовых декораций. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). | Запустить » |
| initial | Устанавливает для свойства значение по умолчанию. | Запустить » |
| inherit | Наследует значение свойства от родительского элемента. |
Практика
Какие три способа задания цветов в CSS описаны в содержимом по указанной ссылке?