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;
}
a { color: red; }
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;
}
/* 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; }
/* 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;
}
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
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;
}
a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }
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;
}
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; }
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;
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla