Сегодня 12 января, воскресенье

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Блог счастливого веб-разработчика / Запись в блоге

	Блог счастливого веб-разработчика Голосов: 1 Адрес блога: http://ridler-fun.livejournal.com/ Добавлен: 2010-12-26 16:27:55

Подчеркивание ссылок (text-decoration)

2010-12-11 07:46:59 (читать в оригинале)

Еще с самого начала развития Сети ярко-синий подчеркнутый текст сигнализировал: "Нажмите сюда и перейдете туда". Однако стандартные атрибуты подчеркивания и цветового оформления ссылок - это то, что в первую очередь изменяет любой веб-дизайнер. Подчеркивание - слишком распространенный способ выделения, который уже очень надоел. У нас есть возможность изменить ситуацию, одновременно обеспечив хорошее оформление ссылок.

Полное удаление подчеркивания. Чтобы убрать стандартное подчеркивание, используем свойство text-decoration со значением none:

   a : link { text-decoration: none; }

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

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

a : link, a : visited
{
   text-decoration: none;
   background-color: #f00;
}

a : hover
{
   background-color: transparent;
   text-decoration: underline;
}

Использование свойства нижней границы. У нас есть возможность управлять цветом, толщиной или стилем стандартной линии подчеркивания ссылок, которое всегда отображается в виде линии толщиной 1 пиксел того же цвета, что и текст
Большего разнообразия можно добиться путем использования вместо подчеркивания свойства border-bottom
Скрыть обычное подчеркивание и добавить черту в виде пунктирной линии-границы можно следующим образом:

a : link
{
text-decoration: none;
border-bottom: dashed 2px #f55;
}

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

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

a
{
   text-decoration: none;
   background: url(umages/underline.jpg) repeat-x left bottom
   padding-bottom: 5px;
}

Тэги: decorate, text

Блограйдеров
14503

Блогов
219935
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»

Категория «Бизнес»

Взлеты Топ 5


+1006	1094	ДеВаЧкА-НеФоРмАлКа
+989	1001	White_Rabbit_Pics
+988	1000	Смотрим на жизнь сквозь сетку
+934	1101	Вадим Гоц
+928	932	Блог о подарках и праздниках

Падения Топ 5


-1	10	Блог Находчивого Продавца
-1	459	alexfox2011 - BLOG.I.UA
-2	3	Деньги в интернете
-5	992	Allendy.ru - экономический портал
-6	729	Натяжные потолки Херсон

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.