Altın Konu Web Geliştirme CSS Birimleri

Nizam-ı Alem · 26 Kas 2025

CSS birimleri, öğelerin boyutunu tanımlar. Mutlak birimler (px, cm gibi) sabit değerlere, bağıl birimler (em, rem, %, vh gibi) ise görünüm alanı veya üst öğeler gibi faktörlere bağlıdır.

CSS iki ana birim türü sunar: mutlak ve bağıl.

Mutlak birimler
CSS'deki px, cm ve mm gibi mutlak birimler sabit değerlere sahiptir ve görünüm alanına veya üst öğelere bağlı olarak değişmez. Öğeler için hassas ve değişmeyen ölçümlere ihtiyaç duyulduğunda kullanılırlar.

1. cm

Santimetre (cm), SI sisteminde metreden (m) türetilen bir uzunluk birimidir ve 1 m = 100 cm'dir. SI sistemi, BIPM (Uluslararası Ağırlık ve Ölçüler Bürosu) tarafından yönetilmektedir.

1 cm = 1 / 100 m

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        p {
            font-size: 2cm;
            color: green;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <p>Welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->

2. mm

Fransız Devrimi sırasında metrik sisteme eklenen milimetre (mm), Uluslararası Ağırlık ve Ölçüler Bürosu (BIPM) tarafından yönetilen SI sisteminin bir parçası haline geldi.

1 cm=10mm

1mm=1/10 cm

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        p {
            font-size: 20mm;
            color: green;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <p>Welcome to GFG</p>
</body>

</html>
<!--Driver Code Ends-->

3. inch(in)

İnç, bir başparmağın genişliğine veya kurutulmuş bir arpa tanesinin uzunluğuna dayanan eski insan ölçülerinden türetilmiştir. 1959'da uluslararası bir anlaşmayla standartlaştırılmış ve metrik sisteme uyum sağlaması için tam olarak 25,4 milimetre olarak tanımlanmıştır.

1 inç = 2,54 cm = 2,54 * 1 cm = 2,54 * 10 mm = 25,4 mm

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        p {
            font-size: .5in;
            color: green;
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <p>Welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->

4. pixel (px)

Piksel (px), dijital ekrandaki en küçük birimdir ve bir ışık noktasını temsil eder. Daha fazla piksel, daha iyi görüntü netliği ve daha yüksek ekran çözünürlüğü anlamına gelir.

1px = 0,26 mm

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        p {
            font-size: 40px;
            color: green;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <p>Hello GFG How are you?</p>
</body>
</html>

5. pt (point)

Bir punto (pt), tasarımda yazı tipi boyutlarını ve aralıklarını belirlemek için kullanılan, 1/72 inç'e eşit bir tipografi birimidir.

1pt = 1/72 inch(1 inch=2.54cm)

1pt= 1.33px

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        p {
            font-size: 50pt;
            color: green;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <p>Hello Geeks</p>
</body>
</html>

<!--Driver Code Ends-->

6. 1 pc(pica)

Pika, baskı ve tasarımda kullanılan, 12 puntoya veya 1/6 inç'e (4,233 mm) eşit bir birimdir. Yazı tipi ve resim boyutları gibi düzen boyutlarını belirlemeye yardımcı olur.

1 adet=12pt=15,96 piksel

HTML:

<html>
<head>


    <style>
        p {
            font-size:5pc;
            color: green;
        }
    </style>



</head>
<body>
    <p>Hello Geeks</p>
</body>
</html>

Bağıl Birimler

1. em

CSS'de "em" birimi, ana öğesinin yazı tipi boyutunu ifade eder ve DOM'daki tek öğeyse varsayılan olarak kök öğeye (<html>) gider.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .ok {
            font-size: 20px;
        }
        .para {
            font-size: 2em;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="ok">
        Merhaba Turkmmo
        <div class="para"> Merhaba Turkmmo</div>
    </div>
</body>
</html>

Div etiketinin yazı tipi boyutu 20 pikseldir ve p etiketinin yazı tipi boyutu 2 em olarak ayarlanmıştır; burada 1 em, div etiketinin yazı tipi boyutuna eşittir.
Bu nedenle, p etiketinin yazı tipi boyutu, üst öğenin yazı tipi boyutuna bağlı olarak 40 pikseldir (2 * 20 piksel).

2. rem
CSS'de rem, kök öğenin (<html>) yazı tipi boyutuna bağlıdır ve her durumda aynı kalır.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        html {
            font-size: 25px;
      }
.para {
            font-size: 2rem;
            color: red;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="para"> Merhaba Turkmmo Web Geliştirme Bölümü için Kategorize istiyoruz</div>
</body>
</html>

Bu durumda, div öğesi 2rem ve kök yazı tipi boyutu 25px olarak ayarlandığında, div öğesinin yazı tipi boyutu 50px (2 * 25px) olacaktır.

3. vw veya görünüm genişliği
CSS'de vw, ekran boyutuna göre değişen görünüm genişliğine bağlıdır, bu nedenle bir Android telefonun vw boyutu bir HD TV'ninkinden daha küçüktür.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .para {
            height: 10vw;
            width: 50vw;
            border: 2px solid black;
            background-color: chocolate;
            font-size: 30px;
        }
<!--Driver Code Starts-->
    </style>
</head>
<body>
    <div class="para"> Merhaba Turkmmo Web Geliştirme </div>
</body>
</html>

Bu kodda, div öğesinin yüksekliği, görünüm alanı genişliğinin %50'si ve görünüm alanı yüksekliğinin %10'udur.

4. vh veya görünüm-yüksekliği
CSS'deki vh birimi, görünüm alanı yüksekliğinin %1'idir ve duyarlı tasarımlarda öğeleri pencere boyutuna göre ölçeklendirmek için kullanışlıdır.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .full-height {
            height: 100vh;
            background-color: lightblue;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="full-height">
        <h1>Turkmmo Web DEv Bu div, görünüm alanı yüksekliğinin %100'üdür (100vh)</h1>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Bu kod, görünüm alanının yüksekliğinin %100'ünü (100vh) kaplayan bir div öğesi oluşturur. Flexbox kullanarak metni hem dikey hem de yatay olarak div öğesinin içine ortalar. Arka plan rengi açık mavidir.

5. yüzde(%)
CSS'deki % birimi, üst öğenin boyutuna göredir ve öğelerin duyarlı tasarım için dinamik olarak ayarlanmasını sağlar.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .container {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
        }
        .child {
            width: 50%;
            height: 50%;
            background-color: lightcoral;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

Bu kod, 300 piksel x 200 piksel boyutunda bir kapsayıcı div öğesi ve içinde bir alt div öğesi oluşturur. Alt div öğesi, kapsayıcının genişliğinin ve yüksekliğinin %50'si olacak şekilde ayarlanır ve açık mercan rengi bir arka plana sahiptir.

6. vmin
CSS'deki vmin birimi, görünüm alanının genişliği veya yüksekliğinden hangisi küçükse ona göre belirlenir ve duyarlı tasarımlarda öğelerin orantılı olarak ölçeklenmesine yardımcı olur.

HTML:

<html>
<head>
</head>
<!--Driver Code Ends-->
<style>
    div {
        height: 10vmin;
        width: 20vmin;
        background-color: blueviolet;
    }
</style>
<!--Driver Code Starts-->
<body>
    <div></div>
    <script>
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        console.log(`Viewport width: ${vw / 100}px, Viewport height: ${vh / 100}px`);
    </script>
</body>
</html>

Bu kod, daha küçük görünüm alanının boyutunun (vmin) %20'si boyutunda bir div öğesi ve mavi-mor bir arka plan oluşturur. JavaScript, görünüm alanının genişliğini ve yüksekliğini piksel cinsinden konsola kaydeder.

7. vmax
vmax, daha büyük görünüm alanının boyutunun (genişlik veya yükseklik) %1'ini temsil eden bir CSS birimidir ve öğelerin ekranın baskın boyutuna göre ölçeklenmesine yardımcı olur.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        div {
            height: 2vmax;
            width: 8vmax;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <script>
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        const actualvw = vw / 100;
        const actualvh = vh / 100;
        console.log("view-width:" + actualvw);
        console.log("view-height:" + actualvh);
    </script>
<!--Driver Code Starts-->
</body>
</html>

Kod, daha büyük görünüm alanının boyutunun (vmax) %10'u boyutunda ve cadet mavisi bir arka plana sahip bir div öğesi oluşturur.
JavaScript, iç Genişlik ve iç Yüksekliği 100'e bölerek görünüm alanının genişliğini ve yüksekliğini piksel cinsinden hesaplar ve kaydeder.

8. ch
CSS'deki ch birimi, geçerli yazı tipinin "0" karakterinin genişliğini temsil eder. Karakter boyutlarına göre orantılı genişlik ve yükseklikleri korumak için metin öğelerinin boyutlandırılmasında yaygın olarak kullanılan göreceli bir birimdir.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .small {
            font-family: monospace;
            font-size: 25px;
            height: 10ch;
            width: 10ch;
            background-color: cornflowerblue;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="small">
        Merhaba Turkmmo NoxVortex
    </div>
</body>
</html>

Bu kodda, small sınıf adına sahip bir div öğesi oluşturduk ve küçük kutunun yüksekliği ve genişliği, mevcut yazı tipi olan monospace yazı tipindeki 'x' karakterinin yüksekliğinin 10 katına ayarlandı.

9. ex
Mevcut yazı tipindeki "x" harfinin yüksekliğine göre, öncelikle dikey aralık ve yazı tipiyle ilgili ölçümler için kullanılır.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .small {
            font-family: monospace;
            font-size: 25px;
            height: 10ex;
            width: 10ex;
            background-color: cornflowerblue;
        }

    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="small">
        Merhaba Turkmmo NoxVortex
    </div>
</body>
</html>

Kod, .small sınıfında bir div öğesi oluşturur ve "Hello GFG" metnini 25 piksel yazı tipi boyutunda, tek aralıklı bir yazı tipiyle görüntüler.

Div öğesinin yüksekliği ve genişliği 10ex olarak ayarlanır; burada "ex", yazı tipindeki "x" harfinin yüksekliğine ve arka plan rengi peygamber çiçeği mavisine dayanır.
10. lh
Bu birim görecelidir ve geçerli öğenin satır yüksekliğine bağlıdır.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .small {
            font-family: sans-serif;
            font-size: 20px;
            line-height: 8;
            height:1lh;
            width: 1lh;
            background-color: aquamarine;
        }
    
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="small">
       Merhaba Turkmmo NoxVortex
    </div>
</body>
</html>

Kod, .small sınıfında bir div öğesi oluşturur ve "Hello GFG" ifadesini sans-serif yazı tipi, 25 piksel yazı tipi boyutu ve 10 satır yüksekliğiyle görüntüler. Div öğesinin yüksekliği ve genişliği, satır yüksekliğine bağlı olarak sol-yükseklik birimi kullanılarak ayarlanır.
Satır yüksekliği 10 olduğundan, div öğesinin yüksekliği ve genişliği 20 pikseldir (2 * satır yüksekliği) ve arka plan rengi akuamarindir.

CSS'de Mutlak ve Göreceli Birimler Arasındaki Fark

Hangi Birim Ne Zaman Kullanılmalı?
Mutlak Birimlerin Kullanım Örneği
Kenarlıklar, simgeler veya hassas ölçümlerin önemli olduğu baskı düzenleri gibi sabit boyutlar gerektiren öğeler için kullanılır.
Duyarlılığın öncelikli olmadığı statik bileşenler gibi durumlar için uygundur.
Göreceli Birimlerin Kullanım Örneği
Esneklik ve erişilebilirlik sağlayarak çeşitli cihazlara ve ekran boyutlarına uyum sağlayan duyarlı tasarımlar için kullanılır.
Akışkan düzenler, ölçeklenebilir tipografi veya görünüm alanı veya ana boyutlardan (örneğin vw, % veya rem) etkilenen öğeler için idealdir.

Nizam-ı Alem

Eline sağlık

Lightning · 27 Kas 2025

Eline sağlık

benaldLee · 29 Kas 2025

Paylaşım için teşekkürler

BGame · 29 Kas 2025

Eline sağlık

Altın Konu Web Geliştirme CSS Birimleri

Nizam-ı Alem

Asalet kana değil, duruşa bakar.

1. cm

2. mm

3. inch(in)

4. pixel (px)

5. pt (point)

6. 1 pc(pica)

1. em

En Çok Reaksiyon Alan Mesajlar

Lightning

Lightning

Co-Administrator

benaldLee

Level 3

BGame

BGame.com.tr

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

Altın Konu Web Geliştirme CSS Birimleri

Nizam-ı Alem

Asalet kana değil, duruşa bakar.

1. cm​

2. mm​

3. inch(in)​

4. pixel (px)​

5. pt (point)​

6. 1 pc(pica)​

1. em​

En Çok Reaksiyon Alan Mesajlar

Lightning

Lightning

Co-Administrator

benaldLee

Level 3

BGame

BGame.com.tr

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

1. cm

2. mm

3. inch(in)

4. pixel (px)

5. pt (point)

6. 1 pc(pica)

1. em