WisarWisar
Dasturlash kitobi/1-QISM — HTML CSS20 daqiqa

1.2-bob: CSS asoslari — selektorlar, box model, ranglar, birliklar

1-QISM — HTML, CSS va zamonaviy stillar · 2-mavzu

1. Kirish va motivatsiya

Oldingi bobda 1.1-bob sahifaning skeletini — HTML'ni — yozdik. Lekin u hozir g'arib ko'rinadi: qora matn, oq fon, hech qanday bezak. CSS aynan shu yerda ishga tushadi.

CSS (Cascading Style Sheets — kaskadli uslublar jadvali) — bu HTML'ga ko'rinish beradigan til: rang, o'lcham, joylashuv, shrift, masofa, animatsiya. 0.5-bobda ko'rgan CSSOM — aynan sizning yozgan CSS'ingizdan quriladi, va DOM bilan birlashib, Render Treeni yasaydi.

O'xshatish (1.1 davomi): HTML — uyning devorlari. CSS — bo'yoq, oboy, mebel, yorug'lik. Bir xil skeletli uyni CSS bilan ham qashshoq, ham hashamatli qilib ko'rsatish mumkin. Aynan CSS saytni "professional" yoki "havaskor" qilib ko'rsatadi.

Nega CSS'ni chuqur o'rganish kerak (ko'pchilik "qiyin emas" deb yuzaki o'rganadi)?

  • Box model — har bir element bir "quti". Buni tushunmasangiz, "nega bu element joyiga kelmayapti?" degan savol bilan soatlab kurashasiz. Bu — eng ko'p uchraydigan boshlovchi muammosi.
  • Selektorlar va specificity — "nega mening CSS'im ishlamayapti?" savolining 80% javobi shu. Specificity'ni bilmasdan CSS yozish — qorong'uda o'q otish.
  • Birliklar (px, rem, %, vw) — responsive dizayn 1.5-bob va katta loyihalarning asosi.
  • Flexbox 1.3-bob, Grid 1.4-bob, SCSS 1.6-bob, Tailwind 1.7-bob — hammasi shu bobga tayanadi.

2. Nazariya — chuqur tushuntirish

2.1. CSS sintaksisi va ulash usullari

CSS qoidasi (rule) uch qismdan iborat:

text
   selector {
     property: value;      e'lon (declaration)
     property: value;
   }
   │          │
   selector   tana (block) — qaysi xususiyat qanday qiymatda
css
h1 {                  /* selektor: barcha <h1> larni tanlaydi */
  color: navy;        /* xususiyat: rang; qiymat: navy */
  font-size: 32px;    /* har e'lon ; bilan tugaydi */
}

CSS'ni HTML'ga uch xil ulash mumkin:

Usul Qanday Tavsiya
Inline <p style="color:red"> faqat juda kichik holatda
Internal <style> ichida <head>da kichik sahifa
External alohida .css fayl, <link> bilan eng yaxshi
html
<!-- External (eng to'g'ri) -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

Nega external eng yaxshi? Ajratish (separation of concerns): struktura (HTML) va ko'rinish (CSS) alohida fayllarda; bitta CSS faylni ko'p sahifada qayta ishlatasiz; brauzer uni keshlaydi (0.1: caching).

2.2. Selektorlar — elementni tanlash

Selektor — "qaysi elementlarga bu uslub qo'llanadi" degan savolning javobi. Asosiy turlari:

css
/* Element (teg) selektori */
p { color: gray; }              /* barcha <p> */

/* Class selektori (eng ko'p ishlatiladigan) — . bilan */
.tugma { background: blue; }    /* class="tugma" bo'lganlar */

/* ID selektori — # bilan (kamdan-kam, 5-bo'lim) */
#asosiy { width: 100%; }        /* id="asosiy" */

/* Universal — hammasi */
* { margin: 0; }

/* Atribut selektori */
input[type="email"] { border: 1px solid green; }

/* Bir nechta (guruh) — vergul bilan */
h1, h2, h3 { font-family: sans-serif; }

