Как можно изменить цвет посещенной ссылки
Перейти к содержимому

Как можно изменить цвет посещенной ссылки

  • автор:

Меняем цвета ссылок

Возможность изменения цвета ссылок одна из важных составляющих HTML-верстки. Ведь это позволяет не только грамотно вписать ссылки в дизайн сайта, но и помогает посетителям ориентироваться в его навигации. В уроке Ссылки и их разновидности вы узнали, что такое посещенные, непосещенные, активные ссылки и ссылки при наведении курсора мыши. Теперь вы научитесь менять цвет ссылок в каждом из этих состояний.

В старых версиях HTML существовали специальные атрибуты тега , позволяющие изменять цвет ссылок на HTML-странице, это link , alink и vlink , но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS), а значит что? Вот и неправильно, не атрибут style , а так называемые внутренние стили. Для этого нам надо будет в «шапку» страницы ( ) вставить тег , а внутри него указать один или несколько следующих стилей:

  

C тегом вы пока еще не знакомы, но тут и учить нечего. Он используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Пример изменения цвета ссылок в HTML-странице

    Изменение цвета ссылок на странице a:link a:visited a:hover a:active 

Как создать сайт

Справочники по HTML и CSS

Результат в браузере

Если вы недавно были на страницах указанных в ссылках, то естественно ссылки будут сразу окрашены в «посещенный» цвет.

Изменяем цвет отдельных ссылок

Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега атрибут style= «color:цвет» и задайте нужный цвет.

Пример использования тегов

    Изменение цвета ссылок на странице a:link a:visited a:hover a:active 

Сайт Seodon.ru

Здесь вы можете найти справочник по тегам HTML

Результат в браузере

  1. Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
  2. Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
  3. В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
  4. Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.

Разделы сайта

  • Как сделать сайт
    Самому и бесплатно
  • Учебник HTML
    Для начинающих
  • Учебник CSS
    Для новичков
  • Справочники
    По HTML и CSS
  • Примеры
    HTML и CSS
  • Ссылки
    Полезные сайты для вебмастеров
  • Инструментарий
    Программы для создания сайтов

Учебник HTML

  • Введение
  • Что такое HTML?
  • Теги и синтаксис HTML
  • Атрибуты HTML-тегов
  • Общие и текст
  • Структура HTML-документа
  • Параграфы и заголовки
  • Как изменить шрифт?
  • Меняем цвет текста и фона
  • Выравнивание содержимого
  • Цитаты и обрыв строки
  • Что такое спецсимволы HTML?
  • Горизонтальные линии
  • Группирование элементов
  • Комментарии в HTML
  • Ссылки
  • Cсылки и их разновидности
  • Меняем цвета ссылок
  • Ссылки на электронную почту
  • Якоря — создаем закладки
  • Изображения
  • Изображения
  • Изображения для фонов
  • Изображения — ссылки
  • Таблицы
  • Таблицы
  • Границы, рамки и отступы HTML-таблиц
  • Объединение ячеек таблицы
  • Вложенные таблицы
  • Списки
  • Нумерованные и маркированные списки
  • Метатеги
  • Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Изменить цвет ссылки

Учу HTML и CSS и не могу понять, почему у ссылки, у которой прописано text-decoration:none все равно остается цвет ссылки. Просто когда вчера писал, у меня после этого значения, цвет стал черный, а сейчас почему -то цвет нажатой ссылки.

.header < box-shadow: black; -webkit-box-shadow: none; /*background-color: black;*/ border-bottom: 1px solid #e8e8e8; max-height: 60px; z-index: 1000; >.container < width: 100%; max-width: 1170px; margin: 0 auto; display: table; >.container::before < content: " "; display: table; >.container::after < content: " "; display: table; clear: both; >.nav < display: flex; justify-content: space-between; position: relative; /*margin: 0.3rem;*/ >.nav__left < font-weight: 600; font-size: 1.3rem; margin: 0.3rem 0px 0rem 0rem; >.nav__left__names < font-weight: 300; font-size: 0.8rem; margin: -0.1rem 0px 0.3rem 0rem; >.nav__logo < width: 2.7rem; height: 2.7rem; display: block; float: left; margin: 0.3rem 0px 0.3rem 0rem; >.nav__right>ul>li < float: left; list-style: none; margin: 0; font-size: 1.1rem; padding: 0px 10px; >.nav__right>ul>li>a
It's name
My name
  • Главная
  • FAQ
  • Скачать
  • Протоколы

Цвет ссылок

С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега . Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

    Цвет ссылок  

Содержание сайта

Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color , оно задает цвет определенного текста, в данном случае, ссылок.

Пример 2. Цвет ссылок, заданных через стили

    Использование стилей   

Содержание сайта

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

Пример 3. Изменение цвета ссылки с помощью стилей

    Цвет ссылок  

Содержание сайта

Интернет-маркетинг

Юзабилити

В данном примере приведены три разных способа задания цвета с помощью стилей.

Как можно изменить цвет посещенной ссылки

Как установить цвет посещённой ссылки

  • Сегодня речь пойдет о том, каким образом устанавливается цвет текста ссылки, по которой пользователь уже переходил.www.bordeli.biz. Каждому опытному пользователю известно, что по умолчанию браузер устанавливает свой цвет для всех ссылок. Кроме того, после перехода он изменяет раскрас текста. Таким образом, для пользователя визуализируются те места, которые он уже посещал. Опыт показывает, что это очень удобный прием. Однако, если кэш браузера будет очищен, то все ссылку примут изначальный цвет. Некоторым дизайнерам не нравится раскрас, который устанавливается браузером. Поэтому они требуют у веб-разработчиков устанавливать другой оттенок. Это очень просто реализовать, воспользовавшись псевдоклассом :visited. Его просто нужно добавить к селектору необходимых ссылок и прописать свойство color с нужным цветом. Смотрим на пример: CSS

    a:visited  color: #c3c3c3; >

    цвет посещённой ссылки

    Браузер покажет такое

    В каких браузерах работает?

    4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+
  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *