Оформляем ссылки

7.03.2007 @ Рубрики: CSS  

Существует несколько способов выделения ссылок. И хотя как бы не советовали ученые мужи оставлять ссылки в их первоначальном девственно-синем цвете, большая часть населения сети этот совет игнорируют. А посему и мы исключением не будем.

Начнем, пожалуй со стандарта. Существует четыре состояния ссылки:

  • link - состояние покоя
  • visited - посещенная ссылка
  • active - активная, т.е. выделенный мышкой, но с убранным с него курсором. Возможно видели этакие повисшие вокруг ссылок или картинок “рамочки” выделения - вот это оно и есть.
  • hover - (перевод. как “парение”) - реакция ссылки при наведении

Однако, обойдемся двумя: link и hover. Нам нужны два параметра:

  1. цвет (color)
  2. и т.н “украшательство” (text-decoration)

text-decoration - Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.

Параметры:

  • line-through - перечеркнутый текст;
  • overline - линия проходит над текстом.
  • underline - подчеркнутый текст;
  • none - отменяет все эффекты

border-bottom - Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.

Параметры:

  • dotted
  • dashed
  • solid
  • double

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

Для первого случая выход очевиден - нам нужно два состояния ссылки:

a:link {color:#0A9DDC; text-decoration:underline;}
a:hover {color:#DE0717; text-decoration:none;}

Нестандартное подчеркивание

Для нестандартного подчеркивания достаточно добавить линию другого цвета

a:link {color:#0A9DDC; text-decoration:none;}
a:hover {color:#DE0717; text-decoration:none; border-bottom: #A4A4A4 1px solid;}

Меняем фон

Кроме того, можно изменить и сам фон ссылки:

a:link {color:black; text-decoration:none; background-color:none;}
a:hover {color:black; text-decoration:none; background-color:#A4A4A4;}

Еще пару моментов

Чтобы создать свой! вид подчеркивания можно прикрепить к ссылке какой-нибудь картинк:

background-image: url(underline.gif);

А если надо чтобы картинка растягивалась только в ширину (например, это может быть двух пиксельная картинка с черным и красным пикселом), необходимо ограничить повтор фона

background-image: url(underline.gif);

Черно-белых комментариев: 5

  • Yuriy :

    В “Еще пару моментов” забыл background-repeat:no-repeat;

    P.S. защитный код задолбал

  • Delchyve :

    Да, спасибо.
    Код - неплохая защита от спамеров. Вот ты, например, как с ними борешься?

  • Yuriy :

    Спам у меня просто не проходит модерацию.

  • Delchyve :

    Ладно. отключил. Поживем некоторое время без защитного кода, посмотрим на активность спамеров:)

  • Yuriy :

    :)

Оставьте черный или белый комментарий :)

HTML: разрешено использование: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>