Формат и интерактивност на линковете

Контрол върху външния вид и поведението на линковете

Линковете имат стандартно поведение – син цвят, подчертаване и различен стил за посетени страници. С CSS можем изцяло да поемем контрола върху това как изглеждат и как реагират при взаимодействие. Най-важното е да знаете, че чрез псевдокласове като hover и active можем ясно да покажем на потребителя, че даден елемент е интерактивен.

Стъпка по стъпка: стилизиране и добавяне на интерактивност

1. Премахнете подчертаването на всички линкове чрез text-decoration: none;.
2. Задайте собствен цвят с color, за да замените стандартните цветове за посетен и непосетен линк.
3. Ограничете стилизирането само до линкове с href, използвайки селектор от типа a[href], за да не засягате anchor target елементи без href.
4. Добавете фон (background-color) и вътрешно отстояние (padding), за да направите линковете да изглеждат като бутони.
5. Създайте :hover стил – например по-светъл фон и font-weight: bold;.
6. Добавете :active стил, който се активира при натискане на линка – например черен фон.

Използвани CSS свойства и псевдокласове

• text-decoration – премахва или добавя подчертаване на текста.
• color – задава цвят на текста.
• a[href] – селектор, който избира само линкове с атрибут href.
• :hover – прилага стил при преминаване на мишката.
• :active – прилага стил при натиснат линк.

Експериментирайте с различни цветове и отстояния, за да изградите ясна и интуитивна навигация.