Linkler Farklı Yollarla Biçimlendirilebilir.
Linkleri Biçimlendirmek
Linkler bir çok CSS özelliki ile biçimlendirilebilir (Örneğin color,font-family,background v.b).
Linklerin durumlarına görede farklı biçimlendirmeler uygulanabilir. Linklerin durumlarına bakacak olursak
- a:link – Normal durumdaki biçimi yani tıklanmamış andaki durumu
- a:visited – Mouse ile üzerine gelindiği zamanki biçimi
- a:hover – Link tıklandıktan sonraki biçimi
- a:active – Link aktif hale yani tıklandığı andaki durumu
Linklerin farklı durumlarına ait biçimlendirme uygularken bazı kurallara uymak gerekir:
- a:hover : a:link ve a:visited durumlarından sonra tanımlanmalıdır.
- a:avtice : a:hover durumundan sonra tanımlanmalıdır.
Linke Ait Metne Şekil Verme (Text Decoration)
text-decoration özelliği genellikle linklerin altındaki çizgiyi kaldırmak için kullanılır
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 özelliği linke ait arkaplan rengini ayarlamak için kullanılır.
a:link {background-color:#C2FF99;}
a:visited {background-color:#FFFF75;}
a:hover {background-color:#FF704E;}
a:active {background-color:#FE704E;}
Şimdi link Biçimlendirme için birkaç örnek yapalım:
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;}
add a comment