Tutorial Belajar CSS Bagian 4 : Tabel Satuan Pengukuran di CSS

0
18

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 3 : Cara Menyisipkan Kode CSS di HTML, kali ini kita akan mempelajari satuan pengukuran di CSS.

Sebelum berlatih Menyusun kode CSS, ada baiknya kita mempelajari apa saja satuan pengukuran yang digunakan dalam CSS.

CSS mendukung sejumlah satuan pengukuran termasuk satuan absolut seperti inci, sentimeter, titik, dan seterusnya, serta ukuran relatif seperti persentase dan satuan em.

Anda membutuhkan nilai-nilai ini saat menentukan berbagai pengukuran dalam aturan style yang Anda buat, misalnya satuan pixel (px) untuk class . border = “1px merah solid”.

Pada tabel di bawah ini, saya telah membuat daftar semua Unit pengukuran CSS bersama dengan contoh yang tepat :

UnitDeskripsiContoh
%Mendefinisikan pengukuran dalam persentase relatif terhadap nilai lain, biasanya digunakan pada elemen penutup.p {font-size: 16pt; line-height: 125%;}
cmMendefinisikan ukuran dalam sentimeter.div {margin-bottom: 2cm;}
emSebuah pengukuran relatif untuk tinggi font dalam em. Karena unit em setara dengan ukuran font tertentu, jika Anda menetapkan font ke 12pt, setiap unit “em” akan menjadi 12pt; dengan demikian, 2em akan menjadi 24pt.p {letter-spacing: 7em;}
exNilai ini mendefinisikan pengukuran relatif terhadap tinggi-x font. Tinggi x ditentukan oleh tinggi huruf kecil font x.p {font-size: 24pt; line-height: 3ex;}
inMendefinisikan pengukuran dalam inci.p {letter-spacing: .15in;}
mmMendefinisikan ukuran dalam milimeter.p {letter-spacing: 15mm;}
pcMendefinisikan pengukuran dalam picas. Pica setara dengan 12 poin; jadi, ada 6 picas per inci.p {font-size: 20pc;}
ptMendefinisikan pengukuran dalam poin. 1 point didefinisikan sebagai 1/72 inci.body{font-size: 18pt;}
pxMendefinisikan pengukuran dalam piksel layar.p {padding: 25px;}

Semoga tutorial ini membantu Anda mempelajari jenis satuan pengukuran di CSS yang digunakan untuk menentukan ukuran desain sebuah dokumen HTML.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.