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ığı