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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

HTML по теме

CSS по теме

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

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

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

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

По умолчанию ее цвет синий и она будет иметь подчеркивание.

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

Есть и другой способ изменить внешний вид ссылки. Для этих целей используются таблицы стилей CSS. Причем вы сможете задать значения для ссылок при различных условиях, будь-то активная ссылка (a:active), посещенная ссылка(a:visited) либо ссылка при наведении мыши (a:hover). Вот как это делается:

a color:#FF0000;
text-decoration:none
>

a:active color:#FF0000;
text-decoration:none
>

a:visited color:#666666;
text-decoration:none
>

a:hover color:#339900;
text-decoration: underline
>

Создайте два файла.

Первый index.html с таким содержимым:

А второй назовите style.css. В нем запишите следующее:

a color:#FF0000;
text-decoration:none
>

a:active color:#FF0000;
text-decoration:none
>

a:visited color:#666666;
text-decoration:none
>

a:hover color:#339900;
text-decoration: underline
>

Изменяя значения свойств можно менять внешний вид ссылок.

Сайт на HTML

• Структура базовой web страницы HTML
• Редактирование текста на HTML странице
• Списки в HTML странице
• Гиперссылки
• Создание каркаса страницы
• Изменить цвет ссылки HTML
• Как сделать веб страницу html с картинкой для чайников
• HTML таблица, заголовок таблицы, ширина ячейки

Таблицы стилей — CSS

• Основные понятия CSS
• Классы и идентификаторы css
• Стили применяемые для оформления текста
• Оформление ссылок с использованием стиля
• Цвета и фон в css
• Свойства css определяющие отступы
• Позиционирование в css
• Свойства для управления обтеканием
• Свойства display
• Высота строки CSS
• Описание тега P
• Масштабирование фонового изображения css
• Сложные конструкции селекторов — составные селекторы
• Flexbox в CSS для верстки элементов
• Как подключить шрифт на сайт в css
• Псевдокласс nth-child

Вебмастеру в помощь

• Вывод сайтов из под АГС-30
• Как заработать, не выходя из дома
• Примерный план самостоятельного продвижения сайта
• Подбираем ключевые слова для сайта
• Методы оптимизации сайта Joomla.
• On-line генераторы текстов, Генераторы текста онлайн
• Правила для защиты сайтов Joomla
• Защита сайтов Joomla. Продвинутый уровень.
• Из каких файлов состоит шаблон Joomla, и какие функции они выполняют
• Плагин защиты админки JLSecure Мой сайт
• Выпадающее меню Joomla
• HD-Custom CSS модуль для Joomla 2.5 & 3
• Зачем нужно закрывать внешние ссылки от индексации
• Расширенный менеджер модулей
• Увеличение картинки в статье.
• Программа Clip2Net снятие скриншотов
• Плагин Joomla – DigiStyle
• Модуль вывода новостей для Joomla News Show Pro GK4 3.3.7
• Кнопка “Наверх” SmoothTop для Joomla
• Текстовый редактор JCE
• Плагин Sourcerer для вставки скрипта
• Rich Snippets Vote плагин для Голосования
• Меню для Joomla
• Плагин для удаления дублей Shnodoubles
• Проверка и контроль URL сайта
• Миграция Joomla 1.5 на 2.5 при помощи jUpgrade
• Закрыть доступ на раздел сайта Joomla

Мои услуги

ДОРАБОТКА МОДЕРНИЗАЦИЯ
УСОВЕРШЕНСТВОВАНИЕ
ТЕХНИЧЕСКАЯ ПОДДЕРЖКА
ОБСЛУЖИВАНИЕ САЙТОВ
НА JOOMLA.

Городской округ Геленджик

Пн-Вс, с 9.00 до 20:00

©2011-2022 sitedelkino.ru — Вебмастеру в помощь. Все права защищены.

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

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :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
• Состояния кнопок
• Сочетание с псевдоклассами
• Спрайты
• Типы ссылок
• Установка фона и градиента
• Фоновая картинка

Стилизация ссылок

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

• ссылки без подчёркивания;
• декоративное подчёркивание;
• выделение фоновым цветом;
• рамки;
• рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

Ссылки без подчёркивания

Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration , они наследуют свойства селектора a .

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration : none , следует воспользоваться псевдоклассом :hover . Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom , которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed , получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none , чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.

Использование фонового цвета

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

Пример 5. Фон под ссылкой

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding , создающее поля вокруг текста (рис. 2).

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

Рамка вокруг ссылки

При использовании рамок со ссылками возможны два варианта. Первый — рамка вокруг ссылок устанавливается заранее и при наведении на неё курсора меняет свой цвет. И второй — рамка отображается, только когда на ссылку наводится курсор.

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

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

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover . Прозрачный цвет указывается с помощью ключевого слова transparent , в остальном стиль не поменяется.

a < border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */ >a:hover < border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ >

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Рис. 3. Выделение ссылки с помощью рисунка

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^=»http://»] <. >, как показано в примере 7.

Пример 7. Рисунок возле ссылки

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»] , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

См. также

• text-decoration
• Начертание
• Оформление ссылок
• Свойства текста в CSS