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; }
<!DOCTYPE html> <html> <head> <style> /* ziyaret edilmeyen bağlantı */ a:link { color: #FF0000; } /* ziyaret edilen bağlantı */ a:visited { color: #00FF00; } /* fare gezinen bağlantı */ a:hover { color: #FF00FF; } /* seçilmiş bağlantı */ a:active { color: #0000FF; } </style> </head> <body> <p><b><a href="sec.html" target="_blank">DOGUS UNIVERSITESI</a></b></p> </body> </html>
Ç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; }
<!DOCTYPE html> <html> <head> <style> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } </style> </head> <body> <p><b><a href="sec.html" target="_blank">This is a link</a></b></p> <p><b>Not</b> a:hover, a:link ve a:visited tan sonra gelmeli</p> <p><b>Not</b> a:active, a:hover'dan sonra gelmeli</p> </body> </html>
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; }
<!DOCTYPE html> <html> <head> <style> a:link { background-color: #B2FF99; } a:visited { background-color: #FFFF85; } a:hover { background-color: #FF704D; } a:active { background-color: #FF704D; } </style> </head> <body> <p><b><a href="sec.html" target="_blank">FRANSIZ KUTUPHANESI LINKI</a></b></p> <p><b>Not</b> a:hover, a:link ve a:visited tan sonra gelmeli</p> <p><b>Not</b> a:active, a:hover dan sonra gelmeli</p> </body> </html>