Proje sonu - Blog sayfası

Tüm parçaları birleştirip blog sayfasını tamamlarsın.

Son adım: parçaları birleştir

Stil sayfamız neredeysse tamamlandı: tipografi, kutu modeli ve renkler yerinde. Şimdi son bir dokunuş yapacağız: dosyayı yorumlarla bölümlere ayıracağız ve yazı başlıklarına renk vermek için bir h2 bölümü ekleyeceğiz.

Böylece stil sayfası hem daha okunaklı olur hem de başka biri açtığında hangi bölümün ne işe yaradığını hemen görür.

Yorumlarla bölümlendir

Uzun stil sayfalarında yorumlar, bölümleri ayırmak için harika bir araçtır. Her bölümün üstüne kısa bir yorum yazarsan, dosyayı açan kişi neye baktığını hemen anlar.

Sıralama genelde şöyledir: önce genel ayarlar (body), sonra yapısal bölümler (.post), en son alt başlıklar (h2).

Alt başlığa renk ver

Yazı başlıklarını (h2) vurgulamak için bir renk verelim. Kartın beyaz arka planıyla kontrast oluşturan sıcak bir ton seçelim; örneğin kahverengi #6a4c2c. Ayrıca kalınlığını font-weight: 700 ile artıralım.

Bu bölüm .post bölümünden sonra gelsin; böylece genel kart stilinden sonra başlık stili okunur. Yorumlarla bölümlendirdiğimiz için dosyayı açan kişi de sıralamayı kolayca takip eder.

Uygulama Son düzenlemeleri yap

Dosyayı yorumlarla bölümlere ayır: dosya başlığı dahil en az üç yorum olsun. .post bölümünden sonra yeni bir h2 bölümü ekle; içinde color: #6a4c2c ve font-weight: 700 bildirimleri olsun. Var olan bildirimleri silme.

Örnek çözümü göster

/* Gezi Günlüğü stil sayfası - Ayşe Yılmaz */

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

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

/* Alt başlık */
h2 {
  color: #6a4c2c;
  font-weight: 700;
}

Kendini test et

CSS yorumu hangi işaretle başlar?
- /* açılış
- // açılış
- <!-- açılış
- { açılış
Cevabı göster

/* açılış — Doğru. CSS yorumu /* ile başlar ve */ ile biter.
Yorum açılışını tamamla
```
____ Genel ayarlar */
```
Cevabı göster
```
/* Genel ayarlar */
```
Yorumları açıkladıkları bölümlerle eşleştir

/* Genel ayarlar */

body bölümü
/* Yazı kartları */

.post bölümü
/* Alt başlık */

h2 bölümü
/* Gezi Günlüğü */

dosya başlığı

Sıradaki ders: Renk biçimleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler