Di dalam dunia desain kita harus selalu berurusan dengan warna ataupun satuan.Begitu juga ketika kita mendesain halaman website.Jika kita berbicara soal satuan dan ukuran dalam dunia CSS,maka sebenarnya CSS menyediakan beragam kode yang cukup banyak.Untuk keperluan ini,CSS menyediakan berbagai satuan ukuran seperti pixel,em,point,in,pc dan pt.
Nilai dalam dunia CSS dapat bernilai positif ataupun negatif,bisa berbentuk angka bulat ataupun desimal.Dapat pula dalam bentuk range angka maupun hexadecimal.Namun sebelum itu,kita perlu mengenal berbagai jenis nilai dalam CSS.
NILAI ABSOLUT
Nilai absolut menunjuk pada nilai di dalam CSS yang tidak dipengaruhi tag induknya (parent) dan mengacu pada ukuran sebenarnya apabila dicetak di atas media printing.(Penjelasan tentang tag induk/parent ada di postingan sebelumnya ^ ^ silahkan klik disini bagi yang belum mengerti.)
Beberapa contoh satuan dengan nilai absolut ini adalah milimeter (mm),centimeter (cm),inch (in),point (pt),dan pica (pc).Ukuran point (pt) sering digunakan oleh software pengolah kata untuk menentukan ukuran dari font.Sebagai informasi nilai dari 1 inch sama dengan 72 pt,sehingga jika ukuran font diatur sebesar 12pt,maka nilai inch tersebut setara dengan 1/8 inch saat dicetak.
Beberapa contoh satuan dengan nilai absolut ini adalah milimeter (mm),centimeter (cm),inch (in),point (pt),dan pica (pc).Ukuran point (pt) sering digunakan oleh software pengolah kata untuk menentukan ukuran dari font.Sebagai informasi nilai dari 1 inch sama dengan 72 pt,sehingga jika ukuran font diatur sebesar 12pt,maka nilai inch tersebut setara dengan 1/8 inch saat dicetak.
NILAI RELATIF
Perbedaan nilai relatif dan absolut adalah nilai relatif dipengaruhi oleh tag-tag lain.CSS mendukung banyak satuan dari nilai-nilai relatif seperti pixel (px), em-height (em), dan X-height (ex).
Dibandingkan dengan satuan lainnya,ukuran pixel (px) merupakan satuan ukur yang paling sering digunakan dalam CSS.Dalam dunia CSS,pixel termasuk satuan dari nilai relatif karena spesifikasi ukurannya tidak seragam satu dengan yang lainnya.Contoh : di dalam spesifikasi CSS 3, 1 pixel disamakan dengan ukuran 0,26 mm atau 1/96 inch.Namun banyak browser yang menganggap besarnya 1 pixel sama dengan 1 pixel sesungguhnya yang ada di dalam layar monitor.
Sedangkan 1 em-height (em) memiliki ukuran yang sama besar dengan ukuran asal yang diturunkan tag tersebut.Dengan begitu,saat kira mengatur agar sebuah paragraf memiliki teks sebesar 12 point (pt),maka tag <em> yang berada di dalam paragaraf tersebut disebut secara inheritance akan berukuran 1 em.Kemudian, jika kita mengubah nilainya menjadi em {font-size: 1.2 em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar daripada ukuran tag <p>.
Satuan ukur relatif yang terakhir yaitu X-height(ex).Ex berasal dari tinggi sebuah karakter "x" dari sebuah font.Namun,dalam praktiknya banyak browser yang menyamakan 1ex dengan 0,5 em.
NILAI PERSENTASE
Nilai persentase adalah sebuah nilai yang diatur sebesar per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut.Sebagai contoh,jika kita membuat sebuah definisi CSS seperti di bawah ini :
p {font-size: 10pt;} dan em {font-size: 120%}
maka yang terjadi jika terdapat tag <em> dalam tag <p>,ukuran font dari tag <em> akan menjadi 120% dari 10pt.Nilai tersebut akan menghasilkan ukuran sebesar 12 pt.
Berikut ini adalah kode HTML dan CSS yang menggunakan berbagai macam satuan ukur yang telah dipelajari.Silahkan mengubah satuan dari kode di bawah sesuka anda ! ^ ^
<!DOCTYPE HTML>
<html>
<head>
<title>Nilai Satuan CSS</title>
<style type="text/css">
body {font-size: 24pt;}
p.mm {font-size: 15mm;}
p.inchi {font-size: 1in;}
p.pica {font-size: 5pc;}
p.pixel {font-size: 40px;}
p.em {font-size: 1.8em;}
p.ex {font-size: 12ex;}
p.persen {font-size: 200%}
</style>
</head>
<body>
<p>Teks ini berukuran 24 point</p>
<p class="mm">Teks ini berukuran 15mm</p>
<p class="inchi">Teks ini berukuran 1 inchi</p>
<p class="pica">Teks ini berukuran 5 pica</p>
<p class="pixel">Teks ini berukuran 40px</p>
<p class="em">Teks ini berukuran 1.8em</p>
<p class="ex">Teks ini berukuran 12ex</p>
<p class="persen">Teks ini berukuran 200 persen</p>
</body>
</html>
Sekian pembahasan mengenai satuan nilai pada CSS.Semoga ilmu yang dibagikan dapat bermanfaat bagi yang membutuhkan ^ ^.Terima kasih !
Comments
Post a Comment