• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Купить Буклеты в Алматы
‘тоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Как убрать подчеркивание ссылки

Как убрать подчеркивание ссылки

Если Вы задались таким вопросом, то, скорее всего, Вам плохо знакомы стили CSS. В этой статье я опишу как можно убрать подчеркивание ссылок с помощью CSS, а также расскажу про противоположную задачу как сделать подчеркивание ссылок при наведении и т.п. Рассмотрим все возможные варианты.

По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега <a> в CSS.

За подчеркивание ссылок отвечает специальное свойство CSS text-decoration, которое может принимать следующие значения:

  • underline (подчеркивание есть);
  • none (выключить подчеркивание);

Примеры использования text-decoration

Пример №1. Убираем подчеркивание у ссылки

Рассмотрим первый вариант, в котором мы зададим общий (шаблонный) стиль для ссылок (цвет и размер) и еще зададим два класса ссылок. Класс podcherk включает ссылке подчеркивание, а notpodcherk соответственно убирает подчеркивание. Следующий код демонстрирует это:

<html> <head> <style type="text/css"> a{ color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ } .podcherk /* у ссылки с классом podcherk будет подчеркивание всегда */ { text-decoration: underline } .notpodcherk /* у ссылки с классом notpodcherk не будет подчеркивания по умолчанию */ { text-decoration: none } .notpodcherk:hover { text-decoration: none } </style> </head> <body> <a class="podcherk" href="">Ссылка с подчеркиванием</a> <a class="notpodcherk" href="">Ссылка без подчеркивания</a> <a href="">Ссылка с подчеркиванием и без class</a> </body> </html>

Вот во что преобразуется этот код:

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

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



Пример №2. Убираем подчеркивание при наведение

Теперь рассмотрим такой случай, чтобы сделать подчеркивание ссылки при наведение курсора на неё.

<html> <head> <style type="text/css"> a{ color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ text-decoration: none; /* убираем подчеркивание */ } a:hover /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */ { text-decoration: underline } a:visited /* класс для посещенных ссылок (изменяем их цвет на черный) */ { color:black; } </style> </head> <body> <a href="">Ссылка 1</a> </body> </html>

Данный код преобразуется в такую ссылку:

Ссылка 1

Пример №3. Делаем красивое подчеркивание

На последок рассмотрим необычное оформление ссылки, а именно сделаем красивое подчеркивание для ссылки в трех вариантах: пунктирное, сплошное и фоновое. На самом деле это все экзотика, но в некоторых случаях можно сделать сайт более интересным, сделав необычное подчеркивание ссылок.

<html> <head> <style type="text/css"> a { color: #000000; /* цвет ссылки */ text-decoration: none; /* убираем подчеркивание */ } a.link_1 { border-bottom: 1px #0000ff dashed; /* пунктирное подчеркивание ссылки */ zoom:1; /* для IE6 и IE7 */ } a.link_1:hover /* цвет подчеркивания при наведении курсора */ { border-color: #00aaff; } a.link_2 { border-bottom: 3px #0000ff solid; /* сплошное подчеркивание */ padding-bottom: 1px; /* отступ между подчеркиванием и ссылкой */ } a.link_2:hover /* цвет подчеркивания при наведении курсора */ { border-color: #00aaff; } a.link_3 { background: url("img/fon_off.jpg") 0 100%; /* фон третьей ссылки */ padding-bottom: 2px; /* отступ от ссылки */ } a.link_3:hover /* фон при наведении */ { background: url("img/fon_on.jpg") 0 100%; } </style> </head> <body> <a class="link_1" href="">Ссылка с пунктирным подчеркиванием</a> <a class="link_2" href="">Ссылка со сплошным подчеркиванием</a> <a class="link_3" href="">Ссылка с подчеркиванием в виде фона</a> </body> </html>

Преобразуется на странице в:

Ссылка с пунктирным подчеркиванием

Ссылка со сплошным подчеркиванием

Ссылка с подчеркиванием в виде фона

Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).



Читайте также:
• Как изменить вид ссылки при наведении
• Как увеличивать изображения (все способы)
• Как сделать карту изображений (карта ссылок)
• Как сделать слайдер
• Как сделать обтекание картинки текстом
• Как открыть ссылку в новом окне
• Коды символов для HTML
• Добавление социальных кнопок на сайт
• Коды и названия html цветов для сайта
• Как сделать бегущую строку на сайте

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2025 - Zarabotat-Na-Sajte.ru