CSS Link Kullanımı ve Link Özellikleri – Web Tasarım & Programlama
CSS Web Tasarım

CSS Link Kullanımı ve Link Özellikleri

Link <a> öğesi olarak HTML’de kullandığımız bir bağlantı elemanıdır. Başka bir web sayfasına veya başka bir yere köprü oluşturmak için kullanılır. Temel etiketlerden olan <a> öğesini CSS kullanarak çok farklı biçimlerde gösterebiliriz.

CSS ile bir link düzenlemek isteseniz yapmanız gereken CSS seçicisi ile <a>öğesini seçmektir.

Linkler dört farklı duruma sahiptir. Bunlar;

  • a:link  – normal, ziyaret edilmemiş bir bağlantı görünümü
  • a:visited  – kullanıcının ziyaret ettiği bir bağlantı görünümü
  • a:hover – kullanıcı mouse imlecini üzerine getirdiğinde oluşan bağlantı görünümü
  • a:active – tıklandığı anda oluşan bağlantı görünümü

Bu dört farklı durumu <a> öğesi için ayrı ayrı biçimleyebilirsiniz.

Not : <a> öğesinin farklı durumlarını biçimlerken mutlaka yukarıdaki sıralamaya uyulmalıdır.

Link Dekorasyonu

<a> Öğesini biçimlemeden kullanıldığında altı çizgili olduğu görülür. Bu onun bir link olduğunu ve diğer metinlerden ayrı görünmesinin gereği olarak sunulmuştur. Bu iyi bir görüş olsa da bu türden bir görünüm yerine daha farklı biçime elbette CSS ile getirmek mümkündür. Böyle bir durumda alt çizgisinden kurtulmak isteyebilirsiniz.  text-deocoration Özelliğinin none değerini kullanılarak <a> etiketinin standart altı çizgisini yok edebilirsiniz.

Link için Buton Görünümü

Daha fazla CSS ile linklere özel görünümler kazandırabilirsiniz.

Örnek;

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box