CSS Dersleri Bölüm 6 – Bağlantı(Link) Stillendirme
Linkleri Biçimlendirme(Styling Links)
Linkler herhangi bir CSS özelliği ile biçimlendirilebilir, color, font-family, background gibi.
Linklerin özelliği, bulundukları duruma göre stillendirilebilmeleri. Yani; bir link normal durumda(ilk durum), ziyaret edilmiş durum, linkin üzerine gelindiği durum, linkin aktif olduğu yani o anlık tıklanma durumu diye dört halde bulunur. Ve her bir durum ayrı ayrı stillendirilir.
a:link {color:#FF0000;} /* ziyaret edilmemiş link */
a:visited {color:#00FF00;} /* ziyaret edilmiş link */
a:hover {color:#FF00FF;} /* fare üzerinde link */
a:active {color:#0000FF;} /* seçilen link */Deneme adresiniz için tıklayabilirsiniz!
Fakat farklı durumları stillendirmede birtakım kurallar mevcut;
- a:hover, a:link ve a:visited’tan sonra gelmelidir.
- a:active, a:hover’dan sonra gelmelidir.
Genel Link Stilleri
Yukarıdaki örnekte link, durumuna göre renk değiştirmekte.
Linkleri stillendirmenin diğer yolları da aşağıda:
Text Decoration
text-decoration özelliği linklerin altındaki çizgileri kaldırmak için kullanılır çoğunlukla. Örnek;
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}Deneme adresiniz için tıklayabilirsiniz!
Background Color
background-color özelliği linkler için arkaplan atar: Örnek;
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}Deneme adresiniz için tıklayabilirsiniz!
Ve 2 uygulama daha…
Bağlantılar için farklı stiller
Hiperlinklere farklı stillerin nasıl atanacağının uygulaması.
Gelişmiş – Link kutuları oluşturma
Gelişmiş bir uygulama, linklerin css kullanılarak kutu olarak gösterilmesi.