Kural, Bildirim ve Değer

Web’in Temelleri ve HTML kursu belgeyi bir düğüm ağacına dönüştürdü ve o ağacın düğümlerine anlam yükledi: hangisi başlık, hangisi bölüm, hangisi çizelge hücresi. O kursun ilk dersinde kurulan üçlü ayrımda bir soru yanıtsız bırakılmıştı — “nasıl görünecek?” sorusu. Bu kurs onu yanıtlar.

Yanıt ayrı bir dille verilir. Bu dilin adı CSS’tir ve HTML gibi bildirimseldir: ne yapılacağını değil, neyin nasıl olduğunu söyler. Bu ders o dilin en küçük birimlerini tanımlar: kural, bildirim ve değer. Ayrımlar burada kurulmazsa sonraki derslerdeki çakışma çözümü anlaşılmaz kalır, çünkü çakışma kurallar arasında değil, bildirimler arasında çözülür.

Kural İki Parçadan Oluşur

Bir CSS kuralı iki parçalıdır: hangi ögelerin etkileneceğini söyleyen seçici (selector) ve ne olacağını söyleyen bildirim bloğu (declaration block).

h1 {
  color: #143a52;
  margin-block-end: 0.5rem;
}

Burada h1 seçici, süslü parantezler arasındaki bölüm bildirim bloğudur. Seçici belgenin ağacına bakar ve bir ögeler kümesi döndürür; bildirim bloğu o kümenin her üyesine uygulanacak değişiklikleri sayar. İki parçanın birbirinden bağımsız olması önemlidir: aynı bildirim bloğu başka bir seçiciyle, aynı seçici başka bir bloğa yazılabilir.

Bir seçici virgülle ayrılmış birkaç seçiciden oluşabilir. Bu, seçici listesi (selector list) yazmaktır ve aynı bloğu her birine ayrı ayrı yazmakla eşdeğerdir:

