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