Blog Request tutorial? klik disini!

  • Mengenal Satuan Nilai Atau Value Dalam CSS

    Ditulis oleh: Billiyam
    633 kali dibaca
    02 Jul / 2014 16:12

    Mengenal Satuan Nilai(Value) dalam CSS. Dalam merancang halaman web  membutuhkan fleksibilitas dalam menentukan nilai atau value tertentu untuk suatu properti, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt.

    Nilai Absolut

    Nilai absolutadalah sebuah nilai di dalam CSS, dimana nilai tersebut tidak dipengaruhi kondisi tag induknya (parent), dan didasarkan pada ukuran sebenarnya di media printing. Di dalam CSS, nilai absolut ini adalah: milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc). Kelima nilai absolut ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran seperti milimeter, dan centimeter. Sedangkan 1 inchi adalah sekitar 25,4 mm. Ukuran point (pt) sering digunakan dalam media cetak offline seperti Microsoft word dalam menentukan 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. contoh penulisannya dalam CSS adalah p {font-size: 1.5pc;}. Kelima nilai absolut tersebut, selain pt tidak terlalu sering digunakan, karena konversi dari ukuran dunia nyata ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor bisa jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam mendesain kode 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 digunakan dalam CSS. Di dalam CSS, pixel termasuk nilai relatif karena 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 kala menyamakan 1ex dengan 0,5em.

    Nilai Persentasi

    Nilai persentasiadalah 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. Dengan membuat nilai font lainnya menjadi persen, hal ini akan memudahkan jika suatu saat kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka secara langsung tag <em> akan menyesuaikan tampilannya.

     

    See the Pen iszIB by Dumet_School (@dumet_school) on CodePen.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155