Linkleri CSS İle Biçimlendirmek

Linkleri şekillendirme konusuna girmeden evvel linklerin durumalarını bilmek gereklidir.

Durum Açıklama
a:link Tıklanmamış andaki hali
a:visited Fare ile üzerine gelindiği zamanki hali
a:hover Link tıklandiktan sonraki hali
a:active Link aktif hale yani tıklandığı andaki hali

Sayfadaki tüm linklerin hallerini tek seferde değiştirmek.

a:link {background-color:red; text-decoration:none;}
a:visited {background-color:red; text-decoration:none;}
a:hover {background-color:red; text-decoration:none;}
a:active {background-color:red; text-decoration:none;}

Linkler için sınıf oluşturmak.

A-Css tanımı:

a.secili:link{
  background-color:red;
  text-decoration:none;
}

B-Html kodunda kullanımı:

    1
    2
    3

Önemli Notlar:

Durum Not
a:hover a:link ve a:visited durumlarindan sonra tanımlanmalıdır.
a:avtice a:hover durumundan sonra tanımlanmalıdır.

Link için bazı css biçimlendirme örnekleri:

Üzerine gelince linkin rengi değişecek.

a.renk-degisecek:link {color:#ff0000;}
a.renk-degisecek:visited {color:#0000ff;}
a.renk-degisecek:hover {color:#ffda00;}

Üzerine gelince linkin font büyüklüğü değişecek.

a.font-boyu-degisecek:link {color:#ff0000;}
a.font-boyu-degisecek:visited {color:#0000ff;}
a.font-boyu-degisecek:hover {font-size:150%;}

Üzerine gelince linkin arka plan rengi değişecek.

a.arka-plan-rengi-degisecek:link {color:#ff0000;}
a.arka-plan-rengi-degisecek:visited {color:#0000ff;}
a.arka-plan-rengi-degisecek:hover {background:#6cffc6;}

Üzerine gelince linkin font ailesi değişecek.

  
a.font-ailesi-degisecek:link {color:#ff0000;}
a.font-ailesi-degisecek:visited {color:#0000ff;}
a.font-ailesi-degisecek:hover {font-family:Verdana, Geneva, sans-serif;}

Üzerine gelince linkin altı çizili olacak.

  
a.alti-cizilecek:link {color:#ff0000;text-decoration:none;}
a.alti-cizilecek:visited {color:#0000ff;text-decoration:none;}
a.alti-cizilecek:hover {text-decoration:underline;}

Kaynak: www.yazilimmutfagi.com

Bir cevap yazın