Anahat

outline ile kenarlık dışındaki çizgiyi öğrenirsin.

outline nedir?

outline kenarlığın dışına çizilen ikinci bir çizgidir. border gibi kalınlık, tip ve renk alır ama düzeni bozmaz: sayfa akışını ve kutunun ölçülerini değiştirmez.

En yaygın kullanımı odak (focus) durumudur. Bir düğmeye tıklandığında veya klavyeyle seçildiğinde tarayıcı varsayılan bir anahat çizer; bu çizgi erişilebilirlik için önemlidir ve görünür kalmalıdır.

outline-offset ile boşluk

outline-offset anahat ile kenarlık arasına boşluk koyar. Pozitif değer anahatı dışarı iter; outline-offset: 4px çizgiyi kenarlıktan 4 piksel uzaklaştırır.

Bu, odak çizgisinin kenarlığa yapışık görünmesini istemediğin zaman işe yarar. Negatif değer de verebilirsin; anahat kenarlığın üzerine çizilir ama bu kullanım azdır.

Uygulama Düğmeye odak çizgisi ekle

.btn:focus seçicisi için bir bildirim bloğu yaz. İçine outline: 2px solid #3366cc bildirimini ekle. Bu, klavyeyle seçildiğinde düğmenin çevresinde mavi bir çizgi gösterir.

Örnek çözümü göster

/* odak çizgisi */
.btn:focus {
  outline: 2px solid #3366cc;
}

Kendini test et

outline ile border arasındaki temel fark nedir?
- outline kalın, border ince çizilir
- outline düzeni bozmaz, border bozar
- outline yalnızca köşelere, border kenarlara çizilir
- outline margin içine, border padding içine çizilir
Cevabı göster

outline düzeni bozmaz, border bozar — Doğru. outline kutu ölçülerini değiştirmez; border değiştirir.

Odak çizgisi özelliğini yaz

.btn:focus {
  ____: 2px solid #3366cc;
}

Cevabı göster

.btn:focus {
  outline: 2px solid #3366cc;
}

outline özelliklerini eşleştir

outline

Kenarlık dışındaki çizgi
outline-offset

Çizgiyle kenarlık arası boşluk
outline: none

Çizgiyi kaldırır

Sıradaki ders: Özet - Düğme stilleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler