CSS’de Bağlantılar

Sitenizdeki bağlantıları CSS kullanarak şekillendirmek için bazı özel eklerden faydalanılır.

Bir bağlantı dört farklı şekilde stillendirilebilir. Bunlar:

  • a:link – Normal link görünüşü
  • a:visited – Ziyaret edilmiş siteye giden link görünümü
  • a:hover – Fare ile üzerine gelindiğindeki görünüş
  • a:active – Tıklanılan andaki görüntüsü

Yukarıdaki tüm süreçler için biçimlendirme yapmamız mümkün:


Link Stillendirme

   a:link {color:#FF0000;}      /* ziyaret edilmemiş */
   a:visited {color:#00FF00;}   /* ziyaret edilmiş */
   a:hover {color:#FF00FF;}     /* fare üzerindeyken */
   a:active {color:#0000FF;}    /* aktifken */

Yukarıdaki bağlantı biçimlerini sıralarken uymamız gereken bir sıra vardır. Bu sıraya uyulmazsa bağlantı görünümleri doğru çalışmayabilir.

  • a:hover her zaman a:link ve a:visited den SONRA gelmeli.
  • a:active her zaman a:hover dan SONRA gelmeli.

text-decoration: Metin Altçizgisi

text-decoration coğunlukla metin alt çizgisini kullanmak veya kaldırmak için kuyllanılır

“text-decoration” Kullanımı

  a:link {text-decoration: none;}         /* ziyaret edilmemiş */
  a:visited {text-decoration: none;}      /* ziyaret edilmiş */
  a:hover {text-decoration: underline;}   /* fare üzerindeyken */
  a:active {text-decoration: underline;}  /* aktifken */

background-color: Arkaplan Rengi

background-color metnin arka planını renklendirmek için kullanılır.

“background-color” Kullanımı

  a:link { background-color: #B2FF99; }         /* ziyaret edilmemiş */
  a:visited { background-color: #FFFF85; }      /* ziyaret edilmiş */
  a:hover { background-color: #FF704D; }   /* fare üzerindeyken */
  a:active { background-color: #FF704D; }  /* aktifken */