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