Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

CSS İle Bağlantılara Şekil Vermek

51 sec read

Sitemizi güzel göstermek için kimi zaman bağlantılarımıza (linklerimize) maviden farklı bir renk vermek isteriz, kimi zaman ise üzerine gelindiğinde altının çizilmesini isteriz. Bunları css’in bağlantı seçicileri olan,

  • A:link
  • A:visited
  • A:active
  • A:hover

ile düzenleriz. Şimdi bunlardan kısaca bahsederek örnek verelim.

A:link
Normal, ziyaret edilmemiş bağlantıları düzenlerken bunu kullanırız. Örneğimizde alt çizgisi olmasın bu linklerin ve renkleri kırmızı olsun istiyorum. Css dosyanızda şunları eklemelisiniz.
[css]A:link {text-decoration: none;
color: Red;}[/css]

A:visited
Ziyaret edilmiş bağlantıları düzenlerken kullanılır. Örneğimizde alt çizgisi yine olmasın fakat bu sefer rengimiz mavi olsun.
[css]A:visited {text-decoration: none;
color: Blue;}[/css]

A:active
Aktif bağlantılar için kullanılır. Bir bağlantı siz üzerine bir kez tıkladığınız zaman aktif olur. Örneğimizde alt çizgi olmasın, renk mavi olsun ve bağlantının boyu büyüyüp 18 piksel olsun. Bu arada normal boy 12 piksel kabul ediyorum.
[css]A:active {text-decoration: none;
color: Blue;
font-size: 18px;}[/css]

A:hover
Fare ile bağlantıların üzerine geldiğinizde almasını istediğiniz şekli belirlememize yarar. Bağlantının üzerine geldiğinde yazımızı kalınlaştıralım.
[css]A:hover {text-decoration: none;
color: Blue;
font-weight: bold;}[/css]

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer