Kart iskeleti
Kutu modeli ile kart iskeletini kurarsın.
Kart iskeleti
Bu derste .card sınıfına kartın iskeletini kuran dört bildirim ekleyeceksin: genişlik, iç boşluk, kutu boyutlandırma ve köşe yuvarlama.
Genişlik kartın yatay ölçüsünü belirler. İç boşluk, içerikle kenarlık arasında nefes alanı yaratır. box-sizing: border-box, genişliğin iç boşluk ve kenarlığı da kapsamasını sağlar; böylece kart beklediğin ölçüde kalır. Köşe yuvarlama keskin köşeleri yumuşatır ve modern bir görünüm verir.
Köşe yuvarlama
border-radius özelliği köşelerin yuvarlanma miktarını belirler. Küçük bir değer (ör. 4px) hafif bir yumuşatma, büyük bir değer (ör. 24px) belirgin bir yuvarlaklık verir.
Değer tek bir sayı olabileceği gibi köşelere göre de ayrılabilir: border-radius: 12px 8px 12px 8px sol-üst, sağ-üst, sağ-alt, sol-alt sırasını izler. Bu derste tek değer kullanmak yeterli; kartta tutarlı bir yuvarlaklık için tek sayı her köşeye uygulanır.
Uygulama .card iskelet bölümünü ekle
Önceki dersin başlık yorumunu içeren dosyayı al. Altına bir .card sınıf seçici bölümü ekle ve içine şu bildirimleri yaz: width: 320px, padding: 24px, box-sizing: border-box, border-radius: 12px. Her bildirimin sonunda noktalı virgül olsun.
Örnek çözümü göster
/* Ayşe Tasarım - Portföy kartı */
.card {
width: 320px;
padding: 24px;
box-sizing: border-box;
border-radius: 12px;
background-color: #ffffff;
}Kendini test et
-
box-sizing: border-box ne yapar?
.card { box-sizing: border-box; }- Arka plan rengini değiştirir
- Yazı tipini belirler
- Genişlik ve yüksekliğe iç boşluk ile kenarlığı dahil eder
- Kartı sayfanın ortasına hizalar
Cevabı göster
Genişlik ve yüksekliğe iç boşluk ile kenarlığı dahil eder — Doğru. border-box, width değerinin iç boşluk ve kenarlığı kapsamasını sağlar; kart beklenen ölçüde kalır.
-
Kartın köşe yuvarlama değerini tamamla
.card { border-radius: ____; }Cevabı göster
.card { border-radius: 12px; } -
Özellikleri anlamlarıyla eşleştir
- width
- yatay ölçü
- padding
- iç boşluk
- box-sizing
- kutu hesaplama
- border-radius
- köşe yuvarlama