İletişim

Bilgisayar Mühendisi Bilgi ve Becerileri : Eğitim, Tasarım İlgi Alanları: Doğada Yaşam, Yamaç Paraşütü

Website:Ali KARATAŞ

Son Yazılar

Css

CSS ile Linkler Üzerinde Çalışmak

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.

Genel Link Biçimlendirmeleri

Yukarıdaki örnekde linklerin durumlarına göre renk özelliği ayaralnmıştır. Şimdi ise linkler için diğer genel biçimlendirme özelliklerine bakalım.

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;}

Leave a Response