Как задать цвет ссылки?

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

Инструкция

Составьте набор инструкций для браузера, который будет содержать описания цветов ссылки в трех состояниях. Выглядеть он может, например, так:a:link {color: Red;}

a:visited {color: Yellow;}

a:hover {color: Orange;}Здесь "a" в начале каждой строки называется «селектором» и указывает тег, к которому браузер должен применять помещенное в фигурные скобки описания стиля. "A" - это и есть тег гиперссылки. Слово, добавленное к селектору через двоеточие, называется «псевдоклассом» - по нему браузер определяет, к которому из состояний ссылки относится стиль в фигурных скобках. link соответствует обычной ссылке, visited - ссылке уже посещенной, а hover - ссылке при наведенном на нее курсоре. Цвета, присвоенные параметру color внутри фигурных скобок, могут быть указаны как наименованием оттенка цвета, так и его шестнадцатеричным кодом.

Если надо задать разные цвета разным группам ссылок на странице, то присвойте каждой группе собственное обозначение («класс») и сделайте для каждого из них отдельное описание стилей. Например, назовите одну группу LinksRed, а другую - LinksGreen. Тогда описание стилей будет выглядеть так:a.LinksRed:link {color: Red;}

a.LinksRed:visited {color: Yellow;}

a.LinksRed:hover {color: Orange;}a.LinksGreen:link {color: Green;}

a.LinksGreen:visited {color: DarkGreen;}

a.LinksGreen:hover {color: Lime;}А в тегах ссылок каждой группы надо указать к которому классу они относятся. Например:Красная ссылка

Зеленая ссылка

Эти инструкции написаны на языке CSS (Cascading Style Sheets - «Каскадные таблицы стилей»), поэтому их надо поместить внутрь тега style, отделяющего их от остальных инструкций в исходном коде страницы, написанных на языке HTML (HyperText Markup Language - «язык разметки гипертекста»):

a.LinksRed:link {color: Red;}

a.LinksRed:visited {color: Yellow;}

a.LinksRed:hover {color: Orange;} a.LinksGreen:link {color: Green;}

a.LinksGreen:visited {color: DarkGreen;}

a.LinksGreen:hover {color: Lime;}

Поместите подготовленный блок описания стилей ссылок в заголовочную часть исходного кода страницы - она ограничена тегами и .

Оцените статью!