Как убрать синий цвет ссылки в html

Как изменить цвет ссылки в CSS

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

• Не посещенная ссылка : состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
• Посещенная ссылка : стилизуется с помощью псевдокласса :visited.
• Активная : ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
• С сылка, на которую пользователь навел курсор : стилизуется псевдоклассом :hover.
• Выделенная фокусом ввода : стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

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

Заключение

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

Как изменить цвет ссылки и фона под ней?

Используйте стилевое свойство color для задания цвета текста и background для изменения цвета фона под ссылкой, добавляя их к селектору A , как показано в примере 1.

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Для сборки мегадроида требуется открыть коробку, достать мешочек с микросхемами и сложить их в нужном порядке, пользуясь нашим подробным 8631-страничным руководством.
  

Результат данного примера показан ни рис. 1.

Рис. 1. Вид ссылок, у которых изменён цвет и фон

В случае добавления к ссылке фона желательно установить поля с помощью свойства padding , чтобы текст не прилегал плотно к краю цветной области.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Как убрать фиолетовый цвет ссылок в css

Цвет ссылок, по умолчанию, меняется в одном из трёх случаев:

• Ссылка, по которой пользователь уже перешёл. За это состояние отвечает псевдокласс :visited
• Ссылка при наведении курсора мыши. Изменить стили можно с помощью псевдокласса :hover
• Ссылка при клике, но до момента, как произошёл переход. Определить стили у такой ссылки можно у псевдоэлемента :active

 href="https://ru.hexlet.io">На сайт Хекслета 

a:hover  /* Цвет при наведении */ color: red; > a:visited  /* Цвет посещённой ссылки */ color: green; > a:active  /* Цвет ссылки при клике */ color: blue; > 

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

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Рис. 2. Изменение цвета фона ссылки

См. также

• :focus на мобильных устройствах
• background
• color
• currentColor
• text-fill-color
• Анимация ссылок при наведении
• Атрибут link
• Виды ссылок
• Всплывающая подсказка
• Единицы цвета в CSS
• Использование :hover
• Линейный градиент
• Наследование в CSS
• Несколько фоновых картинок
• Нормальное позиционирование
• Переходы с помощью :hover
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Работа с типографикой
• Селекторы CSS
• Состояния кнопок
• Сочетание с псевдоклассами
• Спрайты
• Типы ссылок
• Установка фона и градиента
• Фоновая картинка