Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS

CSS Birimleri (Bağıl ve Kesin)

Size bu yazımızda CSS dilinde ki birimleri anlatacağız.

CSS Birimleri

CSS’te 9 birim vardır. Bu birimlerin 4’ü bağıl (göreceli), 5 tanesi kesin birimlerdir.


Bağıl (Göreceli) Birimler

Bağıl diyoruz… Ama bu bağıl ne demek?

Bağıl: "varlığı başka bir şeyin varlığına bağlı olan."

Yani bu tip birimlerin durumları başka birimlerin varlığına göre değişkenlik gösterir.

Bağıl (Göreceli) Birimler

  • em
  • ex
  • px (piksel)
  • % (yüzde)

em Birimi

(Bilgi: 1 em = 16 px (piksel))

Örnek:

.em {
    font-size: 2em;
}

Bunu HTML dosyasında kullanalım:

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.em {
    font-size: 2em;
}
</style>
</head>
<body>
    <p class="em">Merhaba Dünya</p>
</body>
</html>

ex Birimi

Seçili yazı tipinde ki x harfinin yüksekliğini faz alan birimdir. Bir örnek ile gösterelim.

.ex {
    font-size: 3ex;
}

HTML Dosyası:

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.ex {
    font-size: 3ex;
}
</style>
</head>
<body>
    <p class="ex">Merhaba Dünya</p>
</body>
</html>

px (Piksel) Birimi

Piksel, ekranlarda ki en küçük yapı birimi, noktadır. Bu birimde ise bir pikselin yüksekliğine göre işlem yapılmaktadır. Yani 30 px bir yazı büyüklüğü belirlersek ekranda kapladığı alanın uzunluğu tam 30 pc kadardır. Bunu da diğerleri gibi örnekleyerek açıklayalım.

.px {
    font-size:32px;
}

HTML kodu

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.px {
    font-size: 32px;
}
</style>
</head>
<body>
    <p class="px">Merhaba Dünya</p>
</body>
</html>

% (Yüzde) Birimi

% Birimi ekrana göre hareket edem, ekranın boyutuna göre kendini düzenleyen birimdir. Örnek vermek gerekirse bu birim ile bir özellik belirlersek ve bu özellik %40 oranında olursa web sitesinin görüntülendiği ekran fark etmeksizin açıldığı ekranda %40’lık bir bölümü etkileyecektir. Gelin örnekler ile inceleyelim.

.yuzde_ornegi {
    font-size: 50%;
}
.yuzde_ornegi2 {
    font-size: 25%;
}

HTML Kodu:

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.yuzde_ornegi {
    font-size: 50%;
}
.yuzde_ornegi2 {
    font-size: 25%;
}
</style>
</head>
<body>
    <p class="yuzde_ornegi">Merhaba Dünya</p>
    <p class="yuzde_ornegi2">Merhaba Dünya-2</p>
</body>
</html>

Kesin Birimler

Bu birim türlerinin hepsi gerçek hayatta kullandığımız birimlerdir.

  • inç
  • cm (santimetre)
  • mm (milimetre)
  • pt (point)
  • pc (pika)

inç Birimi

1 inç’in karşılığı 2.54 cm’dir.

Örnek:

.in {
    font-size: 1in;
}

HTML Kodu

<html>
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.in {
    font-size: 1in;
}
</style>
</head>
<body>
    <p class="in">Merhaba Dünya</p>
</body>
</html>

cm (santimetre) Birimi

Bu birim gerçek hayatta kullanılan santimetreyi ifade eder.

Örnek:

.cm {
    font-size: 5cm;
}

HTML Kodu

<html>
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.cm {
    font-size: 5cm;
}
</style>
</head>
<body>
    <p class="cm">Merhaba Dünya</p>
</body>
</html>

mm (milimetre) Birimi

bu birim gerçek hayatta kullanılan milimetreyi ifade eder.

Örnek:

.mm {
    font-size: 50mm;
}

HTML Kodu

<html>
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.mm {
    font-size: 50mm;
}
</style>
</head>
<body>
    <p class="mm">Merhaba Dünya</p>
</body>
</html>

pt (point) Birimi

Bu birim inç değerinin 1/72’sine denk gelir.

Örnek:

.pt {
    font-size: 144pt;
}

HTML Kodu

<html>
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.pt {
    font-size: 144pt;
}
</style>
</head>
<body>
    <p class="pt">Merhaba Dünya</p>
</body>
</html>

pc (pika) Birimi

Bu birim inç değerinin 1/6’sine denk gelir.

Örnek:

.pc {
    font-size: 12pc;
}

HTML Kodu

<html>
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style type="text/css">
.pc {
    font-size: 12pc;
}
</style>
</head>
<body>
    <p class="pc">Merhaba Dünya</p>
</body>
</html>
Yorum Yap

Not: Yorum alanı HTML kod desteklememektedir...
Gönder
Yorum gönderildi. Onaylandıktan sonra yayınlanacaktır.
© 2020 - Arda KARAÇAYIR | Freelance Web Developer