Форматиране на хипервръзки – CSS стилове за връзки

Хипервръзките са централен елемент в уеб пространството. Всякакъв сайт ги използва, за да свърже различно съдържание помежду си и да улесни навигацията. Но стандартният дизайн на връзките често е малко непривлекателен. Хипервръзките могат лесно да се обогатят и да станат по-ползваеми с CSS. В това ръководство ще ти покажа как да стилизираш различните състояния на връзките с CSS по привлекателен начин.

Най-важни изводи

• Има три основни състояния на връзките: нормално, при надвиване и посетено.
• CSS позволява индивидуално оформяне на вида на тези състояния.
• Използването на псевдокласите:hover,:visited и:active е съществително за привлекателен дизайн.

Стъпка по стъпка ръководство

Основи на състоянията на връзките

Първо е важно да разберем трите основни състояния на хипервръзките:

1. Нормално (непосетено)
2. Hover (когато курсорът е над връзката)
3. Посетено (вече посетени връзки)

За да илюстрираш това, посети произволен уебсайт, например w3.org, и наблюдавай поведението на връзките. В стандартното състояние те се появяват в синьо. След кликването цветът им често се променя на лилаво или виолетово, което сигнализира, че вече си посетил връзката.

CSS селектори за връзки

За да стилизираш състоянията на връзките с CSS, използвай селекторите a, a:hover и a:visited.

• Селекторът a засяга нормалното състояние.
• Селекторът a:hover се грижи за вида, когато потребителят премества курсора над връзката.
• Селекторът a:visited се използва за връзките, които вече са посетени.

Добавяне на ефекти при надвиване

За да подобриш потребителското изживяване, трябва да добавиш ефект при надвиване. Тук можеш, например, да промениш Padding-а и фоновия цвят, когато връзката е надвивана. Това дава на потребителя визуална обратна връзка относно местоположението на курсора.

Настройка на декорацията на текста

Друга възможност за подобряване на дизайна на връзките е настройката на текстовата декорация. Вместо да представяш връзката винаги подчертаване, можеш да активираш това подчертаване само когато потребителят премества курсора над връзката. Това придава модерен и подреден вид.

a:hover { text-decoration: underline; }

Добавяне на активно състояние

Състоянието, в което връзка се кликва, се определя от селектора a:active. Това състояние показва, че потребителят активно избира връзката.

Обединяване на всички състояния

Сега си разгледал всички необходими състояния за оформяне на връзките.

a:visited { color: green; }

a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }

a:active { background-color: lightgrey; }

Резюме – Оформяне на хипервръзки с CSS

В това ръководство научи как да стилизираш различните състояния на хипервръзките с CSS ефективно. Сега знаеш, че е важно да използваш състоянията:hover,:visited и:active правилно, за да създадеш привлекателен и лесен за ползване уеб интерфейс. Чрез прости настройки, като промени на цвета и Padding-а, можеш да направиш връзките по-привлекателни и интуитивни.