Renk ve arka plan

Renk ve arka plan özelliklerini eklersin.

Yazı rengi: color

Yazının rengini color özelliği belirler. Renk değerleri için HEX kodları (#2b2b2b gibi) yaygın ve nettir; her iki basamak kırmızı, yeşil ve mavi tonu verir. Açık renk yazı, koyu zemin üzerinde (veya tam tersi) okunabilir olur.

Gezi Günlüğü için gövdede koyu gri yazı kullanalım:

body {
  color: #2b2b2b;
}

Arka plan rengi: background-color

Ögenin arkasındaki rengi background-color özelliği belirler. Sayfanın genel arka planını body seçicisine, kart arka planını ise .post seçicisine veririz.

Gezi Günlüğü'nde açık krem bir sayfa arka planı ve beyaz kartlar iyi bir kontrast verir:

body { background-color: #f4f1ea; }
.post { background-color: #ffffff; }

Kontrastı unutma

Renk seçerken kontrastı gözden kaçırma. Açık zemin üstüne açık yazı, koyu zemin üstüne koyu yazı okunamaz. Genel kaide: yazı rengi ile arka plan rengi arasında belirgin ton farkı olsun.

Beyaz kart üstüne koyu gri yazı (#2b2b2b), krem sayfa üstüne beyaz kart (#ffffff) iyi bir başlangıçtır.

Uygulama Renkleri ekle

Mevcut dosyaya renkleri ekle. Body bölümüne color: #2b2b2b ve background-color: #f4f1ea bildirimlerini ekle. .post bölümüne de background-color: #ffffff bildirimini ekle. Var olan bildirimleri silme; yalnızca yenilerini ekle.

Örnek çözümü göster

/* Gezi Günlüğü stil sayfası */

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #2b2b2b;
  background-color: #f4f1ea;
}

.post {
  width: 640px;
  padding: 24px;
  margin: 16px auto;
  box-sizing: border-box;
  background-color: #ffffff;
}

Kendini test et

Hangisi geçerli bir renk değeridir?
- 18px
- #2b2b2b
- Georgia, serif
- bold
Cevabı göster

#2b2b2b — Doğru. #2b2b2b geçerli bir HEX renk kodudur.

background-color değerini tamamla

background-color: ____;

Cevabı göster

background-color: #ffffff;

Özellikleri örnek değerleriyle eşleştir

color

#2b2b2b
background-color

#f4f1ea
font-size

18px
width

640px

Sıradaki ders: Proje sonu - Blog sayfası

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler