Существует множество вариантов применения свойства color, из которых самый распространенный – замена атрибутов TEXT, LINK, ALINK и VLINK элемента BODY HTML 3.2. С помощью псевдоклассов ссылок свойство color может полностью заменить атрибуты BODY. Первую строку ледующего примера можно заменить приведенным ниже CSS, и будет получен результат:
body {color: black;} /* замена css */
a:link {color: #808080;}
a:active {color: silver;}
a:visited {color: #333333;}
Может показаться, что при этом приходится набирать слишком много символов, но надо учесть два момента. Во-первых, это – важнейшее усовершенствование по сравнению со старым методом применения атрибутов BODY, в котором можно было вносить изменения только на уровне документа. Во-вторых, если бы потребовалось сделать некоторые ссылки светло-серыми, а другие – темно-серыми, то атрибуты BODY были бы бесполезны. Пришлось бы применять <FONT COLOR="#666666"> для каждой отдельной ссылки, которая должна быть темной. То ли дело CSS: достаточно добавить класс ко всем ссылкам, для которых требуется изменить оттенок серого, и соответствующим образом исправить стили:
body {color: black;}
a:link {color: #808080;} /* светло-серый */
a.external:link {color: silver;}
a:active {color: silver;}
a:visited {color: #333;} /* очень темный серый */
Все ссылки класса external станут серебряными, а не серыми. По прежнему после посещения они будут становиться темно-серыми, если, конечно, не добавить специальное правило и для этого случая:
body {color: black;}
a:link {color: #808080;} /* умеренно серый */
a.external:link {color: #666;}
a:active {color: silver;}
a:visited {color: #333;} /* очень темно-серый */
a.external:visited {color: black;}
Теперь все внешние ссылки будут серыми до посещения и черными после посещения, тогда как остальные ссылки будут темно-серыми после посещения и светло-серыми до него.