Ketika membeli cabe di pasar maka digunakan standarnya kilogram. Kilogram tersebut disebut dengan satuan. Dalam CSS satuan dalam pengukuran juga ada. Mereka dikenal dengan isitlah pixel, em, point, in, pc dan pt. Penjelasan masing masing satuan dalam CSS bisa dibaca di bawah ini.
Dalam hal ini ada 5 satuan yang tidak diwariskan yaitu:
Karena tampilan sebuah web di desaign tampil untuk monitor. Terkadang untuk monitor satu dengan yang lain maka satuan jenis seperti cm dan mm jrang digunakan. Sebab 1 cm pada sebuah moitor bisa berbeda besarnya (dalam tampilan akhir) dengan monitor lainnya.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Perbandingan Ukuran dalam CSS</title>
<style type="text/css">
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%; }
p.delapan{ font-size:14pt; }
</style>
</head>
<body>
<p class="satu">INI CONTOH FONT berukuran 8 milimeter</p>
<p class="dua">INI CONTOH FONT berukuran 0,35 inchi</p>
<p class="tiga">INI CONTOH FONT berukuran 2,2 pica</p>
<p class="empat">INI CONTOH FONT berukuran 20 pixel</p>
<p class="lima">INI CONTOH FONT berukuran 1,8 em</p>
<p class="enam">INI CONTOH FONT berukuran 3 ex</p>
<p class="tujuh">INI CONTOH FONT berukuran 190%</p>
<p class="tujuh">INI CONTOH FONT berukuran 14pt</p>
</body>
</body>
</html>
Sekarang anda bisa melihat bagaimana perbandingan ukuran masing masing. Dalam mendesain website yang paling banyak digunakan adalah dengan % dan dengan menggunakan satuan pixel.
Satuan yang tidak dipengaruhi Induk tag (non-inheritance)
Satuan jenis ini tidak dipengaruhi oleh induknya. Dengan kata lain ketika di defenisikan pada tag induk, tidak akan diwariskan pada anaknya. Mengenai sifat pewarisan tag (inheritance) bisa dibaca pada artikel terkait : Pewarisan Kode CSS / Inheritance dalam CSS.Dalam hal ini ada 5 satuan yang tidak diwariskan yaitu:
- pt , singkatan dari point. sebagai pembanding, 1 inchi = 72 point.
- pc, singkatan ari pica. Jenis ini agak jarang digunakan, sebagai pembanding 1pc=12pt =1/6 inchi
- cm singkatan centimeter
- mm singkatan milimeter
- in sngkatan dari inchi (*untuk perbandinganlihat contoh nanti)
Karena tampilan sebuah web di desaign tampil untuk monitor. Terkadang untuk monitor satu dengan yang lain maka satuan jenis seperti cm dan mm jrang digunakan. Sebab 1 cm pada sebuah moitor bisa berbeda besarnya (dalam tampilan akhir) dengan monitor lainnya.
Satuan yang dipengaruhi tag Sekitar
Satuan jenis ini disebut satuan relatif. Dalam CSS terdapat banyak satuan ini, di antaranya pixel, em-height dan ex-height. Satuan ini akan menyesuaikan perbandingan antara sebuah monitor dengan monitor lain yang berbeda. Sehingga satuan ini banyak digunakan sebab bersifat lebih fleksibel terhadap monitor pengunjung web nantinya.
- px - singkatan pixel nilai 1 pixel mendekati 0,26 mm atau 1/96 inch.
- em- singkatan dari em-height
- ex - singkatan dari x height (*untuk perbandinganlihat contoh nanti)
Satuan dalam Persen
Cara lain untuk menyatakan satuan adalah dengan persen. contoh ditemukan value : font-size : 120%. Keuntungan menggunakan persen ini adalah ketika melakukan perubahan pada tampilan web, secara otomatis besar huruf atau property lain yang diberi value dalam % otomatis akan menyesuaikan. Sebagai contoh perbandingan besar satuan satuan di atas bisa dijalankan kode dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Perbandingan Ukuran dalam CSS</title>
<style type="text/css">
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%; }
p.delapan{ font-size:14pt; }
</style>
</head>
<body>
<p class="satu">INI CONTOH FONT berukuran 8 milimeter</p>
<p class="dua">INI CONTOH FONT berukuran 0,35 inchi</p>
<p class="tiga">INI CONTOH FONT berukuran 2,2 pica</p>
<p class="empat">INI CONTOH FONT berukuran 20 pixel</p>
<p class="lima">INI CONTOH FONT berukuran 1,8 em</p>
<p class="enam">INI CONTOH FONT berukuran 3 ex</p>
<p class="tujuh">INI CONTOH FONT berukuran 190%</p>
<p class="tujuh">INI CONTOH FONT berukuran 14pt</p>
</body>
</body>
</html>
Sekarang anda bisa melihat bagaimana perbandingan ukuran masing masing. Dalam mendesain website yang paling banyak digunakan adalah dengan % dan dengan menggunakan satuan pixel.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment