Mengenal Jenis-Jenis Satuan Value dalam CSS

0
15
Advertisement

CSS menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt untuk memubuat nilai dari property nya. misalnya kita mau mengatur besar suatu tulisan h1 nilainya bisa kita buat 20vw, 20px, atau memakai nilai lainnya.
css mengelompokan nilai ini kedalam 3 bagian, yaitu nilai absolut, relatif dan persen.

Nilai Absolute

nilai absolut merupakan nilai yang tidak terpengaruh oleh kondisi tag induknya, yang termasuk kedalam nilai absolut adalah

Advertisement
cmcentimeters
mmmillimeters
ininches (1in = 96px = 2.54cm)
px *pixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
font-size: 0.5cm;
line-height: 1cm;
}
</style>
</head>
<body>
<h1>Ini heading 1.5cm</h1>
<h2>Ini heading 2 1cm</h2>
<p>paragraph.</p>
<p>paragraph Lainnya.</p>
</body>
</html>

dari contoh diatas saya membuat h1 ukurannya menjadi 1.5cm, dan h2 ukuran 1cm
untuk contoh milimeter coba edit code diatas, ganti selector h1 dan h2 menjadi seperti berikut

kemudian jalankan, ternyata setelah dijalankan hasilnya sama dengan centimeter.
Contoh inches ganti style dalam contoh diatas dengan yang dibawah ini

Contoh Pixel – ganti style diatas dengan dibawah ini dan lihat hasilnya.

Contoh points – ganti style diatas dengan yang dibawah ini

Contoh Picas

Nilai Relatif

nilai relatif dapat terpengaruh oleh tag disekitarnya. nilai relatif yang didukung seperti pixel (px), Em-height (em), dan X-height (ex).
pixel (px) adalah ukuran yang paling umum digunakan di CSS. 1,1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1,1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.
dibawah ini table perbandingan antara px, em, dan persen

pxempercent
5px0.3125em31.25%
6px0.3750em37.50%
7px0.4375em43.75%
8px0.5000em50.00%
9px0.5625em56.25%
10px0.6250em62.50%
11px0.6875em68.75%
12px0.7500em75.00%
13px0.8125em81.25%
14px0.8750em87.50%
15px0.9375em93.75%
16px1.0000em100.00%
17px1.0625em106.25%
18px1.1250em112.50%
19px1.1875em118.75%
20px1.2500em125.00%
21px1.3125em131.25%
22px1.3750em137.50%
23px1.4375em143.75%
24px1.5000em150.00%
25px1.5625em156.25%

Untuk mengkonversi satuan nilai bisa masuk kesini
1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em> yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.
Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini, sehingga browser kadang kala menyamakan 1ex dengan 0,5em.

Nilai Persentasi

Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Misalkan kita membuat sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.
berikut table informasi browser yang support dengan value yang telah dibahas diatas.

Length Unit Chrome IE Firefox Sapari Opera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.019.06.020.0
vmax26.0Not supported19.0Not supported20.0

sebenarnya satuan value vmax ini tak begitu penting dan sangat jarang dipakai, apalagi di indonesia sangat jarang orang yang memakai browser IE, dan kebanyakan satuan nilai diatas tidak support dibrowser IE tersebut.

Video Terbaru

Berita sebelumyaMengenal Kode-Kode Warna Dalam CSS
Berita berikutnyaCara Membuat Teks Underline, Overline, dan Line-through – Text Decoration CSS

Apa yang anda pikirkan?