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

Sıradaki ders: Görsel ve başlık

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler