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>
