Proje: İlk stil sayfam
5 derslik projenin genel bakışı: bir HTML sayfasını sıfırdan biçimlendireceksin.
Proje: İlk stil sayfam
Bu 5 derslik projede bir kişisel site sayfasını sıfırdan biçimlendireceksin. Her derste stil sayfasına bir parça ekleyecek, son derste tam biçimlendirilmiş bir sayfa elinde olacak.
Projede şunları kullanacaksın:
- Dış stil sayfası ve
linkögesi - Tür seçiciler (
body,h1,h2,p) - Renk ve yazı tipi ayarları
- Boşluk ve hizalama
- Yorumlarla dokümantasyon
Hazırsan başlayalım.
Proje yol haritası
Projeyi adım adım şöyle kuracağız:
- Bağlama ve iskelet: dış stil sayfasını HTML'e bağlama kavramını gözden geçir,
bodytür seçicisiyle temel iskeleti kur. - Renk ve yazı tipi:
h1için renk, yazı tipi ailesi ve yazı boyutu ekle. - Boşluk ve hizalama:
piçin dış boşluk, iç boşluk ve hizalama ekle. - Proje sonu:
h2bölümünü ekle, bölümleri yorumlarla ayır.
Her dersin başlangıç kodu önceki dersin çözümünü içerir; sen sadece yeni parçayı eklersin.
Hedef stil sayfası
Proje sonunda elinde şu yapı olacak:
- Dosya başlığı: açıklayıcı bir yorum
- Genel ayarlar:
bodyiçin dış boşluk sıfırlama - Başlık:
h1için renk, yazı tipi ailesi ve yazı boyutu - Alt başlık:
h2için renk ve yazı tipi - Paragraflar:
piçin dış boşluk, iç boşluk ve hizalama
Bu yapıyı 5 derste adım adım kuracaksın.
Uygulama Stil sayfasına başlık yorumu ekle
Projeye başlarken stil sayfasının en üstüne bir yorum ekle. Yorum Kişisel Site 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
-
Proje grubunda başlangıç kodu nasıl çalışır?
- Her dersin başlangıç kodu önceki dersin çözümünü içerir
- Her ders boş bir dosyayla başlar
- Başlangıç kodu yoktur, her şey sıfırdan yazılır
- Başlangıç kodu yalnızca son derste görünür
Cevabı göster
Her dersin başlangıç kodu önceki dersin çözümünü içerir — Doğru. Projede başlangıç kodu her adımda birikir; sen sadece yeni parçayı eklersin.
-
Dersleri ekledikleri parçayla eşleştir
- Bağlama ve iskelet
- body bölümü
- Renk ve yazı tipi
- color, font-family
- Boşluk ve hizalama
- margin, padding
- Proje sonu
- yorumlar + h2 bölümü