--- title: 'CSS Birimleri' source: 'https://academia.sh/tr/kurslar/css-temelleri/css-birimleri' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:19+00:00' license: 'CC BY-SA 4.0' --- # CSS Birimleri Mutlak, yazı tipine göreli ve görüntü alanına göreli birimler; em zincirinin hesabı, rem sabitliği ve yüzdelerin hangi ölçüye başvurduğu. Bu konu boyunca uzunluklar piksel ve `rem` olarak yazıldı, `ch` birimi tanımsız bırakıldı. Bir uzunluk birkaç ayrı biçimde yazılabilir ve seçim yalnızca bir sayı biçimi değildir: bazı birimler kullanıcı ayarlarını izler, bazıları izlemez. Bu ders birimleri üç aileye ayırır ve aralarındaki dönüşümleri hesapla gösterir. ## Üç Aile **Mutlak birimler** — `px`, `cm`, `mm`, `in`, `pt`, `pc`, `q`. Aralarındaki oranlar sabittir ve tanım gereği `1in = 96px` kabul edilir. `px` bir aygıt pikseline karşılık gelmez; bir başvuru birimidir ve aygıt piksel oranı ne olursa olsun aynı fiziksel büyüklüğe yakın durur. **Yazı tipine göreli birimler** — `em`, `rem`, `ch`, `ex`, `cap`, `lh`, `rlh`. Bunların değeri hesaplandıkları bağlamdaki yazı ölçülerine bağlıdır. **Görüntü alanına göreli birimler** — `vw`, `vh`, `vmin`, `vmax` ve bunların dinamik biçimleri. Görüntü alanının yüzde biri olarak tanımlıdır. ```js // birim.mjs — em zinciri, rem sabitligi ve yuzde referanslari console.log("--- em zinciri: her kusakta yeniden carpilir ---"); const zincir = [ { ad: "html", fontSize: "16px" }, { ad: "body", fontSize: "1em" }, { ad: "section", fontSize: "1.25em" }, { ad: "div", fontSize: "1.25em" }, { ad: "p", fontSize: "1.25em" }, { ad: "span", fontSize: "1.25em" }, ]; let ustPx = 16; for (const o of zincir) { let px; if (o.fontSize.endsWith("px")) px = parseFloat(o.fontSize); else px = ustPx * parseFloat(o.fontSize); console.log(`${o.ad.padEnd(8)} font-size: ${o.fontSize.padEnd(7)} -> ${px.toFixed(3)}px (ust ${ustPx.toFixed(3)}px)`); ustPx = px; } console.log("\n--- ayni zincir rem ile ---"); const KOK = 16; ustPx = 16; for (const o of zincir) { const px = o.fontSize.endsWith("px") ? parseFloat(o.fontSize) : KOK * parseFloat(o.fontSize); console.log(`${o.ad.padEnd(8)} font-size: ${o.fontSize.replace("em","rem").padEnd(8)} -> ${px.toFixed(3)}px`); } console.log("\n--- ayni ogede em: font-size dis, padding ic degeri kullanir ---"); const ustFont = 16, kendiFont = 1.5 * ustFont; console.log(`ust font-size = ${ustFont}px`); console.log(`font-size: 1.5em -> ${kendiFont}px (ust deger uzerinden)`); console.log(`padding: 1.5em -> ${1.5 * kendiFont}px (kendi font-size'i uzerinden)`); console.log(`line-height: 1.5em -> ${1.5 * kendiFont}px`); console.log("\n--- yuzde neye gore cozulur ---"); const KAPSAYAN = { en: 640, boy: 400, fontSize: 16 }; const REF = { "width": ["kapsayan en", KAPSAYAN.en], "padding-top": ["kapsayan EN", KAPSAYAN.en], "margin-left": ["kapsayan en", KAPSAYAN.en], "height": ["kapsayan boy", KAPSAYAN.boy], "font-size": ["ust font-size", KAPSAYAN.fontSize], "line-height": ["kendi font-size", 16], }; for (const [oz, [aciklama, taban]] of Object.entries(REF)) { console.log(`${oz.padEnd(12)} %50 -> ${(taban * 0.5).toFixed(1)}px (referans: ${aciklama} = ${taban})`); } console.log("\n--- mutlak birim donusumleri (1in = 96px) ---"); const PX = { px: 1, in: 96, cm: 96/2.54, mm: 96/25.4, q: 96/101.6, pt: 96/72, pc: 16 }; for (const [b, v] of Object.entries(PX)) console.log(`1${b.padEnd(3)} = ${v.toFixed(4)}px`); console.log("\n--- ch ve ex (ornek bir yazi tipinde) ---"); const fs = 16, chOran = 0.5, exOran = 0.52; console.log(`font-size=${fs}px, 1ch=${fs*chOran}px, 1ex=${(fs*exOran).toFixed(2)}px`); console.log(`max-width: 70ch -> ${70 * fs * chOran}px`); ``` ``` --- em zinciri: her kusakta yeniden carpilir --- html font-size: 16px -> 16.000px (ust 16.000px) body font-size: 1em -> 16.000px (ust 16.000px) section font-size: 1.25em -> 20.000px (ust 16.000px) div font-size: 1.25em -> 25.000px (ust 20.000px) p font-size: 1.25em -> 31.250px (ust 25.000px) span font-size: 1.25em -> 39.063px (ust 31.250px) --- ayni zincir rem ile --- html font-size: 16px -> 16.000px body font-size: 1rem -> 16.000px section font-size: 1.25rem -> 20.000px div font-size: 1.25rem -> 20.000px p font-size: 1.25rem -> 20.000px span font-size: 1.25rem -> 20.000px --- ayni ogede em: font-size dis, padding ic degeri kullanir --- ust font-size = 16px font-size: 1.5em -> 24px (ust deger uzerinden) padding: 1.5em -> 36px (kendi font-size'i uzerinden) line-height: 1.5em -> 36px --- yuzde neye gore cozulur --- width %50 -> 320.0px (referans: kapsayan en = 640) padding-top %50 -> 320.0px (referans: kapsayan EN = 640) margin-left %50 -> 320.0px (referans: kapsayan en = 640) height %50 -> 200.0px (referans: kapsayan boy = 400) font-size %50 -> 8.0px (referans: ust font-size = 16) line-height %50 -> 8.0px (referans: kendi font-size = 16) --- mutlak birim donusumleri (1in = 96px) --- 1px = 1.0000px 1in = 96.0000px 1cm = 37.7953px 1mm = 3.7795px 1q = 0.9449px 1pt = 1.3333px 1pc = 16.0000px --- ch ve ex (ornek bir yazi tipinde) --- font-size=16px, 1ch=8px, 1ex=8.32px max-width: 70ch -> 560px ``` ## em Zinciri İlk iki blok bu dersin merkezindeki farkı gösteriyor. Aynı ağaçta, her kuşakta `font-size: 1.25` bildirimi yazıldı. `em` ile yazıldığında değer her kuşakta **bir öncekinin üzerine** çarpıldı ve beşinci kuşakta 39 pikseli aştı. `rem` ile yazıldığında her kuşak kök ögenin boyutunu kullandı ve değer 20 pikselde sabit kaldı. `em` — ögenin **kendi hesaplanmış** `font-size` değerine bağlıdır. `font-size` özelliğinde kullanıldığında, ögenin kendi değeri henüz hesaplanmadığı için **üst ögenin** değeri kullanılır. Zincirleme büyüme buradan doğar. `rem` — her zaman **kök ögenin** `font-size` değerine bağlıdır. Zincir yoktur. Üçüncü blok aynı öge içindeki ayrımı gösteriyor. `font-size: 1.5em` üst ögenin 16 pikseli üzerinden 24 piksel verdi. Aynı ögede `padding: 1.5em` ise ögenin **kendi** 24 pikseli üzerinden 36 piksel verdi. İki bildirim aynı sayıyı taşıyor ama farklı tabanlara başvuruyor. `em` biriminin bu davranışı bir kusur değil, bileşen ölçeklemesinin aracıdır: bir düğmenin iç boşluğu `em` ile yazıldığında, düğmenin yazı boyutu değiştiğinde iç boşluk da onunla birlikte ölçeklenir. `rem` ile yazılsaydı sabit kalırdı. ## Yüzdelerin Referansı Özelliğe Göre Değişir Dördüncü blok, sık yapılan bir varsayımı yıkıyor. Bir yüzde her zaman aynı ölçüye başvurmaz. `width`, `margin` ve — dikkat — **dikey iç boşluk da dâhil olmak üzere** bütün `padding` değerleri kapsayan bloğun **satır içi ölçüsüne** başvurur. `padding-top: 50%` yazımı kapsayanın yüksekliğinin değil, genişliğinin yarısını verir. Bu tuhaf görünen kural bir kalıbın temelidir: bir kutuya en–boy oranı vermek. `padding-top` genişliğe bağlı olduğu için, yüksekliği genişliğe oranlı bir kutu bu yolla kurulabilir. `aspect-ratio` özelliği aynı işi doğrudan yapar ve bugün tercih edilen yol odur. `height` kapsayanın yüksekliğine, `font-size` üst ögenin yazı boyutuna, `line-height` ögenin **kendi** yazı boyutuna başvurur. ## Piksel Yazmanın Bedeli Beşinci blok mutlak birimlerin sabit oranlarını veriyor. Bu oranlar hesaplanabilir ama kararın asıl boyutu başka yerdedir. Kullanıcı, tarayıcısında varsayılan yazı boyutunu değiştirebilir. Bu ayar kök ögenin `font-size` değerini etkiler. Sonuç şudur: - `rem` ve `em` ile yazılan ölçüler bu ayarla **birlikte** büyür. - `px` ile yazılan ölçüler **değişmez**. Yazı boyutu piksel olarak yazılmış bir sayfa, kullanıcının okuma ayarını görmezden gelir. Yakınlaştırma yine işler, ama yakınlaştırma bütün sayfayı büyütür — kullanıcının istediği, genellikle yalnızca metnin büyümesidir. Uygulanabilir kural: **yazı boyutu, aralık ve kutu ölçüleri `rem` ya da `em` ile yazılır.** `px` yalnızca gerçekten sabit kalması gereken ölçüler için kullanılır: ince kenarlıklar, bir piksellik ayırıcılar, gölge ofsetleri. Kök ögenin `font-size` değerine sabit bir piksel yazmak aynı sorunu geri getirir; bu değer ya hiç yazılmaz ya da yüzdeyle yazılır. ## Yazı Tipine Bağlı Diğer Birimler Son blok `ch` birimini tanımlıyor: bir yazı tipinde "0" karakterinin genişliği. Kutu boyutlandırma dersinde yazılan `max-width: 70ch` bildirimi burada karşılığını buluyor — örnekteki oranla 560 piksel. `ex` küçük harf yüksekliğine, `cap` büyük harf yüksekliğine, `lh` ögenin satır yüksekliğine karşılık gelir. Bunların değeri seçilen yazı tipine bağlıdır; örnekteki 0,5 ve 0,52 oranları örnek değerlerdir. `lh` birimi aralık ölçeği kurmakta kullanışlıdır: `margin-block-end: 1lh` yazmak, boşluğun tam bir satır yüksekliği kadar olmasını sağlar ve metnin taban çizgisi düzeni korunur. ## Görüntü Alanı Birimleri `1vw` görüntü alanı genişliğinin yüzde biri, `1vh` yüksekliğinin yüzde biridir. `vmin` ve `vmax` ikisinden küçüğünü ve büyüğünü kullanır. Yükseklik birimlerinde bir ayrım vardır. Bazı ortamlarda tarayıcı arayüzü kaydırmayla gizlenip görünür ve görüntü alanının yüksekliği değişir. Bunun için üç aile tanımlıdır: `svh` en küçük, `lvh` en büyük, `dvh` ise o anki yüksekliği kullanır. `100vh` yazmak arayüz görünürken taşan bir kutu üretebilir; `100svh` bu durumu önler. Yazı boyutunu doğrudan `vw` ile yazmak sakıncalıdır: kullanıcı yakınlaştırma yaptığında görüntü alanı genişliği yakınlaştırmayla ölçüldüğü için metin büyümez. Ölçeklenen tipografi için görüntü alanı birimi tek başına değil, bir alt sınırla birlikte kullanılır — bunun aracı bir sonraki derste ele alınacak. ```css /* istasyon.css — 24. adım: birim seçimi */ :root { font-size: 100%; } /* kullanıcı ayarını koru */ main { max-width: 70ch; padding-inline: 1rem; } h1 { font-size: 2.4414rem; margin-block-end: 0.5em; } .durum-rozeti { padding-block: 0.25em; padding-inline: 0.75em; } .olcum-cizelgesi th, .olcum-cizelgesi td { padding-block: 0.5rem; padding-inline: 0.75rem; border-block-end: 1px solid var(--cizgi); } .kart { box-shadow: 0 1px 2px rgb(28 39 51 / 0.06); } ``` Rozetin iç boşluğu `em` ile yazıldı: rozet küçük bir yazı boyutunda kullanıldığında iç boşluk da küçülür. Hücre iç boşluğu `rem` ile yazıldı: çizelgenin ritmi hücre içeriğinin boyutundan bağımsız kalmalıdır. Başlığın alt boşluğu `em` ile yazıldı ve başlığın kendi boyutuna bağlandı; büyük başlıklar büyük boşluk alır. Kenarlık ve gölge ofseti `px` olarak kaldı: bunlar ölçeklendiğinde bulanıklaşan, sabit kalması istenen ölçülerdir. ## Özet - `em`, ögenin kendi hesaplanmış yazı boyutuna bağlıdır; `font-size` özelliğinde kullanıldığında üst ögenin değerine başvurur ve her kuşakta yeniden çarpılarak zincirleme büyür. - `rem` her zaman kök ögenin yazı boyutuna bağlıdır; zincir yoktur ve değer ağacın derinliğinden etkilenmez. - Bir yüzdenin referansı özelliğe göre değişir: `width` ve **bütün** `padding` değerleri kapsayanın satır içi ölçüsüne, `height` kapsayanın blok ölçüsüne, `line-height` ögenin kendi yazı boyutuna başvurur. - `px` ile yazılan ölçüler kullanıcının yazı boyutu ayarıyla büyümez; yazı, aralık ve kutu ölçüleri `rem` ya da `em` ile yazılır, `px` sabit kalması gereken ince ayrıntılara ayrılır. - Görüntü alanı yükseklik birimlerinin üç ailesi vardır; `svh` en küçük, `lvh` en büyük, `dvh` o anki yüksekliği kullanır. ## Sonraki Adım Birimler tanımlandı ama hâlâ tek tek sabit değerler yazılıyor. Bir ölçünün iki değer arasında kalması, iki ölçüden küçüğünün seçilmesi ya da bir değerin başka bir değerden çıkarılması gerekebilir. Sonraki ders — kursun son dersi — bu hesapları yapan fonksiyonları tanımlar ve kursun kurduğu biçem dosyasını toparlar.