Metin dekorasyonu kaldırma

Bağlantı alt çizgisini kaldırmayı ve geri eklemeyi öğrenirsin.

Alt çizgiyi denetle

Tarayıcılar varsayılan olarak a bağlantılarına alt çizgi çizer. Bu alt çizgi, bağlantıyı normal metinden ayıran en belirgin işarettir. text-decoration özelliği ile alt çizgiyi denetleriz.

Alt çizgiyi kaldırmak için text-decoration: none, geri eklemek için text-decoration: underline yazılır. Bu denetim menü çubuklarında ve düğme görünümlü bağlantılarda sıkça kullanılır.

Üzerine gelince geri ekle

Yaygın bir desen: bağlantıda alt çizgiyi kaldır, fareyle üzerine gelince geri ekle. Böylece ziyaretçi bağlantıyı metinden ayırt eder ama sayfa dağınık görünmez.

Bunu şöyle yaparsın: a { text-decoration: none; } alt çizgiyi kaldırır, a:hover { text-decoration: underline; } fareyle üzerine gelince geri ekler. Bu küçük etkileşim menü ve gezinme listelerinde çok işe yarar.

Uygulama Alt çizgiyi kaldır, üzerine gelince geri ekle

İki stil bloğu ekle. Birincisi a tür seçicisi; text-decoration: none tanımlasın. İkincisi a:hover sahte sınıfı; text-decoration: underline tanımlasın.

Örnek çözümü göster

/* bağlantı alt çizgisi denetimi */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Kendini test et

Alt çizgiyi hangi değer kaldırır?
```
a {
  text-decoration: ?;
}
```
- text-decoration: none
- text-decoration: no-underline
- text-decoration: hidden
- text-decoration: 0
Cevabı göster

text-decoration: none — Doğru. text-decoration: none alt çizgiyi kaldırır.

Alt çizgiyi kaldır

a {
  ____;
  color: navy;
}

Cevabı göster

a {
  text-decoration: none;
  color: navy;
}

Değeri anlamına eşle

none

Alt çizgi yok
underline

Alt çizgi
line-through

Üstü çizili
overline

Üst çizgi

Sıradaki ders: Özet - Menü çubuğu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler