Как задать цвет посещённых ссылок?
Как только пользователь открывает ссылку, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещённых ссылок, используйте псевдокласс :visited, который добавляется к селектору A , как показано в примере 1.
Пример 1. Цвет посещённых ссылок
Результат данного примера показан ни рис. 1. Обычные ссылки заданы красным цветом, а посещённые — серым.

Рис. 1. Цвет посещённой ссылки
См. также
- Атрибут vlink
- Виды ссылок
- Псевдокласс :visited
- Псевдоклассы в CSS
- Типы ссылок
Как у тега убрать визуальные эффекты?
Надо прописать для каждого состояния ссылки стиль оформления, используя псевдоклассы. А использовать !important надо только в самых крайних случаях.
a.text:active, /* активная/посещенная ссылка */ a.text:hover, /* при наведении */ a.text
block1
Отслеживать
ответ дан 25 июл 2016 в 11:45
5,542 2 2 золотых знака 20 20 серебряных знаков 41 41 бронзовый знак
Спасибо спасибо спасибо но при наведении мне как раз не надо
25 июл 2016 в 12:00
@ЕвгенийЛюбимов в таком случае достаточно прописать a.text:active, a.text <. >, а для наведения прописать отдельно ` a.text:hover <. >`, если понадобится в будущем. отметьте мой ответ принятым галочкой слева от вопроса, если он вам подходит
25 июл 2016 в 12:40
Мне подошел еще первый вариант задать цвет большего мне и не требовалось=) Но вам все равно спасибо!
25 июл 2016 в 13:23
@ЕвгенийЛюбимов не вопрос, но тогда следует учесть на будущее, что если всё-таки будет нужда задать какой-то другой цвет для ссылок при наведении, то, например, a.text:hover < color: green>a < color: #000 !important >не сработает, и придётся прописывать !important везде. а это повлечёт за собой вероятные проблемы в виде уродливого трудноподдерживаемого кода
CSS не меняет цвет ссылок. Как поменять цвет ссылки?
Верстаю макет. Сделал навигацию, но по макету надо поменять цвет ссылок и сделать чтобы при наведении цвет менялся и появлялся фон(с этим я справился). Но цвет не меняется. Ещё не работает text-decoration:none;
Home
About
Work
Blog
Contact
.welcome < width:100%; height:100vh; background:url("../image/welcome_01.jpg"); margin:0px; padding:0px; >.navigation < justify-content:right; display:flex; align-item:right; color:#fff; text-decoration:none; padding-left:200px; padding:60px; >.nav-item < font-family: 'Titillium Web',sans-serif; font-weight:regular; font-size:16px; color:#fff; text-decoration:none; text-align:center; display:inline-block; padding:10px; >.nav-item:hover
- Вопрос задан более года назад
- 1133 просмотра
Как изменить цвет ссылки в CSS
В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:
- Не посещенная ссылка : состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
- Посещенная ссылка : стилизуется с помощью псевдокласса :visited.
- Активная : ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
- С сылка, на которую пользователь навел курсор : стилизуется псевдоклассом :hover.
- Выделенная фокусом ввода : стилизуется с использованием псевдокласса :focus.
Пример оформления простой ссылки
CSS links pExample for a simple link

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.
Эти стили можно изменить, используя следующие свойства CSS. Пример использования свойства text-decoration:
p < font-size: 30px; text-align: center; >a:link < text-decoration: none; >a:visited < text-decoration: none; >a:hover < text-decoration: underline; >a:activeHere is a link

Пример, в котором для оформления ссылки используется свойство background-color
p < font-size: 30px; text-align: center; >a:link < background-color: coral; >a:visited < background-color: cyan; >a:hover < background-color: DarkMagenta; >a:activeThis is a link

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.
a:link, a:visited < background-color: DarkSalmon ; border: none; color: #FFFFFF; padding: 25px 52px; text-align: center; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none; font-size: 20px; text-align: center; cursor: pointer; display: inline-block; >a:hover, a:active BUTTON

Свойства, указанные в псевдоклассе :hover, могут применяться и к другим элемента, а не только к ссылкам.
Ссылки могут быть стилизованы так, чтобы в определенных ситуациях выглядеть и вести себя как кнопки. Навигационное меню размечено как список, содержащий ссылки. Его можно оформить так, чтобы оно выглядело как набор кнопок управления. Пример
-
мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае ).
-
, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.
Заключение
Надеюсь, эта статья предоставила вам всю необходимую информацию о ссылках и их стилизации.