Как сделать чтобы ссылка не меняла цвет html
Перейти к содержимому

Как сделать чтобы ссылка не меняла цвет html

  • автор:

Как задать цвет посещённых ссылок?

Как только пользователь открывает ссылку, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещённых ссылок, используйте псевдокласс :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 p 

Example 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:active 

Here 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:active 

This 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, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

Заключение

Надеюсь, эта статья предоставила вам всю необходимую информацию о ссылках и их стилизации.

Добавить комментарий

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