Для оформления гиперссылок используются встроенные стили, присваиваются классы и идентификаторы, т.е применяются те же методы оформления, что и к прочим тегам.

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

Как сделать ссылку блочной

Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.

/* CSS. Создаем классы и индексы для ссылки */
 
/* делаем ссылку блочной */
a.block_link {display: block;}
/* плавающей (автоматически становится блочной */
a#float_link {float: left;}
/* абсолютной (автоматически становится блочной */
а.absolut_link {position: absolute;}

После этого со ссылкой вида

<a class="block_link" href="#/">Блочная ссылка</a>

можно обращаться как с блочным элементом.

Примечание

href - обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/.При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.

Псевдоклассы

Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):

- Цвет. Обычно браузеры отображают не посещенную ссылку синим цветом
- Подчеркивание
- При наведении на ссылку, вид курсора меняется
- При клике, цвет ссылки меняется на красный
- После посещения, цвет ссылки становится фиолетовым

При отображении гиперссылок большинство браузеров по умолчанию использует определенные стилевые правила.

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

Но что делать с изменением цвета при клике на ссылку, или после посещения?

Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
a:псевдокласс { набор стилевых правил;}

Различают 4 специальных состояния гиперссылок.

  1. a:link - не выбранная пользователем, непосещенная гиперссылка
  2. a:visited - ссылка, посещенная ранее
  3. a:hover - выбранная ссылка, на которую наведен указатель курсора
  4. a:active - выбранная ссылка, в настоящий момент обрабатываемая браузером
    (при нажатии на кнопку мыши)
  5. a:focus - ссылка, получившая фокус

Как сделать ссылку кнопкой

Пример оформления ссылки:  Кнопка

<!--HTML.-->
<a href="#/" class="link_button">Кнопка</a>

Псевдоклассы можно применять как непосредственно к тегу a, так и к классу ссылки

/*-- CSS. --*/
.link_button {
  padding: 4px 12px;
  border: 1px solid #CDECD3;
  background: #E9FFEE;
  border-radius: 6px;
}
.link_button:hover {
  background: black;
  color: #fff;
}
.link_button:active {
  color: red;
}

Внимание специфичность!

Почему иногда псевдоклассы не работают?

Т.к все рассмотренные псевдоклассы имеют одинаковый приоритет, то следующий переопределяет предыдущий. Здесь важен порядок записи стилей.

"LoVe & HAte" - любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.