Unit Pengukuran CSS

CSS Basic – Unit Pengukuran

Banyak hal yang terdapat di sebuah CSS yang bisa kamu pelajari untuk mengkolaborasi dengan HTML. Salah satu disini kamu akan belajar tentang sebuah unit pengukuran (Measurement Units) didalam CSS.

Sebelum kamu memulai latihan sebenarnya, Bier Pinter ingin memberikan gambaran singkat tentang Unit Pengukuran CSS.

CSS Mendukung sejumlah pengukuran termasuk unit absolut seperti inci, sentimeter, titik, dan sebagainya, serta ukuran relatif seperti presentase dan unit em. Kamu perlu mengenal dan menguasai nilai-nilai ini sambil menentukan berbagai ukuran dalam aturan style Kamu. Misalnya:¬†border = “3 px solid black”.

Unit Pengukuran CSS

Kami telah mencantumkan semua unit pengukuran CSS beserta contoh yang tepat kedalam table dibawah ini.

SatuanDeskripsiContoh
%Mendefinisikan pengukuran sebagai persentase relatif terhadap nilai lain, biasanya merupakan elemen terlampir.p {font-size: 16pt; line-height: 125%;}
cmMendefinisikan pengukuran dalam sentimeter.div {margin-bottom: 2cm;}
emPengukuran relatif untuk tinggi font di ruang em. Karena unit em setara dengan ukuran font yang diberikan, jika Anda menetapkan font ke 12pt, masing-masing unit "em" akan menjadi 12pt; Dengan demikian, 2em akan berumur 24pt.p {letter-spacing: 7em;}
exNilai ini mendefinisikan pengukuran yang relatif terhadap tinggi x huruf. Tinggi x ditentukan oleh tinggi huruf kecil huruf x.p {font-size: 24pt; line-height: 3ex;}
inMendefinisikan sebuah pengukuran dalam inci.p {word-spacing: .15in;}
mmMendefinisikan pengukuran dalam milimeter.p {word-spacing: 15mm;}
pcMendefinisikan sebuah pengukuran di picas. Pica setara dengan 12 poin; Dengan demikian, ada 6 picas per inci.p {font-size: 20pc;}
ptMendefinisikan pengukuran dalam poin. Sebuah titik didefinisikan sebagai 1 / 72nd inci.body {font-size: 18pt;}
pxMendefinisikan sebuah pengukuran pada piksel layar.p {padding: 25px;}
vh1% ketinggian viewport.h2 { font-size: 3.0vh; }
vw1% lebar viewporth1 { font-size: 5.9vw; }
vmin1vw atau 1vh, mana yang lebih kecilp { font-size: 2vmin;}

Inilah materi CSS Basic – Unit Pengukuran (Measurement Units) yang akan kamu pakai dalam mengatur style CSS. Ikuti terus materi dasar CSS yang setiap minggunya kami update.

Materi sebelumnya: CSS Basic – Inklusi

Tinggalkan Balasan