CSS-da uzunlikni ifodalash uchun bir nechta turli birliklar mavjud. Uzunlikdan tashqari, margin, padding, height, font-size kabi o’lchov birliklari orqali ifodalanigan kattaliklar ham mavjud.
Shu paytgacha biz foiz (%) hamda piksel(px)dan foydalandik. Bulardan tashqari ham bir qancha uzunlik birliklari mavjud.
Units. Birliklar
Uzunlik birliklarining ikki turi mavjud: mutlaq va nisbiy.
Mutlaq uzunlik birliklari belgilangan va ularning har birida ifodalangan uzunlik aynan shu o'lchamda ko'rinadi.
Mutlaq uzunlik birliklari ekranda foydalanish uchun tavsiya etilmaydi, chunki ekran o'lchamlari juda farq qiladi. Biroq, ular chiqish muhiti ma'lum bo'lsa, masalan, chop etish tartibi uchun ishlatilishi mumkin.
* Piksellar (px) ko'rish qurilmasiga nisbatan. Past dpi qurilmalar uchun 1px displeyning bitta qurilma pikseli (nuqtasi) hisoblanadi. Printerlar va yuqori aniqlikdagi ekranlar uchun 1px bir nechta qurilma piksellarini bildiradi.
Units. Birliklar
Nisbiy uzunlik birliklari boshqa uzunlik xususiyatiga nisbatan uzunlikni belgilaydi. Nisbatan uzunlik birliklari turli ko'rsatish muhitlari o'rtasida yaxshiroq o'lchaydi.
Units. Birliklar
Units. Birliklar
em - Elementning shrift o'lchamiga nisbatan (2em joriy shrift hajmidan 2 baravar kattaligini bildiradi).
ex-Joriy shriftning x balandligiga nisbatan (kamdan-kam ishlatiladi)
rem-Ildiz elementining shrift o'lchamiga nisbatan
vw-Ko'rish oynasi kengligining 1% ga nisbatan*
vh-Ko'rish oynasi balandligining 1% ga nisbatan*
vmin-Ko'rish oynasi* kichikroq o'lchamining 1% ga nisbatan
vmax-Ko'rish oynasi* kattaroq o'lchamining 1% ga nisbatan
%-Asosiy elementga nisbatan
Units. Birliklar
Vmin, vmax-Masalan, bizning ko'rish oynamiz kengligi 1440px va balandligi 800px, deylik, agar biz elementni 50vmin kengligida qilib qo'ysak, u balandlikning 50% (400px) bo'ladi va agar uning o'rniga elementni kenglikka o'rnatsak. 50vmax bo'lsa, u kenglikning 50% (720px) bo'ladi. Agar ko'rish oynasi o'rniga 800px kengligi va 1440px balandligi bo'lsa, biz mutlaqo teskari natijaga erishgan bo'lardik.Ikklasadina birini tanlab kichigi bolsa vmin, kattasi bolsa vmax boyicha oladi.
Specifity. O'ziga xoslik.
Agar bir xil elementga ishora qiluvchi ikki yoki undan ortiq CSS qoidalari mavjud bo'lsa, eng yuqori o'ziga xoslik qiymatiga ega bo'lgan selektor "yutadi" va uning uslub deklaratsiyasi ushbu HTML elementiga qo'llaniladi.
O'ziga xoslikni qaysi uslub deklaratsiyasi oxir-oqibat elementga qo'llanilishini aniqlaydigan ball/darajali ko'rsatkich sifatida tasavvur qiling. Quyidagi misollarni ko'rib chiqing:
Specifity. O'ziga xoslik.
Specifity. O'ziga xoslik.
Har bir CSS selektori o'ziga xoslik ierarxiyasida o'z o'rniga ega. Selektorning o'ziga xoslik darajasini belgilaydigan to'rtta toifa mavjud:
Elements and pseudo-elements - Example: h1, :before
Specifity. O'ziga xoslik.
0 dan boshlang, har bir identifikator qiymati uchun 100 qo'shing, har bir sinf qiymati uchun 10 qo'shing (yoki psevdo-sinf yoki atribut selektori), har bir element selektori yoki psevdoelement uchun 1 qo'shing.
Eslatma: Inline uslubi 1000 o'ziga xoslik qiymatini oladi va har doim eng yuqori ustuvorlikka ega!
Eslatma 2: Bu qoidadan bitta istisno bor: agar siz !important qoidasidan foydalansangiz, u hatto inline uslublarni ham bekor qiladi!
Specifity. O'ziga xoslik.
Specifity. O'ziga xoslik.
Important.
CSS-dagi !important qoidasi xususiyat/qiymatga odatdagidan ko'proq ahamiyat berish uchun ishlatiladi.
Haqiqatan ham, agar siz !important qoidasidan foydalansangiz, u ushbu elementdagi o'ziga xos xususiyat uchun oldingi barcha uslublar qoidalarini bekor qiladi!
Math functions.
CSS matematik funktsiyalari matematik ifodalarni xususiyat qiymatlari sifatida ishlatishga imkon beradi. Bu yerda biz calc(), max() va min() funksiyalarini tushuntiramiz.
calc() funksiyasi xususiyat qiymati sifatida foydalanish uchun hisob-kitobni amalga oshiradi.
Max() funktsiyasi xususiyat qiymati sifatida vergul bilan ajratilgan qiymatlar ro'yxatidagi eng katta qiymatdan foydalanadi.
min() funktsiyasi xususiyat qiymati sifatida vergul bilan ajratilgan qiymatlar ro'yxatidagi eng kichik qiymatdan foydalanadi.
Math functions.
Tooltips
Ko'pincha foydalanuvchi sichqonchani ko'rsatgichni element ustida harakatlantirganda biror narsa haqida qo'shimcha ma'lumotni ko'rsatish uchun asboblar maslahati ishlatiladi:
