Цвета

Приступая к разработке страницы, прежде всего надо составить ее план. Это правило рекомендуется соблюдать в большинстве случаев, но когда речь идет о цветах, оно необходимо вдвойне. Если сделать все гиперссылки желтыми, будут ли они гармонировать с цветом фона всех частей документа? Если применить слишком много цветов, не будет ли пользователь подавлен (подсказка: да)? Если изменить цвета гиперссылок по умолчанию, найдет ли их пользователь? (Если назначить обычному тексту и тексту гиперссылок один цвет, заметить ссылки намного труднее – просто невозможно, если ссылки не подчеркнуты.)

Необходимость дополнительного планирования наверняка не отвратит почти никого из авторов от возможности изменять цвета, причем делать это они будут, вероятно, довольно часто. Адекватное применение цвета может действительно улучшить представление документа. Допустим, есть конструкция, в которой все элементы h1 должны быть зелеными, большинство элементов h2 – синими, и все гиперссылки должны быть темно красными. Требуется, однако, чтобы элементы h2 в некоторых случаях становились темно-синими, потому что они ассоциированы с разными типами информации. Для этого проще всего каждому h2, который должен быть темно-синим, назначить класс и объявить следующее:

h1 {color: green;}
h2 {color: blue;}
h2.dkblue {color: navy;}
a {color: maroon;} /* замечательный темно-красный цвет */

Лучше выбирать имена классов, описывающие тип содержащейся в них информации, а не визуальный эффект, который вы пытаетесь получить.


Предположим, требуется сделать темно-синими все элементы h2, являющиеся заголовками подразделов. Лучше назвать класс subsec или даже sub-section. Преимущество такого имени не только в том, что оно действительно что-то означает, но, что более важно, оно не зависит от какой-либо концепции представления. Кроме того, впоследствии может потребоваться сделать все заголовки подразделов темно-красными, и тогда правило h2.dkblue {color: maroon;} будет выглядеть довольно глупо.

Из этого простого примера можно увидеть, что применение стилей лучше предварить планированием, это откроет вам доступ ко всем инструментальным средствам, имеющимся в вашем распоряжении. Предположим, надо добавить навигационную панель на страницу из предыдущего примера. Гиперссылки этой панели должны быть желтыми, а не темно-красными. Если идентификатор панели – navbar, достаточно добавить такое правило:

#navbar a {color: yellow;}

Изменится цвет гиперссылок навигационной панели, но это не повлияет на другие гиперссылки документа. В CSS в действительности имеется только один тип окраски – плоская сплошная заливка. Если присвоить свойству color документа значение red, весь текст будет одного и того же оттенка красного.


Конечно, HTML работает так же. Еще во времена HTML 3.2, объявив , вы предполагали, что все гиперссылки приобретут один и тот же оттенок синего независимо от того, в каком месте документа они находятся. Этот подход не должен измениться и в случае применения CSS. Если вы обращаетесь к CSS, чтобы присвоить свойству color всех гиперссылок (как посещенных, так и непосещенных) значение blue, значит, именно такими они и будут. Аналогично, если зеленый фон для элемента body задается при помощи стилей, то весь фон body будет одного оттенка зеленого.

В CSS можно задавать и основной цвет (цвет переднего плана), и цвет фона любого элемента, от body до выделенных элементов и гиперссылок, а также элементов списка, всего списка, заголовков, ячеек таблиц и даже (в некоторой степени) изображений. Однако чтобы понять, как это делается, важно понимать, что относится к переднему плану элемента, а что нет. Начнем с самого переднего плана; вообще говоря, это текст элемента, хотя передний план также включает и рамки вокруг элемента. Таким образом, существует два способа прямого воздействия на основной цвет элемента: применение свойства color и задание цвета рамок с помощью одного из целого ряда свойств задания параметров рамок.

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

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

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