Mavzu: css rang berish usullari, chegara, orqa fon, shrift, margin va padding xususiyatlari. Box model tushunchasi. Box model qoidalari. (2 soat)

Mavzu: CSS rang berish usullari, chegara, orqa fon, shrift, margin va padding xususiyatlari. Box model tushunchasi. Box model qoidalari. (2 soat)
CSS da men biladigan 3 xil rang berish turi mavjud bo’lib birinchisi bu: color: ‘rangning ingliz tilidagi nomi’; sturucturasi orqali. Ikkinchisi esa color: rgb(a, b, c); bo’lib a, b, c lar bu 0 dan 255 gacha bo’lgan butun sonlar bo’lishi mumkin. Biz bu uslublar orqali rang palitralarini yaratamiz. Bu yerda a=qizil, b=yashil, c=ko’k ranglari hisoblanadi. Uchinchisi bu #(16 lik sanoq sistemasidagi 3 ta son qo’shib yoziladi)

Endi biz bu rang berish usullaridan foydalanib o’zimizga kerakli joyda rang berishimiz mumkin.

Masalan matn ranglari (color), orqa fon ranglari(background-color), tugma yoki box yaratilganda unung chegarasi rangi(border), tugma rangi va hakazo.
Box model tushunchasi
Ko'rsatilishi mumkin bo'lgan har bir element bir yoki bir nechta to'rtburchaklar qutilardan iborat. Odatda CSS qutisi modeli ushbu to'rtburchaklar qutilar veb-sahifada qanday joylashtirilganligini tavsiflaydi. Ushbu qutilar turli xil xususiyatlarga ega va bir-birlari bilan har xil yo'llar bilan o'zaro aloqada bo'lishlari mumkin, ammo har bir qutida tarkibiy maydon va ixtiyoriy atrofdagi to'ldirish, chegara mavjud.
Quyidagi diagramma to'ldirish, chegara CSS xususiyatlari veb-sahifada element qancha joy egallashini aniqlaydi.

Quyida box yaratishga misol keltirilgan:

CSS margin

CSS margin xususiyatlari bu elementlar atrofidagi joyni umumlashtirish. Margin xususiyatlari chegara tashqarisidagi oq b''sh joy o'lchamini o'rnatish. Bu elementni 80px (piksel) cheti (margin) bor.
CSS margin xususiyatlari chegara tashqarisidagi oq bo'sh joy 'lchamini belgilaydi.
... Marginlar butunlay transparent(shaffof) - orqa fon rangi yo'q.
CSS bilan, siz marginlarni to'liq ravishda nazorat qilishingiz mumkun.
Bu yerda elementning har bir tarafidan (yuqori, o'ng, past, va chap) margin o'rnatish uchun CSS xususiyatlari