CSS ile Biçimlendirme nedir?
Bilişim Teknolojileri · 11. Sınıf · Konu 2
Tahmini okuma süresi: 6 dk
Kısa cevap
Bu konuda neler öğreneceksin?
- 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.
Anahtar fikirler
- Ö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.
Konunun özeti
Duyarlı düzen mobil öncelikle, medya sorguları ve rem ölçüleriyle kurulur; durumlar yalnız renkle değil metinle de bildirilir. Sınavda bu üç hesap ile medya sorgusunun koşul yönü en sık çıkanlardır.
Çözümlü mini örnek 1
Aynı başlığın rengini değiştiren iki kural vardır: biri.baslik sınıfı, diğeri #ust-baslik id'sidir. Sınıf kuralı çalışmamaktadır. Neden çözülür?
Adım 4: Gereksiz id seçicisi kaldırılır ya da kural sınıf üzerinden yeniden yazılır.
Çözümlü mini örnek 2
300 × 200 piksel kutuda padding 20, kenarlık 2 pikseldir. Varsayılan box-sizing göre dış ölçü kaçtır; border-box ile ne değişir?
Adım 4: Aynı CSS ile dış ölçü 300 × 200 piksel olarak korunur ve sütun taşması önlenir.
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.
İlgili konular
Sıradaki adım
Tam anlatımKonuyu tam anlatımıyla okuKonu anlatımı, kazanımlar ve örnekler tek sayfada.Konu anlatımları hesapsız okunur. Quiz, slayt ve deneme için hesap gerekir.
DersTeders ile devam et
Bilişim Teknolojileri · 11. Sınıf için çalışma yolu
- OkuKonu anlatımını bu sayfada bitir.
- Soru çözÖrnekleri çöz, cevabı açıklamayla karşılaştır.
- Quiz ile pekiştirHesapla kendini ölç.
Konu anlatımları hesapsız okunur; quiz, slayt ve deneme için hesap gerekir.