Proje sonu - İlk sayfam
Tüm parçaları birleştirip stil sayfasını tamamlarsın.
Proje sonu: tüm parçaları birleştir
Son adıma geldin. Stil sayfasında başlık yorumu, body, h1 ve p bölümleri var. Şimdi iki şeyi daha ekleyeceksin: h2 alt başlık bölümü ve bölüm yorumları.
Yorumlar, dosyayı sen ve başkaları için okunabilir tutar. Tarayıcı bunları göstermez ama kaynağı görüntüleyen herkes okur. Her bölümün üstüne kısa bir yorum yazmak, dosyanın yapısını hızlıca görmeyi sağlar. h2 bölümü ise alt başlıkları h1 ile uyumlu hale getirir.
Yorum yazma pratikleri
Yorum yazarken şu noktalara dikkat et:
- Kısa tut: birkaç sözcük ya da tek cümle yeter. Uzun açıklamalar dosyayı kalabalıklaştırır.
- Konum önemli: yorum, açıkladığı bölümün hemen üstünde olmalı.
- Anlamlı yaz: 'bölüm' yerine 'Genel ayarlar' ya da 'Başlık' gibi açık yaz.
İyi yorumlar, aylar sonra döndüğünde de dosyayı hızlıca anlamanı sağlar.
Tam dosya yapısı
Proje sonunda dosyan şu bölümlere ayrılmış olacak:
- Dosya başlığı: en üstte açıklayıcı yorum
- Genel ayarlar:
bodybölümü - Başlık:
h1bölümü (renk, yazı tipi, boyut) - Alt başlık:
h2bölümü (renk, yazı tipi) - Paragraflar:
pbölümü (boşluk, hizalama)
Her bölümün üstünde kısa bir yorum olacak. Bu yapı, dosyayı tararken her bölümün ne yaptığını hemen görmeni sağlar.
Uygulama h2 bölümünü ve bölüm yorumlarını ekle
Önceki dersin tüm bölümlerini içeren dosyayı al. Şu eklemeleri yap:
bodybölümündan önce /* Genel ayarlar */ yorumunu ekle.h1bölümündan önce /* Başlık */ yorumunu ekle.h1bölümündan sonra /* Alt başlık */ yorumu ve birh2bölümü ekle; h2 için color: #2a3d66 ve font-family: Georgia, serif yaz.pbölümündan önce /* Paragraflar */ yorumunu ekle.
Örnek çözümü göster
/* Kişisel Site stil sayfası - Ayşe Yılmaz */
/* Genel ayarlar */
body {
margin: 0;
}
/* Başlık */
h1 {
color: #2a3d66;
font-family: Georgia, serif;
font-size: 2rem;
}
/* Alt başlık */
h2 {
color: #2a3d66;
font-family: Georgia, serif;
}
/* Paragraflar */
p {
margin: 12px 0;
padding: 0 16px;
text-align: left;
}Kendini test et
-
CSS dosyasına yorum eklemek neden yararlıdır?
/* Bu bir yorumdur */- Bölümleri açıklamak ve okunabilirliği artırmak için
- Stil değişikliklerini tarayıcıdan gizlemek için
- Sayfa yüklenmesini hızlandırmak için
- Renkleri otomatik olarak seçmek için
Cevabı göster
Bölümleri açıklamak ve okunabilirliği artırmak için — Doğru. Yorumlar dosyayı okuyan kişiye açıklama yazar; tarayıcı bunları görmez.
-
CSS yorumunu başlatan işareti tamamla
____ Bu dosya Kişisel Site'yi stillendirir */Cevabı göster
/* Bu dosya Kişisel Site'yi stillendirir */ -
Proje kavramlarını anlamlarıyla eşleştir
- link element
- CSS'i HTML'e bağlar
- tür seçici
- etiket adıyla seçer
- comment
- /* açıklama */
- external CSS
- ayrı .css dosyası