Стили ссылок. Псевдоклассы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
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;
}