Как изменить цвет гиперссылки?

2 ноября 2014 г. Просмотров: 394 Инструкции
Для изменения цвета гиперссылок в веб-страницах чаще всего используется атрибут color языка CSS (Cascading Style Sheets - «Каскадные таблицы стилей»). Менее функциональные решения этой задачи есть и в языке HTML (HyperText Markup Language — «язык разметки гипертекста»).
Создать сайт самостоятельно с Wix.com

Вам понадобится

  • Базовые знания языков HTML и CSS

Инструкция

  • Подготовьте блок описания стилей для гиперссылок.
    В самом простом виде он может выглядеть, например, так:a {color: Green}Здесь "a" называется «селектором», который указывает, что содержащееся в скобках описание стиля должно быть применено ко всем тегам ссылок в документе. Green определяет цвет ссылки.Это очень грубое определение цвета, которое применяется редко. Намного чаще в селектор "a" добавляется «псевдокласс» - это метка, которая позволяет указать стиль ссылки в трех разных состояниях.
  • Используйте псевдокаласс link, чтобы задать стиль для обычного (неактивного) состояния ссылки. Выглядеть это может, например, так:a:link {color: Green}
  • Используйте псевдокаласс hover, чтобы указать, как должна выглядеть ссылка при наведении курсора мыши. Например:a:hover {color: Lime}
  • Используйте псевдокаласс visited для описания стиля уже посещенной ссылки. Например:a:visited {color: DarkGreen}
  • Объедините все три состояния в один блок описания стилей. Выглядеть HTML-код, содержащий CSS-описания стилей может, например, так:
  • a:link {color: Green}

    a:visited {color: DarkGreen}

    a:hover {color: Lime}

    Здесь открывающий и закрывающий HTML-теги style сообщают браузеру, где начинается и заканчивается описание стилей, а между ними помещено описание поведения ссылок в трех состояниях.

  • В образце, использованном выше, указаны только цветовые характеристики, но в описание можно включить и другие атрибуты. Например, если дизайн страницы требует, чтобы в нормальном (неактивном) состоянии ссылка не была подчеркнута, а при наведении курсора подчеркивалась, то код можно модифицировать так:
  • a:link {color: Green; text-decoration: none;}

    a:visited {color: DarkGreen; text-decoration: none;}

    a:hover {color: Lime; text-decoration: underline;}

  • Если требуется изменить цвет только некоторых ссылок в странице, а остальные оставить с установками по умолчанию, то в тег каждой изменяемой ссылки надо добавить атрибут class. Например, назовите этот класс гиперссылок именем newLinks. Тогда тег ссылки может выглядеть так:текстовая ссылкаЭто же имя класса надо добавить и в описание стилей:
  • a.newLinks:link {color: Green; text-decoration: none;}

    a.newLinks:visited {color: DarkGreen; text-decoration: none;}

    a.newLinks:hover {color: Lime; text-decoration: underline;}

  • Поместите подготовленный на основе описанных выше образцов код описания стилей в заголовочную часть страницы - между тегами и . При необходимости добавьте в теги ссылок атрибут class с именем, использованным в описании стилей. Затем сохраните измененную страницу, и процедура изменения цвета гиперссылок будет завершена.
  • Оцените статью!