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: body bölümü
Başlık: h1 bölümü (renk, yazı tipi, boyut)
Alt başlık: h2 bölümü (renk, yazı tipi)
Paragraflar: p bö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:

body bölümündan önce /* Genel ayarlar */ yorumunu ekle.
h1 bölümündan önce /* Başlık */ yorumunu ekle.
h1 bölümündan sonra /* Alt başlık */ yorumu ve bir h2 bölümü ekle; h2 için color: #2a3d66 ve font-family: Georgia, serif yaz.
p bö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ı

Sıradaki ders: Yazı tipi ailesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler