Свойство color определяет цвет текста элемента.

Например, свойство color, указанное в селекторе body, определяет цвет текста по умолчанию для всей страницы. Посмотрим следующий пример, чтобы понять, как это работает:

body {
    color: #ff5722;
}

Свойство color обычно наследует значение цвета от своего родительского элемента, за исключением тега <a>. Например, если вы укажете color для элемента body, он будет автоматически применится для заголовков (<h1><h6>), абзацев (<p>) и т. д., но не будет влиять на элемент <a>.

Доступные значения цветов

Цвета в CSS чаще всего указываются в следующих форматах:

  • ключевое словоred, green, blue, transparent и т. д.
  • значение в формате HEX — например, #ff0000, #00ff00 и т. д.
  • значение в формате RGB — например, rgb (255, 0, 0)

Свойство transparent означает, что цветом текущего элемента будет его фон или другой элемент, находящийся «позади» в случае абсолютного позиционирования.

CSS3 поддерживает несколько других цветовых форматов, таких как HSL, HSLA и RGBA, которые также поддерживают прозрачность. Об этом подробнее в Руководстве по цветам в CSS3.

Пока что рассмотрим перечисленные форматы color подробнее:

Ключевые слова (Color Keywords)

CSS принимает несколько ключевых слов цвета, что удобно для использования.

Основные ключевые слова цвета: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, и yellow. Названия цветов не чувствительны к регистру, т.е. можно писать Aqua, но не нужно.

h1 {
    color: red;
}
p {
    color: purple;
}

На практике, современные браузеры поддерживают гораздо больше имен цветов, чем те, которые определены в стандарте CSS, но для большей безопасности вы должны использовать вместо этого шестнадцатеричные значения цвета (hex color).

Весь список названий цветов со значениями доступен по ссылке.

Цвета в формате HEX

Hex (сокращенно от Hexadecimal) — шестнадцатеричный код цвета, наиболее часто используемый метод определения цвета в сети.

Шестнадцатеричный код представляет цвета с использованием шестизначного кода, которому предшествует хеш-символ (#), например #rrggbb, в котором rr, gg и bb представляют красный, зеленый и синий компоненты цвета соответственно.

Значение каждого компонента может варьироваться от 00 (отсутствие света) до FF (полноцветный) в шестнадцатеричном формате или от 0 до 255 в десятичном эквиваленте. Например, #ffffff представляет абсолютно белый цвет, а #000000 абсолютно черный цвет, без оттенков. Давайте посмотрим на следующий пример:

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

Hex или шестнадцатеричный код относится к схеме нумерации, которая использует 16 символов в качестве своей базы. Он использует цифры от 0 до 9 и буквы A, B, C, D, E и F, которые соответствуют десятичным числам 10, 11, 12, 13, 14 и 15 соответственно.

Если шестнадцатеричный код цвета имеет пары значений, его также можно записать в сокращенной записи, чтобы избежать дополнительной типизации, например, шестнадцатеричное значение цвета #ffffff также можно записать как #fff, #000000 как #000, #00ff00 как #0f0, #ffcc00 как #fc0 и так далее.

Цвета в формате RGB

Цвета могут быть определены в формате RGB (по названию букв Red (красный), Green (зеленый) и Blue (синий)) с использованием функции rgb().

Функция rgb() принимает три значения через запятую, которые определяют количество красного, зеленого и синего компонентов цвета. Эти значения обычно указываются в виде целых чисел от 0 до 255, где 0 обозначает отсутствие цвета, а 255 обозначает полный или максимальный цвет.

В следующем примере указывается тот же цвет, что и в предыдущем примере, но в формате RGB.

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}

Вы также можете указать значения RGB внутри функции rgb() в процентах, где 100% представляет полный цвет, а 0% (не просто 0) — отсутствие цвета. Например, вы можете указать красный цвет как rgb(255, 0, 0) или rgb(100%, 0%, 0%).

Если R, G и B все установлены на 255, то есть rgb(255, 255, 255)), цвет будет белым. Аналогично, если все значения установлены в 0, т.е. rgb(0, 0, 0), цвет будет черным.

Влияние свойства color на границы (border) и контуры (outline)

Свойство color применяется не только для текстового содержимого, но и для всех элементов, которые находятся на «переднем» плане и которые принимают значение color. Например, если значение border-color или outline-color не было определено явно для элемента, вместо него будет использоваться значение color текущего элемента. Например:

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.