CSS ile Linkler Üzerinde Çalismak
Linkler Farkli Yollarla Biçimlendirilebilir.
Linkleri Biçimlendirmek
Linkler bir çok CSS özelliki ile biçimlendirilebilir (Örnegin color,font-family,background v.b).
Linklerin durumlarina görede farkli biçimlendirmeler uygulanabilir. Linklerin durumlarina bakacak olursak
- a:link – Normal durumdaki biçimi yani tiklanmamis andaki durumu
- a:visited – Mouse ile üzerine gelindigi zamanki biçimi
- a:hover – Link tiklandiktan sonraki biçimi
- a:active – Link aktif hale yani tiklandigi andaki durumu
a:link {color:#FF0000;} /* tiklanmamis link */
a:visited {color:#00FF00;} /* tiklanmis link */
a:hover {color:#FF00FF;} /* mouse üzerine gelen link */
a:active {color:#0000FF;} /* tiklandigi andaki link */
Linklerin farkli durumlarina ait biçimlendirme uygularken bazi kurallara uymak gerekir:
- a:hover : a:link ve a:visited durumlarindan sonra tanimlanmalidir.
- a:avtice : a:hover durumundan sonra tanimlanmalidir.
Genel Link Biçimlendirmeleri
Yukaridaki örnekde linklerin durumlarina göre renk özelligi ayaralnmistir.
Simdi ise linkler için diger genel biçimlendirme özelliklerine bakalim.
Linke Ait Metne Sekil Verme (Text Decoration)
text-decoration özelligi genellikle linklerin altindaki çizgiyi kaldirmak için kullanilir.
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Arkaplan Rengi (Background Color)
background-color özelligi linke ait arkaplan rengini ayarlamak için kullanilir.
a:link {background-color:#C2FF99;}
a:visited {background-color:#FFFF75;}
a:hover {background-color:#FF704E;}
a:active {background-color:#FE704E;}
.
Simdi link Biçimlendirme için birkaç örnek yapalim:
a.bir:link {color:#ff0000;}
a.bir:visited {color:#0000ff;}
a.bir:hover {color:#ffda00;}
a.iki:link {color:#ff0000;}
a.iki:visited {color:#0000ff;}
a.iki:hover {font-size:150%;}
a.uc:link {color:#ff0000;}
a.uc:visited {color:#0000ff;}
a.uc:hover {background:#6cffc6;}
a.dort:link {color:#ff0000;}
a.dort:visited {color:#0000ff;}
a.dort:hover {font-family:Verdana, Geneva, sans-serif;}
a.bes:link {color:#ff0000;text-decoration:none;}
a.bes:visited {color:#0000ff;text-decoration:none;}
a.bes:hover {text-decoration:underline;}
Mouse ile asagidaki linklerin üzerinde gezin. Yukaridaki css stilleri asagidaki linklere uygulanmistir..
Bu linkin font büyüklügü degisecek.
Bu linkin arkaplan rengi degisecek.
Simdi ise biraz daha karmasik bir örnek yapalim.
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:270px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
Arkaplani Degistirilmis Bir Link
.