Основной цвет элемента проще всего задать при помощи свойства color. Это свойство в качестве значения принимает любой действительный тип цвета например #FFCC00 или rgb(100%, 80%, 0%), а также ключевые слова системных цветов. Для незамещаемых элементов color задает цвет текста элемента:
<p style="color: gray;">This paragraph has a gray foreground.</p>
<p>This paragraph has the default foreground.</p>
Конечно, вы не ограничены такими простыми операциями. Существует масса вариантов применения цветов. Допустим, в документе есть абзацы, содержащие текст, предупреждающий пользователя о потенциальной проблеме. Чтобы выделить этот текст, можно окрасить его красным. Достаточно применить к каждому абзацу предупреждения, содержащие текст, класс warn (<p class="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 становится черным.