Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam memilih nilai atau value tertentu untuk suatu properti, ibarat tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan banyak sekali ukuran ibarat pixel, em, point, in, pc, dan pt.
Sebuah nilai dalam CSS sanggup bernilai positif maupun negatif, sanggup berupa angka bulat, maupun angka desimal. Namun beberapa properti juga mempunyai batasan, ibarat warna yang hanya sanggup bernilai 0-255 atau 0 hingga dengan FF.
Nilai Absolut
Nilai otoriter yakni sebuah nilai di dalam CSS, dimana nilai tersebut tidak dipengaruhi kondisi tag induknya (parent), dan didasarkan pada ukuran bahu-membahu di media printing. Di dalam CSS, nilai otoriter ini adalah: milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).
Kelima nilai otoriter ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran ibarat milimeter, dan centimeter. Sedangkan 1 inchi yakni sekitar 25,4 mm.
Ukuran point (pt) sering dipakai dalam media cetak offline ibarat Microsoft word dalam memilih ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya dalam CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}.
Ukuran pica (pc) mungkin tidak terlalu familiar. 1pc setara dengan 12pt. teladan penulisannya dalam CSS yakni p {font-size: 1.5pc;}.
Kelima nilai otoriter tersebut, selain pt tidak terlalu sering digunakan, sebab konversi dari ukuran dunia positif ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor sanggup jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam mendesain isyarat CSS yang �pas�.
Nilai Relatif
Berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag disekitarnya. CSS mendukung banyak nilai relatif, beberapa yang kita bahas adalah: pixel (px), Em-height (em), dan X-height (ex).
Ukuran pixel (px), merupakan ukuran yang paling sering dipakai dalam CSS. Di dalam CSS, pixel termasuk nilai relatif sebab ia tidak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.
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-kadang menyamakan 1ex dengan 0,5em.
Nilai Persentasi
Nilai persentasi yakni sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Misalkan kita menciptakan sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka kalau terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.
Dengan menciptakan nilai font lainnya menjadi persen, hal ini akan memudahkan kalau suatu dikala kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka secara eksklusif tag <em> akan menyesuaikan tampilannya.
Berikut yakni teladan perbandingan_fontsize.html, dimana aku menampilkan ukuran property font-size dengn banyak sekali value:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Perbandingan Ukuran dari font-size</title>
<style type="text/css">
body { font-size:14pt; }
p.satu { font-size:8mm; }
p.dua { font-size:0.35in; }
p.tiga { font-size:2.2pc; }
p.empat { font-size:20px; }
p.lima { font-size:1.8em }
p.enam { font-size:3ex; }
p.tujuh { font-size:190%; }
</style>
</head>
<body>
<p>Kalimat ini akan berukuran 14 point</p>
<p class="satu">Kalimat ini akan berukuran 8 milimeter</p>
<p class="dua">Kalimat ini akan berukuran 0,35 inchi</p>
<p class="tiga">Kalimat ini akan berukuran 2,2 pica</p>
<p class="empat">Kalimat ini akan berukuran 20 pixel</p>
<p class="lima">Kalimat ini akan berukuran 1,8 em</p>
<p class="enam">Kalimat ini akan berukuran 3 ex</p>
<p class="tujuh">Kalimat ini akan berukuran 190%</p>
</body>
</html>
Jika diperhatikan lagi, aku menciptakan sebuah selector body {font-size:14pt;} pada kepingan awal definisi CSS. Selector body akan menurunkan (inherit) ukuran font ini ke seluruh tag <p> yang berada di dalam tag <body>, namun pada masing-masing tag <p>, aku menambahkan property HTML �class�, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.
Khusus untuk class=lima, class=enam, dan class=tujuh, aku memakai nilai relatif em, ex, dan %, sehingga nilainya bergantung dengan nilai induknya (parent), yakni body {font-size:14pt;}. Cobalah mengubah ukuran font-size pada body ini, kemudian jalankan kembali perbandingan_fontsize.html, maka secara otomatis ketiga kalimat tersebut juga akan berubah ukurannya. Sumber http://informasigameindo11.blogspot.com
EmoticonEmoticon