Основные цвета

Основной цвет элемента проще всего задать при помощи свойства color. Это свойство в качестве значения принимает любой действительный тип цвета например #FFCC00 или rgb(100%, 80%, 0%), а также ключевые слова системных цветов. Для незамещаемых элементов color задает цвет текста элемента:

This paragraph has a gray foreground.


This paragraph has the default foreground.



Конечно, вы не ограничены такими простыми операциями. Существует масса вариантов применения цветов. Допустим, в документе есть абзацы, содержащие текст, предупреждающий пользователя о потенциальной проблеме. Чтобы выделить этот текст, можно окрасить его красным. Достаточно применить к каждому абзацу предупреждения, содержащие текст, класс warn (

) и следующее правило:

p.warn {color: red;}

А любые непосещенные ссылки в абзацах предупреждения можно сделать зелеными:

p.warn {color: red;}
p.warn a:link {color: green;}

Если вы передумаете и решите, что текст должен быть темно-серым, а ссылки в таком тексте – светло-серыми, то внесите в предыдущие правила изменения, отражающие новые значения:

p.warn {color: #666;}
p.warn a:link {color: #AAA;}

Изменение цвета позволяет привлечь внимание к определенным типам текста.


Например, текст, набранный полужирным шрифтом, уже достаточно нагляден, но можно выделить его еще сильнее, задав для него и другой цвет, скажем, maroon:

b, strong {color: maroon;}

И наконец, текст всех ячеек таблиц класса highlight можно сделать светло-желтым:

td.highlight {color: #FF9;}

Конечно, если цвет фона для текста не задан, настройки пользователя могут не очень хорошо сочетаться с вашими. Так, если пользователь задаст цвет фона своего броузера бледно-желтым, #FFC, то предыдущее правило сгенерирует светло-желтый текст на бледно-желтом фоне. Поэтому лучше задавать сразу и основной цвет, и цвет фона. (Мы поговорим о фоновых цветах в этой главе чуть позже.)Будьте внимательны к применению цветов в Navigator 4, который заменяет значения свойства color, которые не может распознать.

Эти замены не совсем случайные, но, определенно, неприятные. Например, invalidValue (неверное значение) получается темно-синим, а inherit (наследовать), действительное значение CSS2, превращается в совершенно отвратительный оттенок желто-зеленого. В других обстоятельствах фон со значением transparent становится черным.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Еще раз о повторении в определенном направлении
Замещение атрибутов
Значения, заданные в единицах измерения длины

Вернуться в раздел: CSS / 9. Цвета и фон