h1, h2 { color: #143a52; }

Bu yazım, h1 { color: #143a52; } ve h2 { color: #143a52; } kurallarını yazmakla aynı sonucu verir. Eşdeğerlik tam değildir: seçici listesindeki bir üye geçersizse davranış seçicinin türüne bağlıdır, bu ayrıntıya sözde sınıflar dersinde döneceğiz.

Bildirim: Özellik ve Değer

Bildirim bloğunun içindeki her satır bir bildirim (declaration)’dir ve iki parçalıdır: iki nokta üst üstenin solunda özellik (property), sağında değer (value). Bildirimler noktalı virgülle ayrılır.

padding: 8px 12px;

Özellik adı sabit bir sözlükten gelir; uydurulamaz. Değerin hangi biçimleri kabul ettiği her özellik için ayrı tanımlanmıştır: color bir renk bekler, padding bir ile dört arasında uzunluk bekler, text-align sayılı anahtar sözcüklerden birini bekler.

Aşağıdaki program bir biçem metnini kurallara ve bildirimlere ayırır. Özellik adlarını küçük bir sözlükle karşılaştırır ve sözlükte olmayanı işaretler.

// bicem-cozumle.mjs — bir biçem metnini kural ve bildirimlerine ayırır
const bicem = `
/* istasyon sayfasi - ilk kurallar */
body { font-family: system-ui; line-height: 1.5 }
h1, h2 { color: #143a52; margin-block-end: 0.5rem; }
.olcum-cizelgesi td { padding: 8px 12px; text-align: right; renk: mavi }
`;

// yorumlari at, ardindan { } cifti ile kurallara bol
const temiz = bicem.replace(/\/\*[\s\S]*?\*\//g, "");
const kurallar = [];
for (const parca of temiz.split("}")) {
  const [secici, govde] = parca.split("{");
  if (govde === undefined) continue;
  const bildirimler = govde
    .split(";")
    .map((d) => d.trim())
    .filter((d) => d.length > 0)
    .map((d) => {
      const iki = d.indexOf(":");
      return { ozellik: d.slice(0, iki).trim(), deger: d.slice(iki + 1).trim() };
    });
  kurallar.push({ secici: secici.trim().replace(/\s+/g, " "), bildirimler });
}

const bilinen = new Set([
  "font-family", "line-height", "color", "margin-block-end", "padding", "text-align",
]);

for (const k of kurallar) {
  console.log(`secici  : ${k.secici}`);
  console.log(`bildirim: ${k.bildirimler.length}`);
  for (const b of k.bildirimler) {
    const durum = bilinen.has(b.ozellik) ? "gecerli" : "ATILIR";
    console.log(`  ${b.ozellik} = ${b.deger}   [${durum}]`);
  }
}
console.log(`toplam kural   : ${kurallar.length}`);
console.log(`toplam bildirim: ${kurallar.reduce((t, k) => t + k.bildirimler.length, 0)}`);

secici  : body
bildirim: 2
  font-family = system-ui   [gecerli]
  line-height = 1.5   [gecerli]
secici  : h1, h2
bildirim: 2
  color = #143a52   [gecerli]
  margin-block-end = 0.5rem   [gecerli]
secici  : .olcum-cizelgesi td
bildirim: 3
  padding = 8px 12px   [gecerli]
  text-align = right   [gecerli]
  renk = mavi   [ATILIR]
toplam kural   : 3
toplam bildirim: 7

Üç şey görünür oldu. Birincisi, blok içindeki son bildirimden sonraki noktalı virgül zorunlu değildir; body ve son kuralda yazılmadığı hâlde bildirimler doğru ayrıldı. İkincisi, yorumlar /* … */ arasında yazılır ve ayrıştırma öncesinde atılır. Üçüncüsü, renk diye bir özellik yoktur; bu bildirim atılır ve yalnızca o bildirim atılır — bloktaki diğer iki bildirim uygulanır.

Geçersizlik Bildirim Düzeyinde Çözülür

Bu son nokta dilin tasarımına ilişkindir. HTML ayrıştırıcısının kusurlu belgeyi reddetmediğini, tanımlı kurtarma kurallarıyla bir sonuç ürettiğini görmüştük. CSS aynı ilkeyi izler ve kurtarmayı üç düzeyde tanımlar:

• Tanınmayan özellik adı varsa o bildirim atılır, blok yaşar.
• Özellik tanınıyor ama değer o özelliğin dilbilgisine uymuyorsa yine o bildirim atılır. color: mavi yazılırsa color özelliği önceki değerinde kalır.
• Seçici tanınmıyorsa kuralın tamamı atılır; bildirim bloğu hiçbir ögeye uygulanmaz.

Bu üç kuralın ortak sonucu, bir biçem dosyasının hiçbir zaman “derlenmemesi”dir. Anlaşılmayan parça sessizce düşer, kalanı işler. Programlama Temelleri kursundaki sözdizim hatası kavramı burada da işlemez: hata bir durma sebebi değil, bir atlama sebebidir.

Bu hoşgörünün bir bedeli vardır: yanlış yazılmış bir özellik adı hiçbir uyarı üretmeden yok olur. Bir bildirimin işe yaramamasının iki ayrı sebebi olabilir — atılmış olması ya da başka bir kural tarafından bastırılmış olması — ve ikisi dışarıdan aynı görünür. Bu ayrımı basamaklama dersinde ölçülebilir hâle getireceğiz.

Kısayol Özellikler ve Açılımları

Bazı özellikler tek başına bir değer taşımaz; birden çok özelliği aynı anda ayarlar. Bunlara kısayol özellik (shorthand property) denir; ayarladığı özelliklere de o kısayolun açılımı (longhand) denir.

padding: 8px 12px bildirimi tek bir özelliğe değil, dördüne yazar. Değer sayısına göre dağıtım kuralı şudur:

Değer sayısı	Üst	Sağ	Alt	Sol
1 → 8px	8px	8px	8px	8px
2 → 8px 12px	8px	12px	8px	12px
3 → 8px 12px 4px	8px	12px	4px	12px
4 → 8px 12px 4px 2px	8px	12px	4px	2px

Sıra saat yönündedir: üst, sağ, alt, sol. Eksik değerler karşı kenardan kopyalanır.

Kısayolun yazımı kadar önemli olan bir davranışı vardır: yazılmayan açılımı varsayılana döndürür. font: 16px serif yazıldığında yalnızca boyut ve aile ayarlanmaz; font-weight, font-style, line-height gibi o kısayolun kapsadığı bütün açılımlar başlangıç değerine sıfırlanır. Bu davranış, bir kısayolu daha önce ayarlanmış tek bir açılımı değiştirmek için kullanmayı tehlikeli kılar. Kural şudur: kısayol bir grubu kurmak için, açılım o gruptan tek bir değeri değiştirmek için yazılır ve bu sırada kısayol önce gelir.

İstasyon Sayfasının İlk Kuralları

Bu kurs, önceki kursta kurulan ölçüm istasyonu sayfasını biçimlendirir. Sayfa, Kuzey Yamaç adlı istasyonun künyesini, ölçüm çizelgesini, konum görselini ve düzeltme bildirimi formunu taşıyordu. Şimdiye kadar hiçbir biçem yazılmadı; sayfanın görünümü tarayıcının kendi varsayılan biçem dosyasından geliyordu — başlıkların kalın ve büyük, listelerin girintili, bağlantıların altı çizili olması o dosyanın kararıdır.

Kursun eksenindeki biçem dosyası burada başlar:

/* istasyon.css — 1. adım: taban bildirimleri */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #1c2733;
}

h1 {
  font-size: 2rem;
  margin-block-end: 0.5rem;
}

.olcum-cizelgesi td {
  padding: 8px 12px;
  text-align: right;
}

Üç kural, yedi bildirim. Her ders bu dosyaya bir katman ekleyecek ve eklenen katmanın neden o biçimde yazıldığını gerekçelendirecek. Dosya kurs sonunda renk ölçeği, tipografi ölçeği, aralık ölçeği ve durum biçemleri taşıyan bütün bir biçem dosyası olacaktır.

Özet

• Bir CSS kuralı seçici ve bildirim bloğundan oluşur; seçici belgeden bir ögeler kümesi döndürür, blok o kümeye uygulanacak bildirimleri sayar.
• Bildirim, iki nokta üst üsteyle ayrılmış bir özellik–değer çiftidir; özellik adı sabit bir sözlükten gelir, değerin dilbilgisi her özellik için ayrı tanımlıdır.
• Geçersizlik bildirim düzeyinde çözülür: tanınmayan özellik veya uymayan değer yalnızca o bildirimi düşürür, blok yaşamaya devam eder. Tanınmayan seçici ise kuralın tamamını düşürür.
• Kısayol özellik bir grup açılımı birden ayarlar ve yazılmayan açılımı başlangıç değerine döndürür; bu yüzden kısayol kurmak, açılım düzeltmek içindir.
• Sayfanın biçemsiz görünümü tarayıcının varsayılan biçem dosyasından gelir; yazılan her kural o dosyanın üzerine eklenir.

Sonraki Adım

Bu ders kuralın yapısını kurdu ama kuralların belgeye nasıl ulaştığını söylemedi. Bir biçem dosyası belgeye üç ayrı yolla bağlanabilir ve bu üç yol yalnızca yazım kolaylığı bakımından değil, yükleme sırası ve çakışma çözümü bakımından da farklıdır. Sonraki ders bu üç yolu karşılaştırır ve Web’in Temelleri kursundaki kaynak yükleme sırası dersinde kurulan çizimi engelleme davranışını biçem dosyaları açısından yeniden ele alır.