Yazilim Mutfagi Dersleri ( CSS ) Ders 6 – CSS ile Linkleri Biçimlendirmek

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 rengi degisecek.

Bu linkin font büyüklügü degisecek.

Bu linkin arkaplan rengi degisecek.

Bu linkin font ailesi degisecek.

Bu linkdeki metnin sekli 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
.

Tags:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir