CSS Link Özelliği

Web sayfalarına bağlantı vermek için kullanılan linkler, tarayıcılar tarafından gelen bazı stil tanımlamalarına sahiptir.Bu tanımlı stilleri bilirseniz CSS linklerine isteğinize göre stil tanımlayabilirsiniz.

Renk

Linkler tarayıcılar tarafından farklı renklerde tanımlıdırlar.Bu yüzden color özelliğini kullanarak link rengini değiştirebilirsiniz.
Örnek Kullanım:

a {
 color: blue;
}

Text-decoration

Linkleri normal yazılardan ayırmak için tarayıcılar varsayılan olarak link metin altlarını çizgili gösterir.Bu çizgiyi kaldırmak için text-decoration özelliğini kullanabilirsiniz.
Örnek Kullanım:

a {
 text-decoration: none;
}

Cursor

Bu sayfada herhangi bir linklerin üzerine gelirseniz fare imleçinin şeklinin değiştiğini görürsünüz.Bu özellikte tarayıcılar tarafından verilen cursor özelliği ile alakalıdır.Bu özelliği kullanarak imlecin şeklini değiştirebilirsiniz.
Örnek Kullanım:

a {
 cursor: pointer;
}

Link Durumlarına Stil Atama

Web sayfalarındaki linkler bazı durumlarına göre değişik şekillere bürünürler.Mesela Bir linkin üstüne geldiğinizde renginin değiştiğini ya da daha önce tıkladığınız bir bağlantının renginin daha farklı olduğunu farketmişsinizdir.CSS’de linklerin bu özel durumlarına göre stil tanımlaması yapabiliyoruz.
4 tane link durumu vardır:

  • a:link: Normal link,ziyaret edilmemiş.
  • a:visited : Daha önce ziyaret edilmiş link
  • a:hover : Farenin link üzerine gelmesi durumu
  • a:active : O anda aktif olan link

Örnek Kullanımlar:

a:link {
 color: #ff0000;
}

a:visited {
 color: #ff3434;
}

a:hover {
 color: #ffacab;
}

a:active {
 background: red;
 color: white;
}

Not : Link durumların hepsini kullanacaksanız şunu unutmayın a:link ve a:visited durumları a:hover durumundan önce tanımlanmalı, a:active ise a:hover dan sonra tanımlanmalıdır.

Bütün CSS Dersleri için tıklayın

Bunları da beğenebilirsin