11. SınıfBilişim Teknolojileri
CSS ile Biçimlendirme — Çalışma Sayfası
Kazanımlar, önemli noktalar ve sık yapılan hatalar tek sayfada.
Bu konuda öğrenecekleriniz
- CSS seçicilerinin öncelik sırasını hesaplayarak çakışan kuralları çözer.
- Kutu modelini box-sizing ayarıyla birlikte piksel cinsinden hesaplar.
- CSS değişkenleri kullanarak tutarlı renk, boşluk ve tipografi tanımlar.
- Medya sorguları ile farklı ekran genişliklerine uyum sağlayan düzen kurar.
- Durum seçicileriyle etkileşimli bileşen görünümleri ve geri bildirim oluşturur.
Önemli noktalar
- Öncelik çakışmaları id yerine sınıfla çözülür; satır içi stil son çaredir.
- Duyarlı projede kutu ölçüsünü doğru vermek için box-sizing: border-box açıktır.
- Bitişik kutularda dikey marjlar birleşir, aradaki mesafe en büyük değerdir.
- Mobil öncelikle yazılır; geniş ekran kuralı min-width koşuluyla eklenir.
- Durum geri bildirimi yalnız renkle değil metin veya ikonla da verilir.
- rem ve yüzde ölçüler, sabit pikselden daha taşınabilir sonuç verir.
Formüller ve kurallar
- Öncelik: satır içi (1000) > id (0.100) > sınıf (0.010) > etiket (0.001).
- Eşit öncelikte kaynak kodda son yazılan kural kazanır.
- Dış genişlik = genişlik + 2 × padding + 2 × border (content-box).
- box-sizing: border-box → width değeri padding ve border'ı içerir.
- rem = kök yazı boyu × değer; 16 px tabanda 1,5 rem = 24 px eder.
- @media (max-width: 768px) → 768 piksel ve altındaki ekranlarda kural çalışır.
- Değişken bildirimi:root içinde --isim: değer; okuması var(--isim, yedek) ile olur.
Sık yapılan hatalar
- Önceliği ezmeden id ile yazmak: Id seçicisinin ağırlığı sınıfı geçer; gereksiz id kullanmak sonradan kuralı çökertir.
- İç kutu ölçüsünü dış sanmak: Varsayılanda width yalnız içeriği kapsar; padding ve border eklenmeden dış ölçü bulunamaz.
- Geniş ekrandan başlayıp dar ekranda kırpmak: Mobil öncelik terk edilirse küçük ekranda taşma ve yatay kaydırma kaçınılmaz olur.
- Uyarıyı yalnız renkle vermek: Kırmızıya dayalı hata, renk körü kullanıcıya ulaşmaz; metin veya ikon zorunludur.
- Her kurala!important eklemek: Öncelik sırası bozulur, sonraki düzeltmeler uygulanmaz hâle gelir.
Hızlı tekrar ipuçları
- Öncelik sorularında seçiciyi id, sınıf, etiket diye sayarak git; tahmin etme.
- Kutu ölçüsü sorusunda önce box-sizing durumunu sor, hesabı ona göre kur.
- Medya sorgusunu okurken koşulun hangi ekranı tetiklediğini tersinden doğrula.
- Tema ve renk gibi tekrar eden değerleri CSS değişkenine taşı, tek satırda değiştir.
- Klavyeyle gezinmeyi dene; odak halkası görünmüyorsa focus-visible eklenmemiştir.
Kendini dene
Bu sayfayı okuduktan sonra konu anlatımını tekrar oku ve kendi cümlelerinle özetle.