Среда, 13.11.2019, 23:40
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Как убрать подчеркивание ссылки

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

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

По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега a в CSS. За подчеркивание ссылок отвечает специальный параметр text-decoration, которые может принимать следующие значения:
underline (подчеркивание есть);
none (выключить подчеркивание).

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

<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>

  <a class="podcherk" href="">Ссылка с подчеркиванием</a>

<a class="notpodcherk" href="">Ссылка без подчеркивания</a>

<a href="">Ссылка с подчеркиванием и без class</a>

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

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

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

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


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

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

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

    <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> <a href="">Ссылка 1</a>

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

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

    <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; /* отступ от ссылки */ } .link_3:hover /* фон при наведении */ { background: url("img/fon_on.jpg") 0 100%; } </style> <a class="link_1" href="">Ссылка с пунктирным подчеркиванием</a> <a class="link_2" href="">Ссылка со сплошным подчеркиванием</a> <a class="link_3" href="">Ссылка с подчеркиванием в виде фона</a>

Преобразуется на странице в:
Ссылка с пунктирным подчеркиванием

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

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

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

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

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

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz