CSS Linkler
CSS Linkler
Web bağlantılarına (link) herhangi bir CSS özelliği kullanılarak (color, font-familiy, background vb) stil verilebilir. Bunun dışında linkler, hangi durumda (state) bulunduklarına göre de şekillendirilebilirler. Dört bağlantı durumu aşağıdaki gibidir:
- a:link – Normal ziyaret edilmemiş bağlantı.
- a:visited – Kullanıcının ziyaret ettiği bir bağlantı.
- a:hover – Kullanıcının faresinin üzerinde gezindiği bağlantı.
- a:active – Tıklanmış olan bağlantı.
/* ziyaret edilmemiş bağlantı */
a:link {
color: #FF0000;
}
/* ziyaret edilmiş bağlantı */
a:visited {
color: #00FF00;
}
/* fare gezdirilen bağlantı */
a:hover {
color: #FF00FF;
}
/* seçilmiş link */
a:active {
color: #0000FF;
}
Çeşitli bağlantı (link) durumları için stil tanımı yaptığınızda, bazı sıra kuralları mevcuttur:
- a:hover, a:link ve a:visited'ten sonra gelir.
- a:active, a:hover'dan sonra gelir.
Yaygın bağlantı stilleri
Yukardaki örnekte, duruma göre bağlantının renk değiştirdiğini gördük. Bağlantılara stil vermek için kullanılan diğer yaygın yöntemleri de aşağıda vereceğiz:
- Metin dekorasyonu
Text-decoration özelliği, yaygın olarak linklerden alt çizgi karakterini uzaklaştırmak için kullanılır.
a:link {
text-decoration: none;
}
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
- Zemin rengi
Background-property özelliği, bağlantılar (link) için zemin rengini belirler.
a:link {
background-color: #B2EE94;
}
a:visited {
background-color: #FFFF89;
}
a:hover {
background-color: #FA704D;
}
a:active {
background-color: #FF704D;
}
Yorumlar
Yorum Gönder