Свойство 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;
}

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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