Görsel ve başlık

CSS kursu · Başlangıç · Ders 51/82

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

Başlangıç bölümündeki tüm dersler

Görsel ve başlık