Как сделать ссылку посещенной
Как изменить цвет ссылок вашего блога или сайта?
Привет, друзья! Устраивает ли вас цвет ссылок на вашем блоге или сайте? Если нет, и вы хотите изменить цвет ссылки, не беда. Сегодня я научу вас, как изменить цвет ссылки в HTML и CSS коде.
То, что я вам расскажу, будет работать на любом движке, неважно будет это WordPress или uCoz, ведь HTML и CSS используют все движки.
Цвет ссылки в CSS
Обычно все ссылки в шаблоне вашего сайта имеют одинаковый цвет, чаще это голубой или синий цвет. Отличаются только ссылки заголовков и подзаголовков.
Значение, каким цветом выводить ссылки на сайте прописывается в CSS коде, чаще всего в файле style.css. Находится этот файл всегда в корневой папке сайта.
Чтобы изменить цвет всех ссылок на сайте в CSS вам нужно открыть файл style.css и найти в нем код отвечающий за вывод ссылок. Просто найдите упоминание link или Link Styles.
Этот самый CSS код и отвечает за цвет всех ссылок сайта. А если рассмотреть детально, то в данном коде могут быть следующие значения:
Цвет CSS ссылок в обычном состоянии.
CSS цвет ссылок при нажатии на нее.
Цвет посещенной ссылки.
Соответственно, чтобы цвет ссылок в спокойном состоянии, мы меняем значение color: #0169D3 на свой цвет в псевдоклассе a:link.
Чтобы изменить цвет посещенных ссылок, нужно изменить значение color: #0169D3 в псевдоклассе a:visited.
Если вы хотите, чтобы ваши ссылки стали подчеркнутыми, нужно вписать в CSS код ссылки значение text-decoration:underline; как на примере:
А если наоборот хотите убрать подчеркивание ссылки, нужно вписать значение text-decoration:none;
Как менять цвет ссылок в CSS думаю понятно. Теперь давайте рассмотрим как изменить цвет ссылки в HTML коде.
HTML цвет ссылки
В отличие от CSS, где разом можно изменить все ссылки на сайте, в HTML можно поменять цвет только одной определенной ссылки.
Сама ссылка в HTML коде выглядит следующим образом:
Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:
Таким образом я выделил ссылку красным цветом в HTML коде.
Как видите все довольно просто. В статье я рассказал лишь основы о стиле выделения ссылок в коде. Но благодаря CSS можно создать свой уникальный стиль выделения ссылок, например сделать всплывающие подсказки, вставить тень, сделать ссылку мигающей. Но об этом я постараюсь рассказать уже в другой статье.
Подписывайтесь на обновления блога, чтобы не пропустить!
Свойства ссылок
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
| Свойство | Описание |
|---|---|
| A:link | Определяет стиль для обычной непосещенной ссылки. |
| A:visited | Определяет стиль для посещенной ссылки. |
| A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
| A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).
Пример 1. Подчеркивание у ссылки и изменение ее цвета
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Подчеркнутые и надчеркнутые ссылки
Пример 2. Использование подчеркивания в ссылках
Изменение размера ссылки
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
Результат данного примера показан на рис. 1.
Как сделать ссылку посещенной
Урок 5. Ссылки в CSS
Автор: Андрей Краснокутский
Как Вы помните из уроков по HTML ссылки подразделяются на:
Прописывая эти атрибуты в теге мы определяли внешний вид ссылок на WEB-странице. Цвет ссылки задавался шестнадцатеричным значением или названием цвета.
Примечание: Псевдокласс a:focus подсвечивает положение табуляции для пользователей, применяющих для навигации клавиатуру. Этот псевдокласс поддерживают не все браузеры, поэтому он практически не применяется.
Важно : Все эти псевдоклассы имееют одинаковый вес (порядок выполнения браузером), поэтому порядок в котором они размещаются в файле CSS, имеет большое значение. Псевдокласс, который появляется в файле CSS позже, заменяет собой преведущий. Правильный порядок указан выше!
В HTML все ссылки имели обязательное подчеркивание снизу. В CSS появилась интересная возможность добавляя к псевдоклассам ссылок свойство text-decoration с различными значениями, влиять на подчеркивание ссылки. Это свойство может принимать следующие значения:
Довавляя свойство text-decoration в псевдоклассы ссылок можно создавать новые классы с очень интересными эффектами.
Так же как и для простого текста мы можем задать для ссылок и другие свойства: определенный шрифт, размер шрифта, выделить ссылку жирным.
Открываем файл со стилями style.css и добавляем в следующий код:
a <
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
>
a:hover <
color:red;
text-decoration:overline;
>
Сохраняем, обновляем файл index.html и смотрим. Вот что у нас получилось.
Примечание: Мы прописали эти свойства для всех ссылок на web-страницах к которым «привязана» эта таблица стилей, если Вы хотите некоторые ссылки выделить как-то по другому, то для них нужно создать отдельный класс и естественно прописать этим ссылкам (которые хотите изменить).
Поделитесь этой информацией со своими друзьями!
Комментарии к этой статье (уроку):
Комментарии добавил(а): Алексей
Дата: 2009-03-18
На страничке где приведен пример того «что получилось» перед ссылками стоят «стрелочки-треугольнички». Как их добавить, здесь Вы ни чего об этом не говорите?
Комментарии добавил(а): Admin
Дата: 2009-03-22
Смотрите в разделе Статьи «Как добавить стрелку перед ссылкой» там все подробно описано
Комментарии добавил(а): pervik
Дата: 2010-02-18
Комментарии добавил(а): Денис
Дата: 2011-09-10
А если сайт создан на народе.ру и я хочу убрать подчёркивание и изменить цвет ссылки, что мне нужно прописать в коде этой ссылки или перед кодом?
Комментарии добавил(а): Степа
Дата: 2013-05-16
Здравствуйте. Подскажите пожалуйста, как сделать так, чтобы ссылка в меню оставалась подчеркнутой на той странице на которой нахожусь? Спасибо.
Комментарии добавил(а): Vasala18
Дата: 2017-04-23
Добрый День, вы не поможете, как сделать ссылку которая выполняла несколько действий: как например при наведении меняла цвет, при нажатии и до ее активации?
Комментарии добавил(а): АндрейК
Дата: 2017-04-24
Vasala18 создайте таблицу стилей и пропишите код Листинга 5.1 и ссылка будет при наведении менять цвет, при нажатии и до ее активации
Добавить Ваш комментарий:
 Как заработать деньги в Интернете? Создай свой ИнфоБизнес |
Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.
Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки.
HTML Ссылки, как сделать ссылку (гиперсылку) в html
Ссылки встречаются практически на всех веб-страницах. Ссылки позволяют пользователям щелкать их путь от страницы к странице.
HTML ссылки-гиперссылки
Ссылки HTML являются гиперссылками.
Вы можете щелкнуть по ссылке и перейти к другому документу.
При наведении указателя мыши на ссылку, стрелка мыши превратится в маленькую руку.
Примечание: Ссылка не обязательно должна быть текстом. Это может быть изображение или любой другой HTML-элемент.
HTML ссылки-синтаксис
В HTML ссылки определяются тегом :
Пример
href атрибут указывает адрес назначения ( https://html5css.ru/HTML/ ) ссылки.
текст ссылки является видимой частью (см. наш учебник по HTML).
Щелчок по тексту ссылки отправит вас по указанному адресу.
Примечание: Без косой черты на адреса вложенных папок, вы можете создать два запроса на сервер. Многие серверы автоматически добавляют косую черту к адресу, а затем создают новый запрос.
Локальные ссылки
В приведенном выше примере используется абсолютный URL (полный веб-адрес).
Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www. ).
Пример
Цвета ссылок HTML
По умолчанию ссылка будет выглядеть так (во всех браузерах):
Можно изменить цвета по умолчанию с помощью CSS:
Пример
HTML ссылки-целевой атрибут
Атрибут target указывает, где открыть связанный документ.
Атрибут target может иметь одно из следующих значений:
В этом примере откроется связанный документ в новом окне обозревателя/вкладка:
Примере
Совет: Если веб-страница заблокирована в рамке, можно использовать target=»_top» для выхода из кадра:
Пример
HTML ссылки-изображение как ссылка
Он является общим для использования изображений в качестве ссылки:
Пример
Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).
Названия ссылок
Атрибут title указывает дополнительные сведения об элементе. Информация чаще всего отображается как текст подсказки, когда указатель мыши перемещается над элементом.
Пример
HTML ссылки-создать закладку
Закладки HTML используются для того, чтобы позволить читателям перейти к определенным частям веб-страницы.
Закладки могут быть полезны, если ваша веб-страница очень длинная.
Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.
При щелчке ссылки страница будет прокручиваться в папку с закладкой.
Пример
Сначала создайте закладку с атрибутом id :
Chapter 4
Then, add a link to the bookmark («Jump to Chapter 4»), from within the same page:
Or, add a link to the bookmark («Jump to Chapter 4»), from another page:
Example
Внешние контуры
На внешние страницы можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.
В этом примере используется полный URL-адрес для ссылки на веб-страницу:
Пример
В этом примере ссылки на страницу, расположенную в папке HTML на текущем веб-узле:
Пример
В этом примере ссылка на страницу, расположенную в той же папке, что и текущая страница:
Пример
Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.
Когда дело доходит до ссылок, их легче принять такими, как они есть. В конце концов, вы просто ссылаетесь на какой-нибудь текст и все. Но что можно реально сделать, чтобы заставить людей кликнуть по ним? Может подчеркивание текста CSS?
Большая проблема, которую я вижу на многих блогах — ссылки не выглядят как ссылки. Читатель узнает о них только при наведении на них курсора. Это неприемлемо.
Выделите свои ссылки! В этой статье я расскажу о 8 эффективных способах изменения стиля ссылок.
Добавьте цвет
Один из лучших способов выделить ссылку состоит в том, чтобы добавить цвет! Когда большая часть текста черного цвета, добавьте другие цвета, чтобы сделать ссылки заметнее.
Но вы должны быть уверены, что выбранный цвет взаимодействует с остальной частью вашего бренда. Иначе ссылки будут выделяться, но неправильно.
Также помните о контрасте. Темный, почти черный цвет не обеспечит отличия ссылки от остального абзаца. А слишком светлый не даст достаточного контраста между белым фоном и текстом.
Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить свои ссылки:
Чтобы изменить цвет ссылок на сайте, взгляните на таблицу стилей темы и найдите следующее:
Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:
Сделайте жирнее
Еще один способ добавить контраста ссылкам состоит в том, чтобы сделать их полужирными. Выделение ссылки полужирным работает таким же образом.
Чтобы сделать CSS подчеркивание ссылки полужирным, добавьте следующий код:
Или используйте шрифт, который поддерживает различные значения насыщенности ( толщины ):
Добавьте подчеркивание
По умолчанию все ссылки оформлены подчеркиванием, а это означает, что если бы вы удалили CSS с сайта, каждая ссылка содержала бы подчеркивание. Это довольно распространенное предположение, что любой подчеркнутый текст является ссылкой. Так какой способ лучше использовать для выделения ссылок?
Более нетрадиционный способ добавить подчеркивание ссылке — установить нижнюю границу. Этот метод дает больше гибкости, когда речь заходит о том, как отображается подчеркивание.
В блоге KORY автор использует нижнюю границу для ссылок. Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать с помощью изменения внутреннего отступа ссылки:
Небольшой совет : Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:
Стиль курсивом
Выделить ссылки курсивом довольно просто, но об этом способе стилизации часто забывают. На приведенном ниже скриншоте страницы они выделяются, но при этом органично вписываются в дизайн сайта:
Сделайте все буквы заглавными
Используйте другой шрифт
Еще один способ выделить ссылки — использовать другой шрифт. Этот метод может внести беспорядок, если он неправильно использован. Так что следуйте следующим советам.
Для обеспечения максимальной слаженности выберите шрифт из того же семейства. В сжатом или черном варианте шрифт будет выделяться, но не слишком отличаться.
Для своих ссылок я выбрала шрифт, который достаточно похож, чтобы не бросаться в глаза, но отличается от остального текста. Так я получила контраст, который хотела.
Добавьте фоновый цвет
Один из моих любимых способов выделить ссылку ( после подчеркивания точками CSS ) — добавить фоновый цвет. Посмотрите на следующий пример:
Все, что нужно сделать, это добавить цвет фона и, возможно, небольшой внутренний отступ. Также можно изменить цвет шрифта для лучшей читаемости:
Комбинируйте!
Для достижения максимальных результатов скомбинируйте любые два ( или больше ) из перечисленных выше методов выделения. Вы, наверное, заметили, что в большинстве приведенных примеров ссылки были цветными. Это связано с тем, что цвет играет действительно большую роль в выделении ссылок по сравнению с окружающим текстом.