CSS Academy · Ders

Mutlak Birimler: px, pt, cm

Piksel, punto ve santimetre gibi sabit mutlak birimlerin ne zaman kullanılacağını öğrenin.

1. ders / 413 adım

Mutlak Birimler: px, pt, cm, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Mutlak ve Göreli Birimler

CSS birimleri iki kategoriye ayrılır: mutlak (sabit, gerçek dünya ölçüleri) ve göreli (başka bir değere göre ölçeklenen). Mutlak birimler, cihazdan bağımsız fiziksel ölçümlerdir.

px — Piksel

Piksel (px), ekranlarda en çok kullanılan mutlak birimdir. Standart ekranlarda 1px = 1 cihaz pikselidir. Yüksek DPI (Retina) ekranlarda CSS pikselleri birden fazla cihaz pikseline karşılık gelir; böylece öğeler görsel olarak aynı boyutta kalır.

<button class="button">10px 20px padding</button>

pt — Punto

Punto (pt), baskı tasarımından gelen bir birimdir: 1pt = bir inçin 1/72'si. CSS'te 1pt = 4/3px'tir (yaklaşık 1,33px). Öncelikle tipografi için yazdırma stil sayfalarında kullanılır.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — Fiziksel Birimler

CSS; santimetre (cm), milimetre (mm) ve inç (in) birimlerini destekler. Bunlar yazdırma bağlamlarında anlamlıdır; ancak ekran DPI değeri değiştiği için ekranlarda güvenilir değildir.

<div class="page">A4-width page (21cm), used for print layouts</div>

Ekranlarda px: Pratik Kullanım

Ekran tabanlı web tasarımı için px tek pratik mutlak birimdir. Bununla birlikte, yazı tipi boyutlarında px kullanılması önerilmez; çünkü tarayıcıdaki kullanıcı yazı tipi boyutu tercihlerini geçersiz kılar.

Cihaz Piksel Oranı

Modern ekranların cihaz piksel oranı (DPR) 1'den büyüktür. 2x Retina ekran, her CSS pikseli için 2 cihaz pikseli işler. Yüksek DPI görüntülerin görüntüleme boyutunun 2 veya 3 katı olması gerekmesinin nedeni budur.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

px Ne Zaman Kullanılmalı

px birimini şu durumlarda kullanın:

Kenar genişlikleri (1px keskin görünür)
Gölgeler ve dönüşümler
Medya sorgusu kırılma noktaları (ancak em tabanlı kırılma noktaları daha dayanıklıdır)
Tam piksel denetiminin gerekli olduğu sabit kullanıcı arayüzü öğeleri

Tipografi İçin px Kullanırken NOT

html veya body üzerinde font-size: 16px ayarlamak, birçok tarayıcıda kullanıcının erişilebilirlik tercihini geçersiz kılar. Bunun yerine tarayıcının varsayılanına göreli olan rem kullanın.

Q — Çeyrek Milimetre

q birimi, bir milimetrenin 1/4'üne eşittir. Japonca baskı tipografisinde ince tipografik denetim için kullanılır. Genel web tasarımında nadiren kullanılır.

PC — Pika

Pika (pc), 12 puntoya veya bir inçin 1/6'sına eşittir. Puntolar gibi pikalar da dijital ekranlarda nadiren ihtiyaç duyulan baskı birimleridir.

Baskı Stil Sayfalarında Mutlak Birimler

Baskı stil sayfaları, CSS'te mutlak birimler için başlıca geçerli kullanım alanıdır. Fiziksel birimler, yazdırılan sayfanın kâğıt üzerindeki ölçülerinin doğru olmasını sağlar.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Hızlı Kontrol

Hangi mutlak CSS birimi bir inçin 1/72'sine eşittir?

İnteraktif derste cevapla

Özet

Mutlak birimler, üst öğelerden bağımsız sabit ölçümlerdir. px, ekranlar için pratik birimdir. Fiziksel birimler (pt, cm, in) yazdırma stil sayfalarında kullanılır. Tipografi için px kullanmaktan kaçının; kullanıcıların yazı tipi boyutu tercihlerini geçersiz kılar. Bunun yerine rem kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Mutlak Birimler: px, pt, cm” dersi ücretsiz mi?

Evet — “Mutlak Birimler: px, pt, cm” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Mutlak Birimler: px, pt, cm” dersinde ne öğreneceğim?

Piksel, punto ve santimetre gibi sabit mutlak birimlerin ne zaman kullanılacağını öğrenin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Mutlak Birimler: px, pt, cm” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön