CSS Link stilleri diğer yazı stillerinden ayrıcalıklı olarak CSS stillendirmeleri alabilir.. (örneğin;color, font-family, background-color)

Özel durumlar olmadıkça, anonim bir değer atanmayan bir HTMl link tagına 4 ayrı özellik eklenebilir. Bunlar;

• a:link – a normal, ziyaret edilmemiş link
• a:visited – a linki ziyaret edilmiş linkleri
• a:hover – a linkine mouse ile üzerine gelince oluşacak stil
• a:active – a linkine seçildiğinde oluşacak stil

Hemen bir örnek yapalım;

a:link {color:#FF0000;}      /*ziyaret edilmemiş */
 a:visited {color:#00FF00;}  /* ziyaret edilmiş */
 a:hover {color:#FF00FF;}  /* mouse ile üzerine gelindiğinde */
 a:active {color:#0000FF;}  /* link seçilince */

Arkadaşlar bu stilleri oluştururken uymanız gereken bir takım kuralları var. Bunlar;

• a:hover a:link ve  a:visited ‘ ten sonra kullanılır.
• a:active a:hover ‘ dan sonra kullanılır.

Ortak Link Stilleri

Ortak link stilleri birazdan göstereceğim örnekte de olduğu gibi, bir takım linke ortak özellik katma durumudur.

a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
 a:hover {text-decoration:underline;}
 a:active {text-decoration:underline;}

ArkaPlan Rengi

Bazı web sayfalarında gördüğünüz gibi, kimi linklere daha belirgin olması açısından, hem de yukarıda belirttiğim gibi background-color özelliği eklenerek link’e arkaplan rengi katabilir, ve yukarıdaki proerty’leri de bununla birlikte kullanabiliriz.Örnek verelim;

a:link {background-color:#B2FF99;}
 a:visited {background-color:#FFFF85;}
 a:hover {background-color:#FF704D;}
 a:active {background-color:#FF704D;}

Gördüğünüz üzere, background-color özelliği hemen hemen tüm CSS elemanlarında önemli yer tutan bir CSS Property’sidir.Bu şekilde örnekleri çoğaltabiliriz. Ben sizlere bir kaç örnek daha vereyim;

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

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

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

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

Yukarıda verdiğim örnekleride kendiniz deneyerek farkları görebilirsiniz.

İlginiz için teşekkür ederim.