CSS o‘lchov birliklari
CSS o‘lchov birliklari
CSS’da uzunlikni ifodalash uchun bir nechta turli o‘lchov birliklari mavjud.
Ko‘plab CSS xususiyatlari "uzunlik" (length) qiymatlarini qabul qiladi, masalan: width, margin, padding, font-size va hokazo.
Uzunlik — son va undan keyin keladigan uzunlik birligi, masalan: 10px, 2em va hokazo.
Misol
px (piksel) yordamida turli uzunlik qiymatlarini belgilang:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Eslatma: Son va birlik orasida bo‘sh joy bo‘lishi mumkin emas. Biroq qiymat 0 bo‘lsa, birlikni tushirib qoldirish mumkin.
Ba’zi CSS xususiyatlari uchun manfiy uzunliklarga ruxsat beriladi.
Uzunlik birliklarining ikki turi mavjud: absolyut va nisbiy.
Absolyut uzunliklar
Absolyut uzunlik birliklari qat’iy belgilangan bo‘lib, ularning istalgan biri bilan ifodalangan uzunlik aynan shu o‘lchamda ko‘rinadi.
Absolyut uzunlik birliklarini ekranda ishlatish tavsiya etilmaydi, chunki ekran o‘lchamlari juda xilma-xil. Biroq chiqarish vositasi ma’lum bo‘lsa, masalan, chop etish maketi uchun ulardan foydalanish mumkin.
| Birlik | Tavsif |
|---|---|
| cm | santimetr Sinab ko‘ring |
| mm | millimetr Sinab ko‘ring |
| in | dyuym (1in = 96px = 2.54cm) Sinab ko‘ring |
| px * | piksel (1px = 1in ning 1/96 qismi) Sinab ko‘ring |
| pt | punkt (1pt = 1in ning 1/72 qismi) Sinab ko‘ring |
| pc | pika (1pc = 12 pt) Sinab ko‘ring |
* Piksellar (px) ko‘rish qurilmasiga nisbatan olinadi. Past dpi’li qurilmalarda 1px displeyning bitta qurilma pikseliga (nuqtasiga) teng. Printerlar va yuqori aniqlikdagi ekranlarda 1px bir nechta qurilma pikselini anglatadi.
Nisbiy uzunliklar
Nisbiy uzunlik birliklari uzunlikni boshqa bir uzunlik xususiyatiga nisbatan belgilaydi. Nisbiy uzunlik birliklari turli ko‘rsatish vositalarida yaxshiroq masshtablanadi.
| Birlik | Tavsif | |
|---|---|---|
| em | Elementning font-size qiymatiga nisbatan (2em joriy shrift o‘lchamidan 2 baravar katta degani) | Sinab ko‘ring |
| ex | Joriy shriftning x-balandligiga nisbatan (kam ishlatiladi) | Sinab ko‘ring |
| ch | "0" (nol) belgisining kengligiga nisbatan | Sinab ko‘ring |
| rem | Ildiz (root) elementning font-size qiymatiga nisbatan | Sinab ko‘ring |
| vw | Viewport* kengligining 1% iga nisbatan | Sinab ko‘ring |
| vh | Viewport* balandligining 1% iga nisbatan | Sinab ko‘ring |
| vmin | Viewport*ning kichikroq o‘lchami 1% iga nisbatan | Sinab ko‘ring |
| vmax | Viewport*ning kattaroq o‘lchami 1% iga nisbatan | Sinab ko‘ring |
| % | Ota elementga nisbatan | Sinab ko‘ring |
Maslahat: em va rem birliklari mukammal masshtablanadigan maket yaratishda juda qulay!
* Viewport = brauzer oynasining o‘lchami. Agar viewport kengligi 50cm bo‘lsa, 1vw = 0.5cm.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar uzunlik birligini to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Uzunlik birligi | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!