Birikma (combinator) selektorlar:

css
.karta p { }      /* descendant: .karta ichidagi BARCHA <p> (chuqurlikda) */
.karta > p { }    /* child: faqat BEVOSITA bola <p> */
h2 + p { }        /* adjacent: <h2> dan keyingi BIRINCHI <p> */

Pseudo-class (holat) va pseudo-element (qism):

css
a:hover { color: red; }        /* sichqoncha ustida (holat) */
input:focus { outline: 2px solid blue; } /* fokusda */
li:first-child { font-weight: bold; }    /* birinchi bola */
p::first-line { font-weight: bold; }     /* birinchi qator (pseudo-element) */
.box::before { content: " "; }          /* elementdan OLDIN kontent qo'shadi */

2.3. Specificity (aniqlik) va kaskad — eng muhim qism

"Nega CSS'im ishlamayapti?" — bu savolning javobi deyarli doim specificity. Ikkita qoida bir elementga qarama-qarshi uslub bersa, brauzer qaysi biri kuchliroq ekanini hisoblaydi.

Specificity uch sonli "ball" sifatida hisoblanadi (a, b, c):

  • a = inline style="" (eng kuchli)
  • b = id selektorlar soni (har biri katta vazn)
  • c = class, atribut, pseudo-class soni
  • (+ element va pseudo-element soni — eng past)
text
  Selektor                  Specificity (id, class, element)
  p                         (0, 0, 1)
  .tugma                    (0, 1, 0)    classlardan kuchliroq
  #menu                     (1, 0, 0)    classdan ham kuchliroq
  #menu .item               (1, 1, 0)
  div.karta p.matn          (0, 2, 2)
  style="..." (inline)      eng kuchli (a)
  !important                hammasini "yengadi" (lekin ishlatma! — 5-bo'lim)

Kaskad qoidasi (qaysi g'olib?): (1) !important bormi (2) specificity kimniki yuqori (3) teng bo'lsa, keyingi (pastdagi) qoida g'olib.

O'xshatish: specificity — bu "ovozning vazni". Oddiy element — bir kishi (1 ovoz). Class — boshliq (10 ovoz). ID — direktor (100 ovoz). Inline — egasi (1000 ovoz). Qaror kimning ovozi og'irroq bo'lsa — o'shaniki. Maslahat: ovozlarni past tutib ishla (asosan class) — keyin boshqarish oson bo'ladi.

2.4. Box Model — har element bir "quti"

Bu — CSS'ning eng fundamental tushunchasi. Sahifadagi har bir element to'rt qatlamli "quti"dir:

text
   ┌─────────── margin (tashqi masofa) ───────────┐
   │  ┌──────── border (chegara) ──────────────┐  │
   │  │  ┌───── padding (ichki masofa) ─────┐  │  │
   │  │  │  ┌──── content (kontent) ────┐   │  │  │
   │  │  │  │   matn / rasm shu yerda    │   │  │  │
   │  │  │  └───────────────────────────┘   │  │  │
   │  │  └──────────────────────────────────┘  │  │
   │  └─────────────────────────────────────────┘  │
   └─────────────────────────────────────────────┘
  • content — matn/rasm joylashadigan asl maydon (width, height).
  • padding — content bilan border orasidagi ichki bo'shliq.
  • border — chegara (chiziq).
  • margin — element bilan boshqa elementlar orasidagi tashqi masofa.

O'xshatish: rasm va ramka. Content — surat. Padding — surat bilan ramka orasidagi oq pasportu (matting). Border — ramkaning o'zi. Margin — devordagi bu ramka bilan qo'shni ramka orasidagi bo'sh joy.

2.5. box-sizing — qutining o'lchami qanday hisoblanadi (eng muhim "gotcha")

Sukut bo'yicha (content-box), width faqat contentni o'lchaydi; padding va border ustiga qo'shiladi:

text
  box-sizing: content-box (sukut)
  width: 100px + padding 20px (x2) + border 5px (x2) = 150px REAL kenglik (!)

Bu — boshlovchining boshini og'ritadigan klassik muammo: "100px deb yozdim, lekin 150px chiqdi!". Yechim — border-box: padding va border width ichida hisoblanadi:

text
  box-sizing: border-box
  width: 100px = content + padding + border (HAMMASI ichida)  REAL 100px

Shuning uchun deyarli barcha professional loyiha shu "reset" bilan boshlanadi:

css
* {
  box-sizing: border-box;  /* hamma elementga — o'lcham mantiqli bo'ladi */
}

2.6. display — element qanday "oqadi"

display elementning xulqini o'zgartiradi (1.1: block/inline):

Qiymat Xulq
block butun qator, yangi qatordan (div, p)
inline qator ichida, width/height ishlamaydi (span, a)
inline-block qator ichida, lekin width/height ishlaydi
none butunlay yashiradi (joy ham egallamaydi)
flex Flexbox konteyner (1.3-bob!)
grid Grid konteyner (1.4-bob!)

2.7. Ranglar (0.1-bobning amaliyoti)

Rang berishning bir necha usuli (0.1: hex — RGB baytlari):

css
color: red;                    /* nomli rang (cheklangan) */
color: #FF5733;                /* hex (0.1: RR GG BB) — eng ko'p */
color: #F53;                   /* qisqa hex (#FF5533) */
color: rgb(255, 87, 51);       /* RGB (0–255 har kanal) */
color: rgba(255, 87, 51, 0.5); /* + alpha (shaffoflik 0–1) */
color: hsl(9, 100%, 60%);      /* Hue, Saturation, Lightness — inson-do'st */

hsl ko'pincha qulayroq: rangni (hue 0–360) saqlab, ravshanlik (lightness) ni o'zgartirib, ohanglar yasaysiz.

2.8. Birliklar (units) — o'lcham tili

Ikki turli birlik bor: absolyut (qat'iy) va nisbiy (kontekstga bog'liq):

Birlik Turi Ma'nosi
px absolyut piksel (qat'iy o'lcham)
% nisbiy ota elementga nisbatan
em nisbiy joriy element shriftiga nisbatan
rem nisbiy ildiz (html) shriftiga nisbatan
vw / vh nisbiy ekran (viewport) eni/bo'yining %

rem nega muhim? Foydalanuvchi brauzer shriftini kattalashtirsa (accessibility), rem bilan yozilgan hamma narsa mutanosib kattalashadi — px esa qotib qoladi. Shuning uchun shrift va masofa uchun rem tavsiya etiladi.

css
html { font-size: 16px; }    /* 1rem = 16px (ildiz) */
h1 { font-size: 2rem; }      /* = 32px, lekin moslashuvchan */
.container { width: 80vw; }  /* ekran enining 80% */

2.9. Inheritance (meros)

Ba'zi xususiyatlar (asosan matnga oid: color, font-family, font-size) ota elementdan bolalarga meros o'tadi:

css
body { color: #333; font-family: sans-serif; }
/* endi body ICHIDAGI barcha matn shu rang va shriftni OLADI (qayta yozmasa) */

Lekin margin, padding, border kabilar meros bo'lmaydi — har element o'ziniki.

2.10. Selektorlar — to'liq ma'lumotnoma

2.2 da asosiylarini ko'rdik. Mana to'liq to'plam.

Atribut selektorlari (qiymat bo'yicha aniq tanlash):

css
[type]            { }   /* type atributi BOR */
[type="text"]     { }   /* aniq teng */
[class~="btn"]    { }   /* so'zlar ichida "btn" bor */
[href^="https"]   { }   /* "https" bilan BOSHLANADI */
[href$=".pdf"]    { }   /* ".pdf" bilan TUGAYDI */
[href*="google"]  { }   /* ichida "google" bor */
[lang|="uz"]      { }   /* "uz" yoki "uz-..." */

Birikma (combinator) selektorlari — to'rttasi:

Yozuv Nomi Ma'nosi
A B descendant A ichidagi barcha B (chuqurlikda)
A > B child A ning bevosita bolasi B
A + B adjacent sibling A dan keyingi birinchi B (qo'shni)
A ~ B general sibling A dan keyingi barcha B (qardosh)

Pseudo-class (holat) — to'liq:

Pseudo-class Qachon
:hover / :active / :focus sichqoncha ustida / bosilganda / fokusda
:focus-visible / :focus-within klaviatura fokusi / ichida fokus bor
:first-child / :last-child birinchi / oxirgi bola
:nth-child(n) / :nth-of-type(n) n-bola (2n=juft, odd, 3)
:only-child / :only-of-type yagona bola
:not(selector) bundan tashqari (inkor)
:is(...) / :where(...) ro'yxatdan biri (:where specificity 0)
:has(selector) ICHIDA shu bor ("ota" selektori)
:checked / :disabled / :enabled belgilangan / o'chiq / yoniq
:required / :optional / :valid / :invalid forma holati
:empty bolasi yo'q
:root ildiz (html) — o'zgaruvchilar uchun
:target #id havola nishoni
:link / :visited ko'rilmagan / ko'rilgan havola
:first / :nth-last-child() ... va boshqalar

Pseudo-element (qism) — :: bilan:

Pseudo-element Nima
::before / ::after element OLDIDAN / KEYIN kontent (content: bilan)
::first-line / ::first-letter birinchi qator / harf
::placeholder input namuna matni
::selection belgilab olingan (highlight) matn
::marker ro'yxat markeri (<li> nuqtasi)
::backdrop <dialog>/fullscreen orqa foni

2.11. Birliklar (units) — to'liq ro'yxat

Birlik Turi Ma'nosi
px absolyut piksel
cm mm in pt pc absolyut bosma birliklar (kam ishlatiladi)
% nisbiy ota elementga nisbatan
em font joriy shriftga
rem font ildiz (html) shriftga
ch font "0" raqami kengligi
ex font "x" harfi balandligi
lh / rlh font qator balandligiga
vw / vh viewport ekran eni / bo'yi %
vmin / vmax viewport kichik / katta o'lcham %
svh lvh dvh viewport mobil dinamik balandlik (yangi)
fr grid bo'sh joy ulushi (Grid — 1.4)
deg rad turn burchak aylanish (transform)
s / ms vaqt sekund / millisekund (animatsiya)
dpi / dppx o'lcham aniqligi ekran zichligi (media)

2.12. CSS funksiyalar (functions)

CSS qiymatlarni hisoblay oladi:

css
width: calc(100% - 40px);            /* aralash hisob */
font-size: clamp(1rem, 2.5vw, 2rem); /* min, ideal, max (responsive!) */
width: min(90vw, 1200px);            /* kichigini oladi */
height: max(300px, 50vh);            /* kattasini oladi */
color: var(--asosiy, #333);          /* o'zgaruvchi (+ zaxira qiymat) */
background: url("rasm.png");          /* resurs */
background: linear-gradient(to right, red, blue);  /* gradient */
background: radial-gradient(circle, white, black); /* doiraviy gradient */
transform: translate(10px, 20px) rotate(45deg) scale(1.2); /* o'zgartirishlar */
color: rgb(255 0 0 / 50%);            /* zamonaviy rgb + alpha */
grid-template-columns: repeat(3, 1fr); /* takrorlash (Grid) */
filter: blur(4px) brightness(1.2);    /* filtrlar */

clamp() — responsive dizaynning sehri: font-size: clamp(1rem, 2.5vw, 2rem) — shrift ekran bilan o'sadi, lekin 1rem dan kichik va 2rem dan katta bo'lmaydi. Media query'siz moslashuv 1.5-bob.

2.13. Barcha CSS xossalari — toifaviy ma'lumotnoma

CSS'da yuzlab xossa bor — hammasini yodlash shart emas, lekin qaysi toifada nima borligini bilish kerak. Mana eng muhim/ko'p ishlatiladiganlar toifalar bo'yicha:

Box model / o'lcham: width height min-width max-width min-height max-height padding (-top/right/bottom/left) margin (-top/...) border (-width/style/color) border-radius box-sizing outline outline-offset aspect-ratio

Joylashtirish (positioning): position (static/relative/absolute/fixed/sticky) top right bottom left inset z-index float clear

Display / oqim: display (block/inline/inline-block/flex/grid/none/contents) visibility opacity overflow (-x/-y: visible/hidden/scroll/auto) object-fit object-position

Flexbox (1.3-bobda chuqur): flex-direction flex-wrap flex-flow justify-content align-items align-content align-self flex-grow flex-shrink flex-basis flex order gap

Grid (1.4-bobda chuqur): grid-template-columns grid-template-rows grid-template-areas grid-column grid-row grid-area gap (row-gap/column-gap) justify-items place-items grid-auto-flow

Tipografiya / matn: font-family font-size font-weight font-style font-variant line-height letter-spacing word-spacing text-align text-decoration text-transform (uppercase/lowercase/capitalize) text-indent text-overflow (ellipsis) white-space (nowrap/pre) word-break overflow-wrap text-shadow vertical-align writing-mode direction

Rang / fon: color background-color background-image background-position background-size (cover/contain) background-repeat background-attachment background-clip background (qisqa) accent-color caret-color

Chegara va effektlar: border-radius box-shadow outline filter (blur/brightness/grayscale/...) backdrop-filter mix-blend-mode clip-path mask opacity

Transformatsiya / animatsiya: transform (translate/rotate/scale/skew) transform-origin transition (-property/-duration/-timing-function/-delay) animation (-name/-duration/-iteration-count/-direction/-fill-mode) will-change

Ro'yxat / jadval: list-style (-type/-position/-image) table-layout border-collapse border-spacing caption-side empty-cells

Interaktivlik / boshqa: cursor (pointer/default/grab/...) pointer-events user-select resize scroll-behavior (smooth) content counter-reset counter-increment appearance gap

css
/* Tipik amaliy misol — bularning ko'pi birga */
.karta {
  display: flex; flex-direction: column; gap: 12px;   /* layout */
  padding: 20px; border-radius: 12px;                 /* box */
  background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08);
  font-size: clamp(.9rem, 2vw, 1rem); line-height: 1.6; /* matn */
  transition: transform .2s, box-shadow .2s;          /* animatsiya */
  cursor: pointer;
}
.karta:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }

Maslahat: har bir xossani MDN'da (developer.mozilla.org) qidiring — har biri uchun aniq sintaksis, qiymatlar va interaktiv misol bor. Bu ro'yxat — "nima borligini bilish" uchun; chuqur sintaksis — MDN'da.

2.14. @-qoidalar (at-rules)

Maxsus, @ bilan boshlanadigan CSS qoidalari:

At-rule Vazifasi
@media ekran o'lchamiga qarab uslub (responsive — 1.5)
@import boshqa CSS faylni ulash (sekin — <link> afzal)
@font-face maxsus shrift ulash (fayl)
@keyframes animatsiya kadrlari (from/to/%)
@supports brauzer xossani qo'llaydimi — tekshirish
@layer kaskad qatlamlari (specificity boshqaruvi — yangi)
@container ota konteyner o'lchamiga qarab (container query — yangi)
@page bosma (PDF) sahifa uslubi
css
@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}
@keyframes paydoBol {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.element { animation: paydoBol .5s ease-out; }
@supports (display: grid) { .layout { display: grid; } }

2.15. CSS o'zgaruvchilar (custom properties) — chuqurroq

8-bo'limda eslatib o'tdik. Bu — zamonaviy CSS'ning kuchli quroli (SCSS o'zgaruvchidan farqli — brauzerda jonli, JS bilan o'zgartirsa bo'ladi):

css
:root {                      /* :root = global (butun sahifa) */
  --asosiy: #3b5bdb;
  --orasi: 16px;
  --radius: 8px;
}
.tugma {
  background: var(--asosiy);
  padding: var(--orasi);
  border-radius: var(--radius, 4px);   /* 2-argument = zaxira qiymat */
}
/* Lokal qayta aniqlash (scope) — faqat shu blok ichida: */
.dark-tema { --asosiy: #7c9bff; }      /* tema almashtirish bir qatorda! */

SCSS o'zgaruvchisi vs CSS o'zgaruvchisi: SCSS $rang — kompilyatsiyada yo'qoladi (statik). CSS --rang — brauzerda jonli qoladi: JS bilan o'zgartirsangiz (element.style.setProperty('--rang', 'red')), butun sahifa darrov yangilanadi. Dark mode, tema almashtirish — aynan shu bilan qilinadi (1.6 da SCSS bilan solishtiramiz).

3. Sintaksis — tez ma'lumotnoma

css
/* selektor { xususiyat: qiymat; } */
.karta {
  /* box model 2.4-bob */
  width: 300px;
  padding: 16px;
  border: 1px solid #ddd;
  margin: 0 auto;          /* yuqori/past 0, chap/o'ng auto = markazga */

  /* ko'rinish */
  background-color: #fff;
  color: #333;
  border-radius: 8px;      /* yumaloq burchak */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* soya */

  /* matn */
  font-size: 1rem;
  line-height: 1.6;        /* qatorlar orasi */
  text-align: center;
}

4. Batafsil kod namunalari

Misol 1 — Selektorlar va specificity

css
/* element selektori — (0,0,1) */
p { color: gray; }

/* class — (0,1,0) — yuqoridagini yengadi 2.3-bob */
.muhim { color: red; }

/* id — (1,0,0) — classni ham yengadi */
#maxsus { color: green; }

/* hover holati 2.2-bob */
.tugma { background: #3b5bdb; color: white; padding: 10px 20px; }
.tugma:hover { background: #2c46b0; }  /* ustiga kelganda to'qroq */

Misol 2 — Box model va box-sizing farqi

css
/* Reset — har doim shu bilan boshlang 2.5-bob */
* { box-sizing: border-box; margin: 0; padding: 0; }

.quti {
  width: 200px;       /* border-box: padding+border SHU ICHIDA (real 200px) */
  padding: 20px;      /* ichki masofa 2.4-bob */
  border: 2px solid navy;
  margin: 16px;       /* tashqi masofa */
  background: #eef;
}

Misol 3 — Ranglar va birliklar

css
html { font-size: 16px; }     /* 1rem asosi 2.8-bob */

.banner {
  background: hsl(220, 80%, 55%);    /* hsl 2.7-bob */
  color: rgba(255, 255, 255, 0.95);  /* yarim shaffof oq */
  padding: 2rem;                      /* = 32px, moslashuvchan 2.8-bob */
  width: 90vw;                        /* ekran enining 90% */
  max-width: 1200px;                  /* lekin 1200px dan oshmasin */
  margin: 0 auto;                     /* markazga */
}

Misol 4 — display bilan menyu

css
nav { display: flex; gap: 1rem; }   /* gorizontal menyu (1.3-bobda chuqur) */

.belgi {
  display: inline-block;   /* qatorda, lekin o'lcham beriladi 2.6-bob */
  width: 12px; height: 12px;
  background: green; border-radius: 50%;  /* doira */
}

.yashirin { display: none; }  /* butunlay yashiradi 2.6-bob */

5. To'g'ri va noto'g'ri holatlar

1) Uslub uchun id selektori

css
/*  id specificity juda yuqori — keyin qayta yozish qiyin 2.3-bob */
#tugma { background: blue; }

/*  class bilan — past, boshqarish oson */
.tugma { background: blue; }

2) !important ni suiiste'mol qilish

css
/*  specificity muammosini !important bilan "yopish" */
.matn { color: red !important; }

/*  selektorni to'g'ri yozib, specificityni boshqar 2.3-bob */

Nega: !important kaskadni buzadi; keyin uni yana !important bilan yengishga to'g'ri keladi — tartibsizlik zanjiri.

3) box-sizing reset'ini unutish

css
/*  width: 100% + padding  100% dan oshadi, "overflow" 2.5-bob */
.input { width: 100%; padding: 12px; }

/*  border-box bilan — 100% ichida padding hisoblanadi */
* { box-sizing: border-box; }
.input { width: 100%; padding: 12px; }

4) Hamma joyda px

css
/*  accessibility — foydalanuvchi shriftini kattalashtira olmaydi 2.8-bob */
body { font-size: 14px; }

/*  rem — moslashuvchan */
body { font-size: 1rem; }

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — "CSS'im ishlamayapti"

Sababi: boshqa, kuchliroq selektor (yuqori specificity) uni yengyapti 2.3-bob. Yechimi: DevTools 0.5-bob Elements element'ni tanlang "Styles" panelida qaysi qoida chizilgan (kuchsiz) ko'rinadi. Selektoringizni kuchaytiring (lekin !importantsiz).

Xato 2 — Element kutilgandan katta/joydan chiqyapti

Sababi: box-sizing: content-box (sukut) — padding/border widthga qo'shiladi 2.5-bob. Yechimi: * { box-sizing: border-box; }.

Xato 3 — Margin "collapse" (qo'shilib ketishi)

text
  Ikki vertikal element orasidagi margin QO'SHILMAYDI, balki KATTAroqi olinadi.
  element1 margin-bottom: 30px  +  element2 margin-top: 20px    30px (50px emas!)

Sababi: vertikal margin collapse — CSS xususiyati. Yechimi: buni bilib ishlang; kerak bo'lsa padding ishlating yoki Flexbox gap 1.3-bob.

Xato 4 — Rang/uslub meros bo'lmayapti

Sababi: margin/border kabilar meros bo'lmaydi 2.9-bob. Yechimi: kerak elementga to'g'ridan-to'g'ri bering.

Xato 5 — class oldida . unutish

css
/*  tugma — bu <tugma> tegini qidiradi (mavjud emas) */
tugma { color: red; }
/*  .tugma — class 2.2-bob */
.tugma { color: red; }

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

  • Flexbox 1.3-bob va Grid 1.4-bob: display: flex/grid — joylashtirish; box model ustiga quriladi.
  • Responsive 1.5-bob: birliklar (rem, vw, %) va media queries.
  • SCSS 1.6-bob: o'zgaruvchi, nesting — CSS ustiga qulaylik.
  • Tailwind 1.7-bob: utility class'lar — aslida shu CSS xususiyatlari.
  • BEM 1.9-bob: class nomlash metodologiyasi — specificityni past tutish.
  • React styling (11): CSS Modules, styled-components — bari shu asosda.
  • CSSOM/rendering 0.5-bob: CSS render-blocking; reflow/repaint box model o'zgarishdan.
  • Animatsiya 11.16-bob: transform/opacity (0.5: arzon).

8. Eng yaxshi amaliyotlar (best practices)

  • Loyihani * { box-sizing: border-box; } reset bilan boshlang 2.5-bob.
  • Asosan class selektorlardan foydalaning. idni styling uchun ishlatmang; specificityni past tuting 2.3-bob.
  • !importantdan qoching. Faqat juda zarur holatda (masalan tashqi kutubxonani yengishda).
  • Shrift va masofa uchun rem (accessibility — 2.8); chegara uchun px bo'lsa mayli.
  • External CSS ishlating 2.1-bob; inline'dan qoching.
  • CSS o'zgaruvchilar (custom properties) bilan ranglarni markazlashtiring: :root { --asosiy: #3b5bdb; } keyin color: var(--asosiy).
  • DevTools'ni doim ochib ishlang — specificity va box modelni ko'z bilan ko'ring.
  • Class nomlarini mazmunli qo'ying (.tugma, .karta), ko'rinish bo'yicha emas (.qizil).

9. Amaliy loyiha: "Portfolioga Jon Kiritish (CSS)"

1.1-bobda yasagan portfolio sahifangni endi bezatasiz. Hali Flexbox/Grid yo'q (1.3–1.4) — faqat shu bobning vositalari bilan.

Maqsad

Box model, selektorlar, ranglar va birliklarni amalda qo'llab, HTML skeletni chiroyli, o'qishli sahifaga aylantirish.

Talablar (requirements)

  1. External CSS fayl yarating (style.css) va <link> bilan ulang 2.1-bob.
  2. Reset: * { box-sizing: border-box; margin: 0; padding: 0; } 2.5-bob.
  3. Tipografiya: bodyga font-family, color, line-height bering (meros — 2.9). O'lchamlar remda 2.8-bob.
  4. Ranglar: :rootda kamida 3 ta CSS o'zgaruvchi (--asosiy, --matn, --fon) va ularni ishlating (8-bo'lim).
  5. Box model: har "karta"/section'ga padding, margin, border-radius, box-shadow (3-bo'lim).
  6. Selektorlar: element, class va kamida bitta pseudo-class (:hover) ishlating 2.2-bob. Havola/tugmalar :hoverda o'zgarsin.
  7. Markazlash: asosiy konteynerni max-width + margin: 0 auto bilan markazga qo'ying.
  8. (Bonus) Rasmga border-radius: 50% (doira avatar); transition bilan silliq hover.

Maslahatlar (hint)

  • DevTools 0.5-bob Elements element'ni tanlang box model diagrammasini ko'ring (margin/padding/border).
  • Ranglarni :root { --asosiy: #3b5bdb; } da saqlang, var(--asosiy) bilan ishlating.
  • margin: 0 auto faqat width/max-width berilgan block elementni markazlaydi.
  • transition: all 0.2s — hover o'zgarishlarini silliq qiladi (0.5: arzon animatsiya).
  • Specificity muammosida — DevTools'da chizilgan (kuchsiz) qoidani izlang (6-bo'lim).

"Tayyor" mezonlari (acceptance criteria)

  • External CSS ulangan, inline style yo'q.
  • box-sizing: border-box reset bor.
  • Kamida 3 ta CSS o'zgaruvchi ishlatilgan.
  • Har section/kartada box model (padding/margin/border/shadow) qo'llangan.
  • :hover ishlaydi (tugma yoki havola).
  • Sahifa markazlashgan (max-width + margin auto).
  • O'lchamlarda rem ishlatilgan (faqat px emas).
  • DevTools'da specificity konflikti yo'q.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda HTML'ga ko'rinish beradigan CSS asoslarini o'rgandik:

  • CSS qoidasi = selektor + { xususiyat: qiymat }; external fayl eng yaxshi.
  • Selektorlar: element, class (eng ko'p), id (kam), birikmalar, pseudo-class/element.
  • Specificity (a=inline, b=id, c=class) konfliktni hal qiladi; pastda tuting, !importantdan qoching.
  • Box Model: har element — content + padding + border + margin "qutisi". box-sizing: border-box — majburiy reset.
  • display (block/inline/inline-block/none/flex/grid); ranglar (hex/rgb/hsl); birliklar (px qat'iy, rem/%/vw nisbiy).

Keyingi bob — 1.3-bob: Flexbox (chuqur). Endi elementlarni joylashtirishni o'rganamiz. Box model bilan bitta qutini boshqardik; Flexbox bilan ko'p qutini bir qatorda, markazda, teng taqsimlab joylashtiramiz. Bu — zamonaviy layout'ning yarmi (ikinchi yarmi — Grid, 1.4).

Foydalanilgan rasmiy/ishonchli manbalar

  • MDN Web Docs — CSS box model, box-sizing (content-box vs border-box)
  • MDN Web Docs — CSS selectors, specificity, cascade
  • MDN Web Docs — CSS values and units (px, em, rem, %, vw/vh)

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
1.2-bob: CSS asoslari — selektorlar, box model, ranglar, birliklar — Wisar