Css Bağlantılar

Css dili ile html dersleri'mizde anlatmış olduğumuz bağlantıları daha göze hitap eder şekilde olmasını yani üstüne gelindiğinde renginin değişmesini, ilk olarak mavi gelen bağlantının farklı bir renkte altı çizgisiz gelmesini, tıklandığında farklı bir renk almasını veya ziyaret edilmiş bağlantıların farklı bir renkte veya biçimde olmasını isteyebiliriz bu özellikleri ise css dili ile yapabiliriz. 

Css Bağlantı Özellikleri

Css dilinde bağlantıları şekillendirmek için 4 özellik bulunmaktadır. Bunlar:

a:link : Ziyaret edilmemiş yani tıklanmamış bağlantının alacağı tasarımı ayarlamak için kullanılmaktadır.

a:visited : Ziyaret edilmiş yani tıklanmış bağlantının alacağı tasarımı ayarlamak için kullanılmaktadır.

a:hover : Bağlantının üzerine gelindiğinde alacağı tasarımı ayarlamak için kullanılmaktadır.

a:active : Bağlantıya tıklandığı andaki alacağı tasarımı ayarlamak için kullanılmaktadır.

Bilgi: a:hover özelliği a:link ve a:visited özelliklerinden sonra gelmelidir. a:active özelliği ise a:hover özelliğinden sonra gelmek zorundadır.

Örnek 1: 

En basit bir link özelliği kullanarak rengini değiştirme işlemleri yapalım. Link ilk olarak siyah olarak gelecek, ziyaret edildiğinde kırmızı rengi, üstüne gelindiğinde mavi ve tıklandığı anda mor rengini alacaktır.

<style type="text/css">

a:link {
  color: black;
}


a:visited {
  color: red;
}


a:hover {
  color: blue;
}


a:active {
  color: purple;
}
</style>
                 

Kodu Çalıştır

Örnek 2:

İlk olarak altı çizgileri kaldıralım css metin özellikleri dersinde anlattığımız text-decoration özelliği ile üstüne gelindiğinde ve tıklandığında altı çizgili yapma işlemini gerçekleştirelim.

<style type="text/css">

a:link {
  text-decoration:none;
}


a:visited {
  text-decoration:none;
}


a:hover {
  text-decoration:underline;
}


a:active {
  text-decoration:underline;
}
</style>                

Kodu Çalıştır

Örnek 3:

Bağlantıların arkaplan rengini değiştirelim.

<style type="text/css">

a:link {
  background-color:orange;
}


a:visited {
  background-color:red;
}


a:hover {
  background-color:purple;
}


a:active {
  background-color:blue;
}
</style>                   

Kodu Çalıştır

Örnek 4:

<style type="text/css">

a:link {
  background-color:orange;
  text-decoration:none;
  color:white;
  padding:10px;
}


a:visited {
  background-color:red;
  text-decoration:none;
  color:white;
  padding:10px;
}


a:hover {
  background-color:purple;
  text-decoration:none;
  color:white;
  padding:10px;
}


a:active {
  background-color:blue;
  text-decoration:none;
  color:white;
  padding:10px;
}
</style>                  

Kodu Çalıştır