Замещение атрибутов

Существует множество вариантов применения свойства 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 были бы бесполезны. Пришлось бы применять для каждой отдельной ссылки, которая должна быть темной. То ли дело 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;}

Теперь все внешние ссылки будут серыми до посещения и черными после посещения, тогда как остальные ссылки будут темно-серыми после посещения и светло-серыми до него.

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

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

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