CSS Dersleri 16 - Link Özellikleri

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 :

• a:link - normal, ziyaret edilmemiş bir link
• a:visited- kullanıcının ziyaret ettiği link
• a:hover - kullanıcının fareyle üzerine geldiğinde bir link
• a:active - tıklandığı anda bir link.

/* 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;
}

Linkler : text-decoration 

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;
}

Linkler : background-color 

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;
}

CSS Buton Yapımı

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;
}