Вы здесь: Главная > CSS > Значение CSS: Цвет

Значение CSS: Цвет

Опубликовано автором Просмотры: 0

Значения цвета, используемые с такими свойствами, как color и background-color.

Значение цвета может принимать одну из нескольких форм

#

Значение: #.
Описание: шестнадцатеричный красный-зелёный-синий.
Может состоять из шести или трех шестнадцатеричных цифр (от 0 до F).
Используя шесть цифр, первые две указывают количество красного, вторые две ─ количество зелёного, а третьи две — количество синего.
Трёхзначная форма представляет собой сокращённое обозначение, в котором первая цифра красная, вторая зелёная и третья синяя.
Пример:

p { color: #ff0000 }
/* is the same as... */
p { color: #f00 }
/* (full red) */

rgb()

Значение: rgb().
Описание: функциональный красно-зелёно-синий.
Содержит три значения, разделённых запятыми, каждое от 0 до 255 или от 0% до 100%. Первое определяет количество красного, второе ─ зелёного и третье ─ синего.
Пример: 

body { background: rgb(0,127,0) }
/* is the same as... */
body { background: rgb(0%,50%,0%) }
/* (middle green) */

rgba()

Значение: rgba().
Описание: функциональный красно-зелёно-синий с буквой.
Как функциональный RGB, с дополнительным значением от 0 до 1, которое определяет прозрачность. 0 является полной прозрачностью, 1 является сплошным, 0.3 является сплошным на 30% и т.д.
Пример:

h1 { background: rgba(0,0,0,0.8) }
/* (slightly transparent black) */

hsl()

Значение: hsl().
Описание: оттенок-насыщенность-яркость.
Содержит три значения, разделённых запятыми.
Первое значение, оттенок, равно от 0 до 360 или от 0% до 100% и представляет угол на цветовом круге. 0 (или 360) ─ красный, 120 зелёный, 240 синий и т.д.
Второе значение, saturation, находится в диапазоне от 0% (полное обесцвечивание) до 100% (полная насыщенность).
Третье значение, lightness, варьируется от 0% (чёрного) до 100% (белого).
Пример:

p { color: hsl(240,100%,75%) }
/* (pale blue) */

hsla()

Значение: hsla().
Описание: оттенок-насыщенность-яркость с помощью альфа.
Как оттенок-насыщенность-яркость, с дополнительным значением от 0 до 1, которое определяет прозрачность. 0 является полной прозрачностью, 1 является сплошным, 0.7 на 70% сплошным и т.д.
Пример:

h1 { background: hsla(0,0%,100%,0.1) }
/* (very transparent white) */

transparent

Значение: transparent.
Описание: прозрачный.
Пример:

.alt { backround: transparent }

black

Значение: black.
Описание: ключевое слово Black.
Эквивалент #000000 / rgb(0,0,0).
Пример:

p { color: black }

silver

Значение: silver.
Описание: ключевое слово Silver.
Эквивалент #c0c0c0 / rgb(192,192,192).
Пример:

 p { color: silver }

gray

Значение: gray.
Описание: ключевое слово Gray.
Эквивалент #808080 / rgb(128,128,128).
Пример:

p { color: gray }

white

Значение: white.
Описание: ключевое слово White. Эквивалент #ffffff / rgb(255,255,255)
Пример:

p { color: white }

maroon

Значение: maroon.
Описание: ключевое слово Maroon. Эквивалент #800000 / rgb(128,0,0).
Пример:

p { color: maroon }

red

Значение: red.
Описание: ключевое слово Red. Эквивалент #ff0000 / rgb(255,0,0).
Пример:

p { color: red }

purple

Значение: purple.
Описание: ключевое слово Purple. Эквивалент #800080 / rgb(128,0,128).
Пример:

p { color: purple }

fuchsia

Значение: fuchsia.
Описание: ключевое слово Fuchsia. Эквивалент #ff00ff / rgb(255,0,255).
Пример:

 p { color: fuchsia }

green

Значение: green.
Описание: ключевое слово Green. Эквивалент #008000 / rgb(0,128,0).
Пример:

p { color: green }

lime

Значение: lime.
Описание: ключевое слово Lime. Эквивалент #00ff00 / rgb(0,255,0).
Пример:

p { color: lime }

olive

Значение: olive.
Описание: ключевое слово Olive. Эквивалент #808000 / rgb(128,128,0).
Пример:

p { color: olive }

yellow

Значение: yellow.
Описание: ключевое слово Yellow. Эквивалент #ffff00 / rgb(255,255,0).
Пример:

p { color: yellow }

navy

Значение: navy.
Описание: ключевое слово Navy. Эквивалент #000080 / rgb(0,0,128).
Пример:

p { color: navy }

blue

Значение: blue.
Описание: ключевое слово Blue. Эквивалент #0000ff / rgb(0,0,255).
Пример:

p { color: blue }

teal

Значение: teal.
Описание: ключевое слово Teal. Эквивалент #008080 / rgb(0,128,128).
Пример:

 p { color: teal }

aqua

Значение: aqua.
Описание: ключевое слово Aqua. Эквивалент #00ffff / rgb(0,255,255).
Пример:

p { color: aqua }

Кроме того, существует множество практически бесполезных “ключевых слов расширенного цвета X11”, включая papayawhip, peachpuff и lightgoldenrodyellow.

Страницы в тему:

Уроки:

Примеры CSS

Добавить комментарий