W3docs
ru
Войти

Свойство color в CSS

The CSS color property describes the color of the text content and text decorations. Please, try yourself the CSS color Property examples and see the results.

Свойство color определяет цвет текстового содержимого и текстовых декораций. Фоновый цвет можно сочетать с цветом текста, чтобы сделать его более читаемым. Веб-цвета можно найти в разделе HTML цвета, а выбрать предпочитаемые цвета поможет наш инструмент Color Picker. Значение по умолчанию для этого свойства — currentcolor.

Начальное значениеcurrentcolor
Применяется кКо всем элементам. Также применяется к ::first-letter и ::first-line.
НаследуетсяДа.
АнимацияДа. Цвет можно анимировать.
ВерсияCSS1
Синтаксис DOMobject.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>
Попробуйте сами »

Результат

Свойство color в CSS

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 описаны в содержимом по указанной ссылке?