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