Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Link Özelliklerinin Kullanımı konusunu öğreneceğiz.
CSS ile, linkler farklı şekillerde şekillendirilebilir.CSS'de linkler, herhangi bir CSS özelliğiyle (ör. color, font-family, background vb.) biçimlendirilebilir.
a { color: red; }
Ek olarak, hangi durumda olduklarına bağlı olarak linkler farklı şekilde şekillendirilebilir. 4 farklı link durumu vardır :
/* ziyaret edilmemiş link */ a:link { color: red; } /* ziyaret edilmiş link */ a:visited { color: green; } /* fare üstüne gelinmiş link */ a:hover { color: hotpink; } /* tıklanılmış link */ a:active { color: blue; }
CSS'de "text-decoration" özelliği çoğunlukla linklerde alt çizgileri 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; }
CSS'de "background-color" özelliği, linkler için bir arka plan rengi belirtmek için kullanılabilir:
a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }
Linklerin kullanım amacı sayfalar arasında bağlantı sağlamaktır ve genellikle bir buton şeklinde kullanılır. Aşağıdaki örnekte "CSS Nasıl Buton Yapılır ?" sorusuna cevap veren bir örnek bulunmaktadır.
a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }