CSS: sahifalarni bezashni o'rganing
HTML skeletni yasaydi, CSS unga tus beradi: rang, shrift, joylashuv, animatsiya. CSS yozasiz va natijani jonli oynada darrov ko'rasiz. Selektordan Flexbox va Grid'gacha.
Vazifa: Quti burchaklarini yumaloq qiling
Xush kelibsiz! CSS (Cascading Style Sheets), bu veb sahifalarni bezash tili. Agar HTML sahifada nima borligini aytsa, CSS uning qanday ko'rinishini aytadi: rang, o'lcham, joylashuv, bo'shliq. Bu kursda har tushunchani ko'z bilan ko'rasiz va o'zingiz sinab ko'rasiz. Boshlaymiz.
CSS bilan tanishuv
CSS nima va nega kerak
Faqat HTML bilan yozilgan sahifa qora matn va oddiy ko'rinishda bo'ladi. CSS o'sha sahifaga rang, chiroyli shrift va joylashuv qo'shadi. Quyida chap tomonda CSS kodi, o'ng tomonda natija. color qiymatini o'zgartiring va sarlavha rangi darrov almashishini ko'ring.
h1) rang bering: style.css'da color: #2f6bed; yozing. Natijani o'ng oynada darrov ko'rasiz.Nima borligini aytadi: sarlavha, matn, rasm. Bezaksiz, oddiy ko'rinishda.
Qanday ko'rinishini aytadi: rang, o'lcham, joylashuv. Sahifani jonlantiradi.
CSS'ni ulashning 3 usuli
CSS'ni HTML sahifaga uch xil yo'l bilan qo'shish mumkin. Eng yaxshisi 3-usul: alohida .css fayl. Chunki bitta fayl butun saytga ishlaydi va kod toza turadi. Aynan shu kursning muharriri ham shunday: style.css tabida CSS yozasiz.
p) shrift o'lchamini bering: font-size: 20px; yozing. Tashqi CSS qanday ishlashini o'zingiz sinang.style.css) ishlatiladi. Inline usul faqat kichik, bir martalik holatlar uchun.Sintaksis: selektor, xossa, qiymat
Har bir CSS qoidasi bir xil tuzilishga ega. Avval selektor (kimni bezaymiz), so'ng jingalak qavs ichida xossa: qiymat juftliklari. Har juftlik oxirida nuqta-vergul (;) qo'yiladi.
selektor { xossa: qiymat; } = CSS qoidasining asosiy shaklih1) rang bering (color) va paragrafni (p) kattaroq qiling (font-size: 18px yoki undan katta).Mashqlar
Endi mustaqil sinab ko'ring. Har bir mashqda style.css ga bitta CSS qoidasi yozing. To'g'ri bo'lsa doira yashil belgi bilan tasdiqlanadi.
1-modul testi
Modulni yakunlash uchun kamida 4/5 to'g'ri javob bering.
Selektorlar va aniqlik
Element, class va id selektorlari
Selektor CSS'ga qaysi elementni bezashni aytadi. Uchta asosiy tur bor: element nomi bo'yicha (belgisiz), class bo'yicha (nuqta . bilan) va id bo'yicha (panjara # bilan). class bir nechta elementga berilishi mumkin, id esa sahifada faqat bitta bo'lishi kerak.
.class (nuqta), #id (panjara).sarlavha matnini ko'k qiling: .sarlavha { color: #2f6bed; }. Ikkala .sarlavha element ham bir vaqtda o'zgaradi.Kombinatorlar: guruhlash, avlod, farzand, qardosh
Selektorlarni birlashtirib aniqroq nishonga olish mumkin. Masalan, faqat biror element ichidagi elementni tanlash uchun avlod selektori (bo'sh joy) ishlatiladi.
.quti ichidagi paragrafni ko'k qiling. Buning uchun avlod selektoridan foydalaning: .quti p. Tashqaridagi paragrafga tegmasligi kerak.Pseudo-klasslar: holat va tartib
Pseudo-klass elementning holatini yoki tartibini nishonga oladi. Ular ikki nuqta (:) bilan yoziladi. Eng ko'p ishlatiladiganlari:
li:first-child { font-weight: bold; }.:hover holati ishga tushadi.Pseudo-elementlar: ::before va ::after
Pseudo-element yordamida elementning oldiga yoki keyiniga qo'shimcha bo'lak qo'shish mumkin: ::before (oldiga) va ::after (keyiniga). Ular ikki juft nuqta (::) bilan yoziladi va content xossasini talab qiladi.
::before element oldiga, ::after keyiniga bo'lak qo'shadi::before va content ishlating, masalan: content: "Salom, ".Aniqlik (specificity), cascade va meros
Ba'zan bir elementga bir nechta qoida to'g'ri keladi. Qaysi biri g'olib bo'ladi? Buni aniqlik (specificity) hal qiladi: id selektor class'dan kuchli, class esa element'dan kuchli. Inline stil (style="") hammadan kuchli.
#maxsus ni ko'k qiling: #maxsus { color: #2f6bed; }. U element va class'dan ham ustun keladi.Aniqlik teng bo'lsa, faylda pastroqda (oxirgi) turgan qoida g'olib bo'ladi.
Ba'zi xossalar (color, font) ota-elementdan bolalarga o'tadi. Border, padding esa o'tmaydi.
!important hamma qoidani majburan bekor qiladi. Undan imkon qadar kam foydalaning, chunki keyin tuzatish qiyinlashadi.Mashqlar
Selektorlarni mustaqil sinab ko'ring. Har bir mashqda to'g'ri selektor tanlang va CSS yozing.
2-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Ranglar va fon
Rang formatlari va shaffoflik
CSS'da rangni bir necha usulda yozish mumkin. Ekran ranglari qizil, yashil va ko'k nurlarning aralashmasidan hosil bo'ladi (RGB). Quyidagi formatlar bir xil natija berishi mumkin, faqat yozilishi farq qiladi.
.p2 { color: #2f6bed; }. Hex, bu # bilan boshlanadigan olti xonali rang kodi.rgba va hsla dagi oxirgi son (0 dan 1 gacha) shaffoflikni bildiradi. 1 = to'liq, 0 = ko'rinmas.background-color va background-image
color matn rangini bezasa, background-color elementning orqa fonini bo'yaydi. Fon o'rniga rasm qo'yish uchun background-image ishlatiladi.
.quti) biror fon rangi bering. background yoki background-color ishlating (masalan: background: #2f6bed).Fon o'lchami va joylashuvi
Fon rasmini qutiga qanday joylashtirishni sozlash mumkin: background-size (o'lcham), background-position (joylashuv), background-repeat (takrorlash). Ikki muhim o'lcham:
Rasm butun qutini to'ldiradi. Kerak bo'lsa chetlari kesiladi. Bo'sh joy qolmaydi.
Butun rasm ichkariga sig'adi. Kesilmaydi, lekin atrofda bo'sh joy qolishi mumkin.
.contain ga background-size: contain; bering. cover bilan farqini ko'ring.background-repeat: no-repeat rasmni takrorlanishdan to'xtatadi. Bu misol rasmi internetdan yuklanadi.Gradientlar: silliq rang o'tishlari
Gradient ikki yoki undan ortiq rang orasidagi silliq o'tishdir. U rasm hisoblanadi, shuning uchun background ga beriladi. Uch asosiy turi bor:
.g3) o'zingiz gradient fon bering. Masalan: background: linear-gradient(to right, #16a34a, #22c55e).conic-gradient ranglarni doira bo'ylab aylantiradi, diagramma va soatlar uchun qulay.background shorthand va ko'p qatlam
background qisqartma barcha fon sozlamalarini bir qatorda yozish imkonini beradi. Bundan tashqari vergul bilan ajratib bir nechta fon qatlamini ustma-ust qo'yish mumkin. Yuqorida yozilgani ustki qatlam bo'ladi.
.karta) gradient fon bering: background: linear-gradient(120deg, #2f6bed, #1d4ed8);. Ikki rang bir-biriga silliq o'tadi.Rang, rasm, o'lcham, joylashuvni bitta qatorda yozadi. Kodni qisqartiradi.
Vergul bilan ajratilgan qatlamlar. Masalan, rasm ustiga yarim-shaffof gradient qoplama.
Mashqlar
Ranglar va fonni mustaqil sinab ko'ring. Turli rang formatlari va gradientdan foydalaning.
3-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Matn va tipografika
font-family: shrift oilalari
font-family matn qaysi shrift bilan yozilishini belgilaydi. Shriftlar uch katta oilaga bo'linadi, har biri o'z ko'rinishi va vazifasiga ega.
.mono) teng enli shrift bering: font-family: 'Courier New', monospace;. Harflar bir xil kenglikda bo'ladi.serif yoki sans-serif) yozing.font-size va o'lchov birliklari
font-size matn kattaligini belgilaydi. Bir necha birlik bor: px aniq piksel, em ota element shriftiga nisbatan, rem ildiz (html) shriftiga nisbatan, % ham nisbiy.
.matn) font-size ni 20px yoki kattaroq qiling.Qalinlik, kursiv va qator oralig'i
font-weight qalinlikni beradi (normal/bold yoki 100 dan 900 gacha), font-style: italic matnni kursiv qiladi, line-height esa qatorlar orasidagi masofani boshqaradi.
.b) qalin qiling: font-weight: bold;.line-height: 1.6 kabi birliksiz son shrift o'lchamiga ko'paytiriladi va o'qishga eng qulay natija beradi.Matnni hizalash va bezash
Matnni turli usulda bezash mumkin: text-align hizalash (chap/markaz/o'ng/tekis), text-decoration tag chiziq, text-transform katta yoki kichik harf, letter-spacing harflar oralig'i.
h2) markazga hizalang: text-align: center.text-shadow va veb-shriftlar
text-shadow matnga soya beradi: gorizontal vertikal xiralik rang tartibida yoziladi. Bundan tashqari Google Fonts kabi xizmatlardan tayyor shriftlarni sahifaga ulash mumkin.
.soya) matn soyasi bering: text-shadow: 2px 2px 0 #bcd0f7;.Soya matnni ko'zga ko'rinarli va hajmli qiladi. Bir nechta soyani vergul bilan ham berish mumkin.
Tayyor shriftlar sahifa ko'rinishini o'ziga xos qiladi. Tizim shriftlaridan tashqari xohlagan shriftni ulaysiz.
Mashqlar
Matn va tipografikani mustaqil sinab ko'ring. O'lcham, qalinlik va hizalashni o'zgartiring.
4-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Box Model
Box Model: har element bir quti
CSS'da har bir element to'rt qatlamli qutiga o'xshaydi. Ichkaridan tashqariga: content (matn), padding (ichki bo'shliq), border (chegara) va margin (tashqi bo'shliq). Shu tuzilishni tushunish joylashuvning asosidir.
.quti) chegara bering: border: 3px solid #2f6bed;. Bu quti modelining tashqi chizig'i.padding qutining ichida, margin esa qutining tashqarisida bo'shliq ochadi. Ko'p chalkashlik shu ikkisini adashtirishdan chiqadi.padding: ichki bo'shliq
padding matn (content) bilan chegara (border) orasidagi bo'shliqni ochadi. Uni bir yoki bir necha qiymat bilan berish mumkin.
.quti) 16px yoki kattaroq padding bering.border va border-radius
border qutiga chegara chizadi va uch qismdan iborat: qalinlik uslub rang. border-radius esa burchaklarni yumaloqlaydi.
.b) yumaloq burchak bering: border-radius: 14px;.solid (to'liq), dashed (punktir), dotted (nuqtali). Chegara bo'lmasa none yoziladi.margin va markazlashtirish
margin qutining tashqarisida, elementlar orasida bo'shliq ochadi. Eng foydali usuli: kenglik berilgan blokni margin: 0 auto bilan gorizontal markazga qo'yish.
.quti) gorizontal markazga qo'ying: margin: 0 auto.box-sizing: qutini o'lchash usuli
Odatiy holda width faqat content'ni o'lchaydi, padding va border esa qo'shimcha eni bo'lib qo'shiladi (content-box). border-box esa padding va border'ni width ichiga oladi, shuning uchun o'lcham aniq qoladi.
.cb) box-sizing: content-box; bering. Unda chegara va padding kenglikning tashqarisiga qo'shiladi (jami eni 228px). .bb esa border-box bilan aniq 180px.Jami eni = 180 + padding + border. Ya'ni haqiqiy eni siz yozgandan kattaroq chiqadi. Bu chalkashlik keltiradi.
Padding va border width ichida hisoblanadi, o'lcham aniq qoladi. Shuning uchun ko'p loyihalar buni standart qiladi.
Mashqlar
Box model'ni mustaqil sinab ko'ring. Padding, chegara va yumaloq burchaklarni o'zgartiring.
5-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Display va joylashuv
display: elementlar qanday joylashadi
display element sahifada qanday oqishini belgilaydi. block yangi qatordan boshlanib to'liq enni egallaydi, inline matn kabi yonma-yon joylashadi, inline-block ikkalasini birlashtiradi, none esa elementni butunlay yashiradi.
.tag) yonma-yon joylang: display: inline-block;. Span'lar bir qatorda turadi va o'lcham oladi.display: none elementni joyi bilan yo'q qiladi, visibility: hidden esa yashiradi-yu joyini saqlab qoladi.position: joylashuv turlari
position elementni qayerda turishini boshqaradi. static odatiy holat, relative o'z joyidan siljitadi, absolute oqimdan chiqarib eng yaqin joylashtirilgan ota'ga nisbatan qo'yadi, fixed ekranga mahkamlaydi.
.bola) position: absolute qilib, ota qutining burchagiga qo'ying.top/left va z-index
Joylashtirilgan elementni top, right, bottom, left bilan suriladi. Elementlar bir-birining ustiga tushganda z-index qaysi biri tepada turishini belgilaydi (katta son = tepada).
.q1) eng ustga chiqaring: z-index: 5;. Kattaroq z-index ustunroq turadi.z-index faqat position berilgan (static'dan boshqa) elementlarda ishlaydi.float va clear
float elementni chap yoki o'ng tomonga suzdiradi, matn esa uning atrofidan oqadi. Ilgari butun sahifa joylashuvi shu bilan qurilardi. clear esa suzuvchi elementdan keyingi elementni pastga tushiradi.
.rasm) float: left qiling, matn uning o'ng tomonidan oqsin.overflow: ortiqcha kontent
Kontent konteynerga sig'masa, overflow nima bo'lishini boshqaradi: ko'rinib toshsinmi, kesilsinmi yoki scroll paydo bo'lsinmi.
.quti) overflow: auto; bering. Sig'magan matn scroll bilan ko'rinadi.Konteynerdan tashqariga chiqqan qism ko'rinmaydi. Rasm yoki kartalar burchagini toza saqlashda foydali.
Kontent sig'sa oddiy, sig'masa scroll paydo bo'ladi. Uzun ro'yxatlar uchun eng qulay tanlov.
Mashqlar
Joylashuvni mustaqil sinab ko'ring. display, position va overflow'ni o'zgartiring.
6-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Flexbox
Flexbox: moslashuvchan joylashuv
Flexbox elementlarni bir qator (yoki ustun) bo'ylab oson joylashtiradi. display: flex qo'ygan element konteyner bo'ladi, uning bevosita bolalari esa flex item. Ikki o'q bor: asosiy o'q (main) va ko'ndalang o'q (cross).
.qator ga display: flex; bering. Flex konteyner farzandlarini bir qatorga tizadi.display: flex faqat bevosita bolalarga ta'sir qiladi, nabiralarga emas. Flexbox zamonaviy joylashuvning asosidir.flex-direction: yo'nalish
flex-direction asosiy o'q yo'nalishini belgilaydi: itemlar qatorda (gorizontal) yoki ustunda (vertikal) joylashadimi.
.qator ni tik ustunga aylantiring: flex-direction: column;. Endi qutilar ustma-ust tiziladi.column da asosiy o'q vertikal bo'ladi.justify-content: asosiy o'q
justify-content itemlarni asosiy o'q bo'ylab taqsimlaydi (row'da gorizontal). Bo'sh joyni qanday bo'lishishini boshqaradi.
justify-content: center.align-items: ko'ndalang o'q
align-items itemlarni ko'ndalang o'q bo'ylab tekislaydi (row'da vertikal). justify-content bilan birga ishlatib, har qanday elementni markazga qo'yish mumkin.
align-items: center.flex-wrap, gap va flex
Itemlar sig'masa flex-wrap: wrap ularni keyingi qatorga tushiradi. gap itemlar orasiga bo'shliq qo'yadi. Item'ning o'ziga berilgan flex: 1 esa bo'sh joyni to'ldirib cho'zilishini bildiradi.
.katta) bo'sh joyni to'ldirib cho'zilsin: flex: 1;.margin o'rniga gap ishlatilsa, faqat itemlar orasiga bo'shliq tushadi, chetlarga emas. Toza va oson.
Bir necha itemga flex: 1 berilsa, ular qolgan joyni teng bo'lishib oladi. Moslashuvchan panellar uchun ideal.
Mashqlar
Flexbox'ni mustaqil sinab ko'ring. display, yo'nalish va tekislashni o'zgartiring.
7-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
CSS Grid
Grid: ikki o'lchamli joylashuv
Flexbox bir o'lchamli (qator yoki ustun) bo'lsa, Grid ikki o'lchamli: qatorlar va ustunlarni bir vaqtda boshqaradi. display: grid qo'yilgan element grid konteyner bo'ladi, grid-template-columns esa ustunlar tuzilishini belgilaydi.
.panjara ga 3 teng ustun bering: grid-template-columns: 1fr 1fr 1fr;. fr bo'sh joyni teng ulushlarga bo'ladi.grid-template-columns va fr
Ustunlar sonini va kengligini grid-template-columns belgilaydi. fr birligi mavjud bo'sh joyning ulushini bildiradi: 1fr 1fr ikki teng ustun, 2fr 1fr esa birinchisi ikki barobar keng.
display: grid qilib, grid-template-columns bilan 3 ta teng ustun yarating.gap va repeat()
gap katakchalar orasiga bo'shliq qo'yadi (grid'da ham, flex'da ham ishlaydi). repeat() esa takrorlanuvchi ustunlarni qisqa yozadi: repeat(3, 1fr) = 1fr 1fr 1fr.
.panjara ga gap: 12px;.repeat(auto-fit, minmax(120px, 1fr)) ekran kengligiga qarab ustunlar sonini avtomatik moslaydi (responsive galereya).grid-column va grid-row: cho'zish
Item'ni bir necha ustun yoki qatorga cho'zish mumkin. grid-column: span 2 item'ni 2 ustun kengligida qiladi. Chiziqlar bilan ham berish mumkin: grid-column: 1 / 3.
.katta) grid-column: span 2 bilan 2 ustunga cho'zing.grid-template-areas: nomli maket
Grid'ning eng vizual usuli: har bir katakka nom berib, maketni ASCII rasm kabi chizasiz. Bu bilan header, sidebar va kontentni oson joylashtirasiz.
.panjara ga grid-template-areas bering (head tepada, side va main pastda). Har element grid-area orqali o'z joyiga tushadi.Butun sahifa maketi: qator va ustunlarni bir vaqtda. Header, sidebar, kontent, footer uchun ideal.
Bir qatordagi elementlar: navbar, tugmalar qatori, kartalar. Grid ichida ham ishlatiladi.
Mashqlar
Grid'ni mustaqil sinab ko'ring. Ustunlar, gap va cho'zishni o'zgartiring.
8-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Responsive dizayn
Responsive: barcha ekranlarga moslashuv
Responsive dizayn sahifani telefon, planshet va kompyuterda bir xil chiroyli ko'rsatadi. Buning asosi nisbiy birliklar: % (ota elementga), vw/vh (ekran kengligi/balandligi), rem (ildiz shriftiga) nisbatan o'lchanadi.
.quti ga nisbiy kenglik bering: width: 60%;. U ota konteynerning 60 foizini egallaydi va ekran o'zgarsa moslashadi.<meta name="viewport"> tegisiz responsive ishlamaydi. Aniq px o'rniga nisbiy birliklar tanlang.max-width: toshib chiqmaslik
max-width elementning eng katta kengligini cheklaydi. max-width: 100% rasm yoki qutini konteynerdan tashqariga chiqib ketishdan saqlaydi. Bu responsive dizaynning eng muhim qoidalaridan biri.
.rasm) max-width: 100% bilan konteynerga sig'diring (toshib chiqmasin).@media: ekranga qarab uslub
@media qoidasi ekran kengligiga qarab boshqa uslub beradi. max-width bilan tor ekranlar uchun, min-width bilan keng ekranlar uchun qoidalar yoziladi. Bu breakpoint deb ataladi.
.karta ga border-radius: 10px; bering. Pastdagi @media qoidasi ekran 600px'dan tor bo'lganda fon rangini o'zgartiradi (kodda tayyor).Avval keng ekran uslubi, keyin tor ekranlar uchun qoidalar qo'shiladi. Eski usul.
Avval telefon uslubi (asos), keyin keng ekranlar uchun qo'shiladi. Zamonaviy tavsiya.
Mobile-first yondashuv
Zamonaviy tavsiya: avval telefon uchun asosiy uslubni yozing, so'ng @media (min-width: ...) bilan katta ekranlarga qo'shimchalar bering. Bu kod toza va yengil bo'lishini ta'minlaydi.
.karta ga asosiy (mobil) fon bering: background: #2f6bed;. @media (min-width: 600px) esa kattaroq ekranda padding va shriftni oshiradi.clamp(), min() va max()
Bu funksiyalar media query'siz moslashuvchan o'lcham beradi. clamp(min, ideal, max) qiymatni ikki chegara orasida ushlaydi: clamp(16px, 4vw, 28px) matn ekranga qarab o'zgaradi, lekin 16px'dan kichik yoki 28px'dan katta bo'lmaydi.
.quti) moslashuvchan o'lcham bering: font-size: clamp(18px, 5vw, 28px).Mashqlar
Responsive qoidalarni mustaqil sinab ko'ring. max-width va min-width bilan cheklovlar bering.
9-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Animatsiya va transform
transform: siljitish va aylantirish
transform elementni maketni buzmasdan siljitadi, aylantiradi, kattalashtiradi yoki qiyshaytiradi. U animatsiyaning asosidir, chunki juda tez ishlaydi.
.quti ni aylantiring: transform: rotate(8deg);. transform elementni buradi, kattalashtiradi yoki suradi.transform: rotate(10deg) scale(1.1). Tartib muhim.transition: silliq o'tish
transition o'zgarishni bir zumda emas, silliq (animatsiyali) qiladi. Masalan tugma rangi :hoverda sekin o'zgaradi. transition: xossa davomiylik egri tartibida yoziladi.
.quti) transition: 0.3s bering, so'ng ustiga sichqoncha olib boring (silliq o'tadi).:hover bilan interaktivlik
:hover va transition birga ishlatilsa, jonli va yoqimli tugmalar hosil bo'ladi. Sichqoncha ustiga kelganda element chiroyli o'zgaradi.
.tugma ga transition: 0.25s;. Pastdagi :hover qoidasi transition tufayli yumshoq harakatlanadi.@keyframes va animation
Murakkab, o'zi ishlaydigan animatsiya uchun @keyframes bosqichlarni belgilaydi (from/to yoki 0%–100%), animation esa uni elementga qo'llaydi.
.quti) tayyor animatsiyani qo'llang: animation: aylanish 2s linear infinite.animation sozlamalari
Animatsiyani to'liq boshqarish uchun alohida xossalar bor: davomiylik, tezlik egrisi, necha marta takrorlanishi va kechikish.
.yurak ga puls animatsiyasini qo'llang: animation: puls 1.2s ease-in-out infinite;. @keyframes puls kodda tayyor.Harakat tezligining o'zgarishi. ease tabiiyroq, linear bir tekis. ease-in-out ko'p ishlatiladi.
infinite cheksiz takrorlaydi, son berilsa o'sha marta ishlaydi va to'xtaydi.
Mashqlar
Animatsiya va transformni mustaqil sinab ko'ring. Transform, transition va shaffoflikni o'zgartiring.
10-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Ilg'or CSS
CSS o'zgaruvchilari (--var)
CSS o'zgaruvchilari qiymatni bir joyda saqlab, ko'p joyda ishlatish imkonini beradi. Ular --nom ko'rinishida (odatda :rootda) e'lon qilinadi va var(--nom) orqali chaqiriladi. Rangni bir joyda o'zgartirsangiz, hamma joyda yangilanadi.
--asosiy o'zgaruvchisini #22c55e (yashil) qiling — quti ham yashil bo'ladi.calc(): CSS ichida hisob
calc() turli birliklarni aralashtirib matematik hisob qiladi. Masalan calc(100% - 40px) to'liq kenglikdan 40px ayiradi — foizni pikselga qo'shib bo'lmaydigan joyda juda foydali.
.quti ga calc() bilan kenglik bering: width: calc(100% - 40px);. calc turli birliklarni qo'shib hisoblaydi.+, -) atrofida bo'shliq shart: calc(100% - 40px) to'g'ri, calc(100%-40px) ishlamaydi.filter: vizual effektlar
filter elementga xiralik, yorqinlik, oq-qora va boshqa effektlar beradi. Ayniqsa rasmlar bilan kuchli ishlaydi.
.a qutini xiralashtiring: filter: blur(2px);. filter elementga vizual effekt (blur, grayscale) beradi.filter: grayscale(50%) brightness(1.2).object-fit va aspect-ratio
object-fit: cover rasmni konteynerga nisbatini buzmasdan to'ldiradi (ortiqchasini kesadi). aspect-ratio esa elementga doimiy nisbat beradi — masalan 16 / 9 video ramkasi kabi.
.quti) aspect-ratio: 16 / 9 bering — balandligi avtomatik hisoblanadi.clip-path: shakl kesish
clip-path elementni to'rtburchakdan boshqa shaklga (uchburchak, doira, ko'pburchak) kesadi. Faqat ko'rsatilgan soha ko'rinadi.
.uchburchak dan uchburchak yasang: clip-path: polygon(50% 0%, 0% 100%, 100% 100%);. clip-path elementni istalgan shaklga qirqadi.Elementni doira shaklida kesadi. Avatar yoki dumaloq tugmalar uchun oson yechim.
Nuqtalar bilan ixtiyoriy shakl: uchburchak, romb, tirnoq. Kreativ bo'limlar uchun.
Mashqlar
Ilg'or CSS'ni mustaqil sinab ko'ring. calc, filter va aspect-ratio bilan ishlang.
11-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Zamonaviy CSS va yakuniy loyiha
Dark mode (qorong'i tema)
Zamonaviy saytlar ikki temada ishlaydi. @media (prefers-color-scheme: dark) foydalanuvchi tizimidagi tanlovni aniqlaydi, CSS o'zgaruvchilari esa ranglarni bir joyda almashtirishga imkon beradi.
:root da --fon ni #22c55e qiling. Bitta o'zgaruvchi butun temani boshqaradi (dark mode shu asosda ishlaydi).var(--fon) orqali yozing. Shunda temani almashtirish uchun faqat o'zgaruvchilarni yangilash kifoya.:has() — ota selektori
Uzoq kutilgan imkoniyat: :has() ota elementni ichidagi elementga qarab tanlaydi. Masalan ichida rasmi bor kartani boshqacha bezash mumkin — ilgari bu faqat JavaScript bilan qilinardi.
.belgi bo'lgan kartaga ko'k fon bering: .karta:has(.belgi) { background: #2f6bed }.CSS nesting (ichma-ich yozish)
Zamonaviy CSS qoidalarni ichma-ich yozishga ruxsat beradi — xuddi Sass kabi, lekin sof CSS'da. & belgisi ota selektorni bildiradi. Bu tegishli qoidalarni birga saqlab, kodni tartibli qiladi.
.karta ichiga ustma-ust (nested) qoida joylang, paragrafni sariq qiling: & p { color: gold; }.BEM: class nomlash uslubi
Katta loyihalarda class nomlari chalkashmasligi uchun BEM uslubi ishlatiladi: block__element--modifier. Bu nomlar aniq, takrorlanmas va tushunarli bo'lishini ta'minlaydi.
.karta--faol ga border: 2px solid #2f6bed;. BEM'da --faol kartaning holatini bildiradi..karta__tugma nomidan uning karta ichidagi tugma ekani darrov ko'rinadi. Nom to'qnashuvi bo'lmaydi.Accessibility (a11y) va yakuniy maslahatlar
Yaxshi sayt hamma uchun qulay bo'lishi kerak. Matn va fon o'rtasida yetarli kontrast, klaviatura uchun ko'rinadigan fokus va harakatga sezgir foydalanuvchilar uchun animatsiyani kamaytirish — bular professional ishning belgisi.
cursor: pointer; bering (interaktiv ekanini bildiradi). Pastdagi :focus-visible qoidasi Tab bilan fokuslanganda ko'rinadigan halqa chizadi (klaviatura foydalanuvchilari uchun muhim).Och fonda och matn o'qilmaydi. Rang tanlashda kontrast yetarli ekaniga ishonch hosil qiling.
Tugma uchun <button>, sarlavha uchun <h1> ishlating — CSS bezaydi, HTML ma'no beradi.
Mashqlar
Zamonaviy CSS'ni mustaqil sinab ko'ring. Nesting, accent-color va outline bilan ishlang.
12-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Formalarga uslub berish
Input, textarea va select uslubi
Forma elementlari (matn maydoni, ko'p qatorli textarea, ochiluvchi select) brauzerning eski, xunuk standart ko'rinishida keladi. CSS bilan ularga chegara, ichki bo'shliq, burchak radiusi va shrift berib, saytingiz uslubiga moslashtirasiz. Kenglikni width: 100% qilsangiz, maydon konteynerni to'liq egallaydi.
border-radius: 8px bering, burchaklari yumaloqlansin.16px yoki kattaroq qilsangiz, telefonda maydonga bosilganda sahifa avtomatik kattalashib ketmaydi.Fokus, hover va disabled holatlari
Foydalanuvchi maydonga bosganda (fokus), sichqonchani ustiga olib borganda (hover) yoki maydon o'chirilgan bo'lganda (disabled) uni boshqacha ko'rsatish kerak. :focus uchun brauzerning standart halqasini outline yoki box-shadow bilan chiroyliroq qiling. :focus-visible esa faqat klaviatura bilan kelganda ko'rinadi.
input ga padding: 11px 13px;. Pastdagi :focus va :disabled qoidalari maydon holatiga qarab uslub beradi (maydonga bosib ko'ring).outline: none yozsangiz, o'rniga albatta box-shadow yoki border bilan fokus ko'rinishini bering. Aks holda klaviatura foydalanuvchisi qayerdaligini bilmay qoladi.Tekshiruv holatlari va placeholder
CSS forma holatiga qarab uslub bera oladi: :checked (belgilangan), :required (majburiy), :valid / :invalid (to'g'ri yoki xato to'ldirilgan), :placeholder-shown (hali yozilmagan). ::placeholder pseudo-elementi esa bo'sh maydondagi kulrang matnni bezaydi.
input ga chegara bering: border: 2px solid #cbd5e1;. :valid va :invalid qoidalari email to'g'ri yoki xato bo'lganda chegara rangini o'zgartiradi.To'ldirilishi shart bo'lgan maydonlarni ajratib ko'rsatadi, masalan yulduzcha yoki rang bilan.
Checkbox yoki radio belgilanganda ishlaydi. Maxsus tugma va toggle yasashda asosiy vosita.
accent-color va maxsus checkbox
Checkbox, radio va slider (range) rangini bitta xossa bilan brend rangiga bo'yash mumkin: accent-color. Bu eng oson yo'l. To'liq maxsus ko'rinish kerak bo'lsa, appearance: none bilan standart shaklni o'chirib, o'zingiz noldan chizasiz.
input) accent-color: #2f6bed bering, belgisi ko'k bo'lsin.Forma tuzilishi va joylashuvi
Chiroyli forma faqat rang emas, tuzilma hamdir. Har maydonni <label> bilan bog'lang (bosilganda maydon fokuslanadi). Bog'liq maydonlarni <fieldset>ga guruhlang. Joylashuv uchun Flexbox juda qulay: flex-direction: column va gap maydonlarni bir tekis, teng oraliqda tizadi.
form ga display: flex; va flex-direction: column; bering. Label va input juftliklari ustma-ust tartiblanadi.<label for="email"> va <input id="email"> ni bog'lasangiz, yorliqqa bosilganda ham maydon faollashadi, foydalanish osonlashadi.Mashqlar
Forma uslubini mustaqil sinang. Chegara radiusi, accent-color va ichki bo'shliq bilan ishlang.
13-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
O'lchov birliklari (units)
px va absolyut birliklar
CSS'da o'lcham berishning ikki turi bor: absolyut (o'zgarmas) va nisbiy (biror narsaga bog'liq). px (piksel) eng ko'p ishlatiladigan absolyut birlik: ekrandagi bitta nuqta. U aniq nazorat beradi, shuning uchun chegara (border) va nozik o'lchamlar uchun juda mos. pt (punkt) asosan chop etish (print) uchun ishlatiladi.
width: 300px;. Piksel (px), ekranga bog'liq bo'lmagan qat'iy birlik.px ishlatmang. Matn va joylashuv uchun nisbiy birliklar (rem, %) sahifani moslashuvchan va foydalanuvchi sozlamalariga mos qiladi.Foiz (%): ota elementga nisbatan
% nisbiy birlik: qiymat ota elementga nisbatan hisoblanadi. width: 50% ota kengligining yarmini oladi. Ota kengaysa yoki toraysa, bola ham u bilan birga o'zgaradi. Shu sabab foiz moslashuvchan (responsive) maketlarning asosidir.
.bola) width: 50% bering, ota (200px) ning yarmini olsin.em: joriy shriftga nisbatan
em nisbiy birlik: joriy (ota) element font-sizeiga nisbatan. Agar ota shrifti 16px bo'lsa, 1em = 16px, 2em = 32px. Shrift o'zgarsa, em bilan berilgan o'lchamlar ham u bilan mutanosib o'zgaradi. Diqqat: em to'planadi (compounding) - ichma-ich elementlarda kattalashib ketishi mumkin.
.bola) font-size: 2em bering. Ota 16px, demak matn 32px bo'ladi.rem: ildizga nisbatan
rem (root em) har doim ildiz (html) element font-size'iga nisbatan hisoblanadi. Standart html shrifti 16px, demak 1rem = 16px, 2rem = 32px. em'dan asosiy farqi: rem to'planmaydi, doimo ildizdan olinadi. Shuning uchun u bashoratli va zamonaviy loyihalarda afzal - butun saytni bitta joydan (html shrifti) masshtablash mumkin.
Ota elementga bog'liq. Ichma-ich joylashsa to'planib, kutilmaganda kattalashadi.
Doimo html shriftiga bog'liq, barqaror. Matn o'lchamlari uchun eng ishonchli tanlov.
.sarlavha) font-size: 2rem bering. Ildiz 16px, demak 32px bo'ladi.viewport birliklari: vw, vh
Viewport birliklari ekran (brauzer oynasi) o'lchamiga nisbatan: vw = eshik (viewport) kengligining 1%, vh = balandligining 1%. Demak 100vw butun ekran eni, 100vh butun ekran balandligi. vmin va vmax kichik yoki katta o'lchamning 1%. Ular katta sarlavhalar va to'liq-ekran bo'limlar uchun juda qulay.
font-size: 5vw;. vw ekran kengligining bir foiziga teng (5vw = 5 foiz); oynani kengaytirsangiz shrift o'sadi.clamp() bilan (9-modul) birga eng yaxshi ishlaydi: clamp(18px, 5vw, 40px) matnni chegaralar ichida silliq moslashtiradi.Mashqlar
Birliklarni mustaqil sinang. Foiz, em va rem bilan o'lcham bering.
14-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
3D Transformlar
perspective: 3D sahna yaratish
10-modulda 2D transformlarni ko'rdik. 3D transformlar elementni chuqurlikka (ekranga yaqin yoki uzoq) ham harakatlantiradi. Buning uchun avval 3D sahna kerak: perspective xossasini ota elementga bering. U ko'z bilan ekran orasidagi masofani bildiradi. Kichik qiymat (masalan 400px) kuchli, bo'rttirilgan effekt, katta qiymat esa yumshoq effekt beradi.
.sahna) perspective: 800px bering, 3D fazo ochilsin.rotateX, rotateY, rotateZ
3D fazoda element uch o'q atrofida aylanishi mumkin: rotateX gorizontal o'q atrofida (oldinga yoki orqaga egiladi), rotateY vertikal o'q atrofida (yon tomonga buriladi, eshik kabi), rotateZ esa ekran tekisligida (oddiy 2D aylanish). Bularni perspective bilan birga ishlatsangiz, haqiqiy hajm hissi paydo bo'ladi.
.quti) transform: rotateY(40deg) bering, yon tomonga burilsin.translateZ va translate3d
translateZ elementni Z o'qi bo'ylab - ekranga yaqin (musbat qiymat) yoki undan uzoq (manfiy) - siljitadi. Bu faqat perspective bo'lganda ko'rinadi: musbat translateZ elementni kattaroq (yaqinroq) qiladi. translate3d(x, y, z) esa uch o'q bo'yicha bir vaqtda siljitadi.
.quti ni Z o'qi bo'ylab yaqinlashtiring: transform: translateZ(50px);. perspective tufayli quti kattaroq (yaqinroq) ko'rinadi.perspective bo'lsa ko'rinadi. Perspective'siz Z siljishi sezilmaydi.preserve-3d va backface-visibility
Ikki muhim yordamchi xossa 3D uchun zarur. transform-style: preserve-3d element bolalarini 3D fazoda saqlaydi (aks holda ular tekis, 2D bo'lib qoladi). backface-visibility: hidden esa elementning orqa tomonini yashiradi - element teskari aylanganda ko'rinmaydi. Bu ayniqsa aylanadigan (flip) kartalar uchun kerak.
.karta) transform-style: preserve-3d bering.3D flip karta (loyiha)
Endi hamma bilimni birlashtiramiz. Aylanadigan karta yasash uchun: ota'da perspective, kartada transform-style: preserve-3d va transition, ikki yuzda backface-visibility: hidden, orqa yuz esa boshidan rotateY(180deg). Hoverda butun kartani rotateY(180deg) qilsangiz, u silliq aylanib orqa tomonini ko'rsatadi. Quyidagi kartaga sichqonchani olib boring!
.karta ga transform-style: preserve-3d; bering. So'ng sichqonchani karta ustiga olib borsangiz, u 180 daraja aylanadi.3D chuqurlikni ochadi. Busiz aylanish tekis, hajmsiz ko'rinadi.
Karta teskari aylanganda orqa tomon ko'rinmasligini ta'minlaydi.
Mashqlar
3D transformlarni mustaqil sinang. perspective, rotate va preserve-3d bilan ishlang.
15-modul testi
Modulni yakunlash uchun kamida 5/6 to'g'ri javob bering.
Amaliy imtihon va yakuniy test
1-qism: Amaliy imtihon
Bu kursning eng katta sinovi. Tugmani bosing, to'liq ekranli kod studiyasi ochiladi: chapda CSS yozasiz, o'ng tomonda «Namuna» (siz erishishingiz kerak bo'lgan tayyor dizayn) va «Natija» (sizning jonli natijangiz) yorliqlari bo'ladi. HTML tayyor, faqat CSS yozib, namunadagi profil kartasini 1:1 yasang. Barcha 10 talab bajarilganda imtihon o'tadi.
Chapda CSS yozasiz, o'ngda Namuna va Natijani solishtirasiz.
2-qism: 50 savollik yakuniy test
Barcha 15 modul bo'yicha 50 ta savol. Sertifikatga yetish uchun kamida 40/50 to'g'ri javob bering.