Proje: Kişisel blog
5 derslik projenin genel bakışı: kişisel bir blog sayfası kuracaksın.
Proje: Kişisel blog
Bu 5 derslik projede Gezi Günlüğü adlı kişisel bir blog sayfasını sıfırdan biçimlendireceksin. Her derste stil sayfasına bir parça ekleyecek, sonunda okunması kolay, dengeli bir blog sayfası elde edeceksin.
Şunları yapacağız:
- Tipografi:
font-family,font-size,font-weight,line-height - Kutu modeli:
width,padding,margin,box-sizing - Renk:
colorvebackground-color - Yorumlarla dokümantasyon
Blog sayfasının yapısı
Blog sayfamız üç bölümden oluşur: üstte bir başlık, ortada birkaç yazı kartı ve altta bir alt bilgi. Her bölüm bir HTML ögesine denk gelir; biz bu ögelere CSS uygulayacağız.
Yazı kartları <article class="post"> ögesiyle gelir. Ona .post seçicisiyle stil vereceğiz. Sayfanın genel görünümü için body seçicisini kullanacağız. HTML tarafı bizim için hazır; sen sadece stil sayfasını yazacaksın.
Her ders bir parça ekler
Bu projede her ders, önceki derste yazdığın kodun üzerine bir parça ekler. Yani her dersin başında elimizde bir önceki dersin tamamlanmış kodu vardır; biz ona yeni bir bölüm katarız.
Böylece 5 dersin sonunda tek bir tutarlı stil sayfası elde ederiz. İlk derste dosyayı açıp bir yorumla başlayacağız; sonraki derslerde tipografi, kutu, renk ve son düzenlemeleri sırayla ekleyeceğiz.
Uygulama Stil sayfasına başlık yorumu ekle
Projeye başlarken stil sayfasının en üstüne bir yorum ekle. Yorum Gezi Günlüğü sözcüğünü içersin. CSS yorumları /* ... */ biçiminde yazılır ve tarayıcı bunları görmez; yalnızca kaynağı okuyan kişiye açıktır. Sonraki derslerde bu dosyayı adım adım dolduracağız.
Kendini test et
-
Bir CSS bildirimi nasıl sonlanır?
- yeni satırla
- noktalı virgülle
- iki nokta üst üsteyle
- virgülle
Cevabı göster
noktalı virgülle — Doğru. Her bildirim noktalı virgülle kapanır; aksi halde tarayıcı sıradaki bildirimi okuyamaz.
-
CSS terimlerini anlamlarıyla eşleştir
- seçici
- stil verilecek öge
- bildirim
- özellik: değer çifti
- yorum
- /* ... */ arasında not
- bölüm
- seçici ve bildirim kümesi