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

Връзки за стилизиране

Връзки могат да бъдат оформени с всеки CSS собственост, като например color, font-family, font-size, и padding. Ето един лесен пример:

a { color: hotpink; }

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

Връзките също имат 4 състояния и много програмисти стилизират всяко състояние по различен начин. Четирите държави са:

  • a:link: непосетена, некликнала връзка
  • a:visited: посетена, щракната връзка
  • a:hover: връзка, когато мишката на потребителя е над нея
  • a:active: връзка при щракване

В имота е отговорен за създаването на URL адреси и може да бъде модифициран с помощта на редица CSS стайлинг свойства, въпреки че има няколко по подразбиране:

  1. Подчертайте
  2. Син цвят

Можете да промените тези чрез добавяне на промяната на colorи text-decorationсвойства.

 color: black; text-decoration: none;

Можете също така да оформите връзката въз основа на взаимодействие, като използвате тези свойства, известни също като състояния на връзката:

  • a: link - нормална, непосетена връзка
  • a: посети - връзка, която потребителят е посетил
  • a: hover - връзка, когато потребителят миши върху нея
  • a: active - връзка в момента, в който е щракната

Ето няколко примерни CSS, използващи 4 състояния:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Имайте предвид, че има някои правила за подреждане, когато задавате стила за състоянията на връзките.

  • a:hoverТРЯБВА да дойде след a:linkиa:visited

a:active ТРЯБВА да дойде след това a:hover

a: връзка - нормална, непосетена връзка a: посетена - връзка, която потребителят е посетил a: hover - връзка, когато потребителят миши върху нея a: активна - връзка в момента, в който е щракнат

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } 

Повече за стилизирането в CSS:

  • Как да оформите HTML таг директно в CSS
  • Как да оформяте списъци с CSS
  • Как да оформите бутони с CSS