Görsel ve başlık

Görsel ve başlık için renk, arka plan ve tipografi eklersin.

Görsel ve başlık

Bu derste kartın üst kısmındaki kapak görseli ile altındaki başlığı biçimlendireceksin. Kapak görseli için .card-hero, başlık için .card-title sınıf seçicisini kullanacaksın.

background-image bir ögeye arka plan görseli ekler; url("...") biçiminde yazılır. color metnin rengini, font-family ise yazı tipi ailesini belirler. Yazı tipi ailesinde virgülle yedekler yazmak iyi bir alışkanlıktır: Georgia, serif.

Yazı tipi ailesinde yedekler

font-family: Georgia, serif yazdığında tarayıcı önce Georgia yazı tipini arar. Kullanıcının sisteminde yoksa, serif ailesinden başka bir yazı tipine düşer. Bu, sayfanın farklı cihazlarda benzer görünmesini sağlar.

Genel aile adları: serif (ayaklı), sans-serif (ayaksız), monospace (eş aralıklı). Her zaman belirli bir yazı tipinden sonra genel aile adını yazmak iyi bir alışkanlıktır. Bu derste .card-title için Georgia, serif kullanacağız.

Uygulama .card-hero ve .card-title bölümlerini ekle

Önceki dersin dosyasını al (başlık yorumu + .card bölümü). Altına şu iki bölümü ekle:

.card-hero sınıf seçicisi; içine background-image: url("kapak.jpg"), background-size: cover ve height: 140px bildirimlerini yaz.
.card-title sınıf seçicisi; içine color: #2a3d66 ve font-family: Georgia, serif bildirimlerini yaz.

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;
}

.card-hero {
  background-image: url("kapak.jpg");
  background-size: cover;
  height: 140px;
}

.card-title {
  color: #2a3d66;
  font-family: Georgia, serif;
}

Kendini test et

Hangi CSS özelliği bir ögeye arka plan görseli ekler?
```
.card-hero {
  /* ? */
}
```
- img-src
- background-image
- picture-source
- image-bg
Cevabı göster

background-image — Doğru. background-image bir ögeye arka plan görseli ekler; değer url("...") biçiminde yazılır.

.card-hero arka plan görseli bildirimini tamamla

.card-hero {
  background-image: ____;
}

Cevabı göster

.card-hero {
  background-image: url("kapak.jpg");
}

Özellikleri anlamlarıyla eşleştir

background-image

arka plan görseli
color

metin rengi
font-family

yazı tipi ailesi
.card-hero

kapak görseli

Sıradaki ders: Gölge ve kenarlık

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler