CSS birimleri, genellikle bir web sayfasının boyutu ve tasarımı için kullanışlı bir yoldur. Bu birimlerin bazıları, zoals px ve cm, sabit değerler ile ilgilidir, diğerleri ise em, rem, % veya vh gibi bağıl birimler ile ilgilidir ve görünüm alanının veya üst öğelerin faktörleri ile etkilidir.
CSS iki ana birim türü sunar: mutlak ve bağıl.
Mutlak birimler
CSS'de kullanılan px, cm ve mm gibi mutlak birimler, ölçümün sabit kalmasını ve görünüm alanı ile ilişkisinin olmamasını sağlar, bu sayede öğeler için hassas ve değişiklik gösteren ölçümler kullanılmış olur.
HTML:
1 cm=10mm
1mm=1/10 cm
HTML:
İnçler, eski insan ölçülerinin birer parçaları gibi düşünülmeli, çünkü bu birim, 1959'da uluslararası anlaşmayla standartlaştırıldığında bile kurutulmuş bir arpa tanesinin uzunluğuna dayanıyor ve tam olarak 2,54 santimetreye eşittir.
1 inç = 2,54 cm = 2,54 * 1 cm = 2,54 * 10 mm = 25,4 mm
HTML:
1px = 0,26 mm
HTML:
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:
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:
Bağıl Birimler
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:
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:
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:
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:
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:
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:
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:
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:
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:
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.
Statik web uygulamaları için ideal olan CSS birimleri, yüksek hacimli metinler veya görseller içermeyen durumlarda, hız konusunda öncelikli olmadığı durumlarda kullanışlıdır.
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.
CSS iki ana birim türü sunar: mutlak ve bağıl.
Mutlak birimler
CSS'de kullanılan px, cm ve mm gibi mutlak birimler, ölçümün sabit kalmasını ve görünüm alanı ile ilişkisinin olmamasını sağlar, bu sayede öğeler için hassas ve değişiklik gösteren ölçümler kullanılmış olur.
1. cm
Birbirine göre kıyasladığımızda santimetreler, metrenin 100 katında ölçülür ve SI sistemini yöneten Uluslararası Ağırlık ve Ölçüler Bürosu tarafından belirlenen bir ölçüt olarak kabul edilir.1 cm = 1 / 100 mHTML:
<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, SI sisteminin bir parçası haline geldi ve daha sonra Uluslararası Ağırlık ve Ölçüler Bürosu tarafından yönetilmeye başlandı.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çler, eski insan ölçülerinin birer parçaları gibi düşünülmeli, çünkü bu birim, 1959'da uluslararası anlaşmayla standartlaştırıldığında bile kurutulmuş bir arpa tanesinin uzunluğuna dayanıyor ve tam olarak 2,54 santimetreye eşittir.
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)
Ekranda görsel netliği artırmak için en küçük birim olan piksel, dijital ekranın temelini oluşturan bir ışık noktasını temsil eder; bu birim sayısındaki artışı, görüntü netliği ve ekran çözünürlüğü artışının görsel sonuçlarını beraberinde getirir.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>
Merhaba MMOZirve
<div> Merhaba MMOZirve</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> Merhaba MMOZirve 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> Merhaba MMOZirve 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>
<h1>MMOZirve 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>
<div></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>
Merhaba MMOZirve 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>
Merhaba MMOZirve 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>
Merhaba MMOZirve 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.
Statik web uygulamaları için ideal olan CSS birimleri, yüksek hacimli metinler veya görseller içermeyen durumlarda, hız konusunda öncelikli olmadığı durumlarda kullanışlıdır.
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.
