CSS, HTML bağlantılarını (<a> etiketleri) durumlarına (state) göre stillendirmemizi sağlar. Linklerin kullanıcıyla etkileşime göre farklı görünümler alması, hem kullanıcı deneyimini (UX) hem de görsel tasarımı güçlendirir.

CSS’te bağlantılar için 4 temel pseudo-class (sözde sınıf) bulunur:

• :link → Tıklanmamış bağlantı
• :visited → Ziyaret edilmiş bağlantı
• :hover → Üzerine gelindiğinde
• :active → Tıklanma anı

⚠️ Bu pseudo-class’ların yazım sırası çok önemlidir.

1️⃣ :link (Unvisited – Ziyaret Edilmemiş)

Henüz tıklanmamış bağlantıları stillendirmek için kullanılır.

Tarayıcı varsayılanında:

• Mavi renk
• Altı çizili görünüm

Örnek Kullanım:

a:link {
    color: blue;
    text-decoration: none;
}

Açıklama:

• color: Yazı rengini belirler.
• text-decoration: Alt çizgiyi kaldırır.

Profesyonel İpucu:

Modern tasarımlarda alt çizgi genellikle kaldırılır ve hover durumunda tekrar eklenir.

2️⃣ :visited (Ziyaret Edilmiş)

Kullanıcının daha önce tıkladığı bağlantıları stillendirir.

⚠️ Güvenlik nedeniyle :visited ile değiştirilebilecek CSS özellikleri sınırlıdır.

Örnek:

a:visited {
    color: purple;
}

Güvenlik Notu:

Tarayıcılar, kullanıcı gizliliğini korumak için background-image, position, display gibi bazı özelliklerin :visited ile değiştirilmesine izin vermez.

3️⃣ :hover (Mouse Over)

Kullanıcı fareyi linkin üzerine getirdiğinde çalışır.

Etkileşimli arayüzlerin vazgeçilmezidir.

Örnek:

a:hover {
    color: red;
    text-decoration: underline;
    cursor: pointer;
}

Kullanım Alanları:

• Menü linkleri
• Butonlar
• Kart bileşenleri
• Navigasyon sistemleri

Profesyonel UX İpucu:

Hover efektine animasyon eklemek kullanıcı deneyimini artırır:

a {
    transition: all 0.3s ease;
}

4️⃣ :active (Tıklanma Anı)

Kullanıcı fare tuşuna basılı tuttuğu an çalışır. Kısa süreli bir efekttir.

Örnek:

a:active {
    color: orange;
    background-color: yellow;
}

Nerede Kullanılır?

• Buton geri bildirimi
• Mobil dokunmatik etkileşim
• Oyun arayüzleri

🔴 Kritik Kural: LVHA Sırası

CSS link pseudo-class’ları şu sırayla yazılmalıdır:

Link → Visited → Hover → Active

Kısaltma:
LVHA
Mnemonic:
LoVe HAte

Doğru Kullanım Örneği:

a:link { }
a:visited { }
a:hover { }
a:active { }

Yanlış sırada yazılırsa bazı stiller çalışmayabilir.

🎨 En Sık Kullanılan CSS Özellikleri

Bağlantılarda en çok kullanılan özellikler:

• color
• text-decoration
• background-color
• border
• cursor
• font-weight
• transition
• transform

🚀 Modern Profesyonel Link Tasarım Örneği

a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: 0.3s ease;
}

a:link {
    color: #333;
}

a:visited {
    color: #666;
}

a:hover {
    color: #007bff;
    text-decoration: underline;
}

a:active {
    transform: scale(0.95);
}

Bu Kodun Sağladıkları:

✔ Modern görünüm
✔ Yumuşak geçiş efekti
✔ Tıklama geri bildirimi
✔ Profesyonel UX

📌 SEO ve UX Açısından Link Tasarımı

Profesyonel web sitelerinde link tasarımı:

• Kullanıcıya tıklanabilir olduğunu açıkça göstermeli
• Hover durumunda görsel geri bildirim vermeli
• Renk kontrastı erişilebilirlik kurallarına uygun olmalı
• Mobil cihazlarda dokunmatik geri bildirim sağlamalı

🎯 Sonuç

CSS link pseudo-class’ları, web tasarımının temel ama en güçlü araçlarından biridir.

Doğru sırada kullanıldığında:

• Daha iyi kullanıcı deneyimi sağlar
• Daha profesyonel bir görünüm oluşturur
• Etkileşimi artırır
• Modern arayüz standartlarını karşılar