Несколько примеров оформления ссылок в блоге

Привет, друзья. Сегодня захотелось вернуться к теме оформления ссылок. Всем понятно, что ссылки помогают создать удобную навигацию по блогу для посетителей. И для лучшего визуального восприятия они оформляются стилями CSS.



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

Вообще, существует 4 состояния гиперссылок -

Ссылка в состоянии покоя (по которой не осуществлён переход)- a:link
Посещённая ссылка с атрибутом - a:visited.
Ссылка при наведении на неё курсора мышки - a:hover
И уже нажатая ссылка - a:active.

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

Это можно задать непосредственно для всех ссылок в блоге. Прочитайте пост изменить цвет ссылки и красиво её оформить. Или для отдельно взятой, непосредственно в редакторе сообщений в режиме HTML. Здесь мы должны задать определённый класс ссылки. Допустим -

<a href=" адрес куда ведёт ссылка" class="ops ">анкор (текст гиперссылки)</a>

И задать нужные стили, оформив их так

<style class="ops">
a:link {
  color: #330066 ;
  border-bottom: 1px solid;
}
a:visited {
  color: #CCCCFF ;
}
a:hover {
  color: #CC0099 ;
  border-bottom: .07em dotted;
}
a:active {
  color: #9933CC ;
  border-bottom: 1px solid ;
}</style>

Пример такой выше на страницу оформления ссылок. Обратите внимание, что она отличается от других ссылок моего блога.

Таким образом можно оформить все ссылки или отдельно взятые. Давайте ещё поиграемся со стилями.

Можно убрать подчёркивание у ссылок, задав такое условие в коде

a {
  text-decoration: none;
}

Или изменить вид внешней границы

a {
  text-decoration: none;
  border-bottom: 3px dashed ;
  padding-bottom: 2px;
}

Попробуем добавить анимационный фон при наведении курсора на ссылку. шпаргалки блогерши.

Так же, задали класс и свойства для оформления. Весь код -

<a class="animation" href="адрес страницы куда ведёт ссылка">
текст</a>.

<style type="text/css">
.animation:hover{
 background-image:url(адрес изображения.gif );
}
</style>

Измените background-image:url(адрес изображения.gif );

Чтобы было понятно, рассмотренные свойства стилей можно комбинировать и сочетать самым различным образом. К этой теме ещё буду возвращаться. А кому интересно, поиграйтесь на тестовом блоге с оформлением гиперссылок и создайте свои эффекты.

Спасибо всем за внимание и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email