--- title: 'Kural, Bildirim ve Değer' source: 'https://academia.sh/tr/kurslar/css-temelleri/kural-bildirim-ve-deger' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:17+00:00' license: 'CC BY-SA 4.0' --- # Kural, Bildirim ve Değer Bir biçem dilinin en küçük birimleri; kuralın seçici ve bildirim bloğundan oluşması, özellik–değer çiftinin yapısı ve geçersiz bildirimin atılma kuralı. 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)**. ```css 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: ```css 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. ```css 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. ```js // 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: ```css /* 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.