Yükleniyor...

CSS’te bağlantılar

Bağlantılar insanların sayfalarınızda gezinme yoludur. CSS’te a öğesini ve durumlarını stillersiniz — ziyaret edilmemiş, ziyaret edilmiş, hover ve active — böylece bağlantı tıklanabilir görünür, etkileşimde değişir ve okunaklı kalır.

Bir bakışta bağlantı durumları

📊 Bağlantı durumu araç seti

Durum Ne zaman uygulanır
a / a:link Varsayılan / ziyaret edilmemiş bağlantı
a:visited Ziyaretçinin daha önce açtığı bağlantı
a:hover İşaretçi bağlantının üzerinde
a:active Bağlantı basılıyor (mousedown)
text-decoration Alt çizgi açık/kapalı — yaygın bağlantı kontrolü

Tarayıcılar sıkça LVHA adlı yararlı sırayı hatırlar: :link, :visited, :hover, :active. Kuralları bu sırada yazmak, sonraki durumların yanlışlıkla ezilmesini azaltır.

Temel bağlantıyı stillendirin

Renk ve alt çizgiyle başlayın. Birçok modern tasarım varsayılan alt çizgiyi kaldırır, hover’da geri getirir.

Temel bağlantı stilleri

css
CSS Code 
a {
color: #0b5fff;
text-decoration: none;
}

Ziyaret edilmiş bağlantılar

:visited rengi biraz kaydırabilir ki dönen ziyaretçiler tanıdık yolları fark etsin. Değişimi hafif tutun — gizlilik visited’da neyin stillenebileceğini sınırlar.

Visited tonu

css
CSS Code 
a:visited {
color: #5b4b8a;
}

Hover geri bildirimi

:hover en net günlük işaretinizdir. Renk değişimi, alt çizgi veya ikisi “bu etkileşimli” der; bağırmadan.

Hover’da alt çizgi

css
CSS Code 
a:hover {
color: #0842b8;
text-decoration: underline;
}

active — basma anı

:active, bağlantı basılırken geçerlidir. Biraz daha koyu ton kısa bir “tık” hissi verir.

Active basışı

css
CSS Code 
a:active {
color: #062e80;
}

Sakin bir nav-bağlantı alışkanlığı

LVHA durumlarını gruplayın, hover’ı açık tutun ve yalnızca düz görünmek için odak hatlarını silmeyin. Klavye kullanıcıları görünür bir odak ipucu ister.

Sakin nav bağlantıları

css
CSS Code 
nav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}

nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Kendiniz deneyin

  1. Temel a rengi ve text-decoration: none ayarlayın.
  2. Biraz farklı renkli a:visited ekleyin.
  3. a:hover’da alt çizgi ve koyulaştırma yapın.
  4. a:active’te biraz daha koyulaştırın.
  5. nav a’yı LVHA sırasında stillendirin ve :focus-visible outline tutun.

Yaygın hatalar

  • :hover’ı :link / :visited’ten önce yazıp bazı durumların kaybetmesi
  • Alt çizgiyi ve bağlantı olduğunu gösteren her ipucunu kaldırmak
  • Paragraftaki her kelimede neon hover
  • Yerine odak stili koymadan bağlantılarda outline: none
  • Bu dersi text-shadow / üç nokta ile karıştırmak (önceki oturum)

Özet

  • Bağlantıları a ve :link, :visited, :hover, :active ile stillendirin
  • LVHA sırası kaskadın beklediğiniz gibi davranmasına yardım eder
  • Renk + text-decoration günlük kontrollerdir
  • Hover net olmalı; visited değişimi hafif kalmalı
  • Klavye gezintisi için görünür odak stili tutun

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 30 / 35
Css Ders