English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Есть несколько способов определить значение цвета в CSS.
Ключевые слова для цветных цветов не различают регистр и обозначают определенный цвет, например red, green, blue, yellow, black и т.д.
h1 {
color: red;
}
p {
background-color: yellow;
}Тестировать,看看‹/›Внимание:Поддержка ключевых слов для цветов варьируется в зависимости от браузера, поэтому для безопасности лучше использовать шестнадцатеричные значения или символы.
просмотретьключевые слова для цветовполный список
Ключевой символ transparent означает цвет с полным透明ностью.
Этот ключевой символ можно рассматривать как сокращенную форму прозрачного черного цвета rgba(0,0,0,0), а также как его значение.
h1 {
color: transparent;
}
p {
background-color: transparent;
}Тестировать,看看‹/›Внимание: CSS 2.1 позволяет использовать только два свойства:background-colorиborder-colorпринимают ключевое слово transparent. Однако, CSS3 расширил значения цветов, чтобы включить ключевое слово transparent, чтобы его можно было использовать с любыми свойствами, принимающими значения цветов.
Цветовая модель RGB (красный, зеленый, синий) является наиболее часто используемым способом определения значений цветов в CSS. Можете определить цвет с помощью модели RGB двумя способами:
Значения RGB в шестнадцатеричном представлении # состоят из трех или шести шестнадцатеричных символов (0-9, af) после него.
При использовании шестизначных символов (#rrggbb) первое парное (rr)代表着 значение красного, второе парное (gg)代表着 значение зеленого, а последнее парное (bb)代表着 значение синего.
h1 {
color: #f80;
}
p {
background-color: #ff8800;
}Тестировать,看看‹/›Совет:Трехзначное шестнадцатеричное представление (#rgb) можно преобразовать в шестизначное представление (##rrggbb) путем копирования чисел, а не добавления нулей. Например: #03f можно расширить до #0033ff, но оба значения представляют один и тот же цвет.
Функциональный способ указания значений RGB: rgb(red, green, blue). Где каждый параметр (red, green и blue) определяет силу цвета, может быть целым значением (от 0 до 255) или процентным значением (от 0% до 100%).
Целое значение 255 соответствует 100%, шестнадцатеричное представление f или ff: например, rgb(0,255,255) = rgb(0%,100%,100%) = #0ff, все значения представляют один и тот же цвет, aqua. Вокруг значений разрешены пробелы.
h1 {
color: rgb(0,255,255);
}
p {
background-color: rgb(0%,100%,100%);
}Тестировать,看看‹/›Значение 0 или 0% означает, что отсутствует конкретное значение цвета, а значения 255, 100% и f или ff означают, что значение цвета полностью существует.
Внимание:Значения, выходящие за пределы допустимого диапазона (0-255 или 0%-100%), будут автоматически обрезаны или изменены на диапазон, поддерживаемый устройством.
Смотреть оCSS3 цветаруководство, чтобы узнать о новых символах функций (например) rgba(), hsl() и hsla() для определения значений цветов.