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. Полный список ключевых слов.

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

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

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

Автор — Неизвестный автор

Дата написания — 2008-02-08