CSS-цвет

2008-02-08 / Рубрика: CSS

Цвет — одна из важнейших характеристик, которая влияет на внешний вид веб-страницы. В этой статье мы рассмотрим, как устанавливать цвета для элементов страницы с помощью каскадных таблиц стилей — CSS.

Как же определить цвет для какого-либо элемента? Для определения цветов на сайте используеются модель RGB. Аббревиатура RGB расшифровывается как Red, Green, Blue и определяет «количество» красного, зеленого и синего в окончательном цвете — примерно, как в телевизоре. Есть четыре способа записи нужный цвет с помощью цифр и ещё с помощью ключевых слов:

p { color: rgb(0, 255, 0); }
p { color: rgb(0%, 100%, 0%); }
p { color: #00FF00; }
p { color: #0F0; }
p { color: lime; }

Все эти примеры задают один и тот же зеленый цвет.

В первом примере цвет задаётся с помощью трёх чисел. Каждое число может принимать значение от 0 до 255, которое означает, как говорилось выше, «количество» данного цвета. Эта форма записи встречается не очень часто.

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

В третьем случае используется так называемая шестнадцатиричная запись, где вместо трёх обычных чисел указываются числа в шестнадцатиричной системе счисления. Такая запись встречается наиболее часто при создании веб-страниц.

В четвёртой строчке используется сокращённая шестнадцатиричная запись. Например, если вам нужно записать цвет #7700AA, то можно написать просто #70A.

В пятом примере используется стандартное ключевое слово lime, которое означает цвет #00FF00. Полный список ключевых слов.

Таблица безопасных цветов

При подогововке статьи использованы материалы Дмитрия Турецкого.