Установка свойства color
Свойство color устанавливает цвет текста элемента. Вы можете присваивать этому свойству значение цвета с использованием форматов, которые описаны на вставке "Задание значений цвета". Например, следующее правило устанавливает синий цвет для текста элемента AUTHOR:
AUTHOR {color:blue}
А это правило устанавливает для текста элемента AUTHOR красный цвет:
AUTHOR {color:rgb(255,0,0)}
Свойство color наследуется дочерними элементами. Так, если вы присоедините следующую таблицу стилей к XML-документу из Листинга 7.2, весь текст будет отображен синим цветом за исключением текста элемента PRICE, который будет отображен красным, поскольку для него в таблице стилей предусмотрена отдельная установка цвета.
BOOK {display:block; margin-top:12pt; font-size:10pt; color:blue} TITLE {font-style:italic} AUTHOR {font-weight:bold} PRICE {color:red}
Совет. Свойство color устанавливает цвет для отдельных букв текста (foreground color ). Чтобы установить цвет фона, воспользуйтесь свойством background-color (см. раздел "Установка свойства background-color" далее в этой лекции).
Задание значений цвета
К свойствам, которым вы можете назначать значения цвета, относятся color , background-color и border-color . Вы можете присвоить значение цвета с использованием четырех различных форматов, которые содержатся в приведенных ниже примерах правил. Эти правила являются эквивалентными – каждое из них назначает свойству color красный цвет.
PARA {color:red} PARA {color:rgb(255,0,0)} PARA {color:#FF0000} PARA {color:rgb(100%,0%,0%)}
Первый формат использует ключевое слово CSS (red ), в то время как другие три формата задают цвет путем установки относительной интенсивности компонентов красного, зеленого и синего в составе цвета (именно в таком порядке). Во втором формате интенсивность каждого из цветов задается десятичным числом в диапазоне от 0 до 255. В третьем формате цвет задается с использованием шестизначного шестнадцатеричного числа в диапазоне от 000000 до FFFFFF, где первые две цифры определяют интенсивность красного, вторые две цифры – интенсивность зеленого, а последние две цифры – интенсивность синего. В последнем формате интенсивность каждого из цветов задается в процентах от 0 % до 100 %.
В таблице 7.9 приведены значения цвета, которые вы можете присвоить с помощью ключевых слов CSS. Для каждого цвета указано описание во всех четырех форматах. (Ключевые слова CSS соответствуют названиям цветов.)
| Красный | red | rgb(255,0,0) | #FF0000 | rgb(100%,0%,0%) |
| Коричневый | maroon | rgb(128,0,0) | #800000 | rgb(50%,0%,0%) |
| Светло-зеленый | lime | rgb(0,255,0) | #00FF00 | rgb(0%,100%,0%) |
| Зеленый | green | rgb(0,128,0) | #008000 | rgb(0%,50%,0%) |
| Голубой | blue | rgb(0,0,255) | #0000FF | rgb(0%,0%,100%) |
| Темно-синий | navy | rgb(0,0,128) | #000080 | rgb(0%,0%,50%) |
| Светло-желтый | yellow | rgb(255,255,0) | #FFFF00 | rgb(100%,100%,0%) |
| Темно-желтый | olive | rgb(128,128,0) | #808000 | rgb(50%,50%,0%) |
| Светло-голубой | aqua | rgb(0,255,255) | #00FFFF | rgb(0%,100%,100%) |
| Темно-голубой | teal | rgb(0,128,128) | #008080 | rgb(0%,50%,50%) |
| Светло-фиолетовый | fuchsia | rgb(255,0,255) | #FF00FF | rgb(100%,0%,100%) |
| Темно-фиолетовый | purple | rgb(128,0,128) | #800080 | rgb(50%,0%,50%) |
| Белый | white | rgb(255,255,255) | #FFFFFF | rgb(100%,100%,100%) |
| Черный | black | rgb(0,0,0) | #000000 | rgb(0%,0%,0%) |
| Светло-серый | silver | rgb(192,192,192) | #C0C0C0 | rgb(75%,75%,75%) |
| Темно-серый | gray | rgb(128,128,128) | #808080 | rgb(50%,50%,50%) |
Если вы используете один из RGB-форматов, вы можете создать и множество других цветов, не показанных в данной таблице. Фактически вы можете присвоить каждому из компонентов 256 различных значений, что в сумме дает 16777216 различных цветов (256*256*256). Если вы отображаете документ в системе с глубиной цвета 24 бита или более, монитор может реально отобразить каждый из этих различных цветов.
