# CSS cheatsheet — asosiy xossalar

> CSS sintaksisi, selektorlar, rang, matn, box model, Flexbox, Grid, position va responsive media query uchun qisqa o'zbekcha qo'llanma.

Manba: https://learncode.uz/html-css/css-cheatsheet/
Sana: 2026-05-24

Bu cheatsheet kod yozayotganda tez eslash uchun mo'ljallangan. Qiymatni
ko'chirishdan oldin u qaysi elementga va nima sabab berilayotganini tushuning.

## CSS qoidasining shakli

```css
selektor {
  xossa: qiymat;
}
```

Tashqi CSS faylni HTMLga ulash:

```html
<link rel="stylesheet" href="styles.css">
```

## Selektorlar

```css
p { color: #334155; }                 /* element */
.karta { padding: 16px; }             /* class */
#asosiy { max-width: 70rem; }          /* id */
.karta h2 { margin-top: 0; }           /* ichki avlod */
.menu > li { list-style: none; }        /* bevosita farzand */
input[type="email"] { width: 100%; }  /* atribut */
a:hover { color: #3730a3; }            /* holat */
a:focus-visible { outline: 3px solid; } /* klaviatura fokusi */
```

Qarama-qarshi qoidalarda specificity, keyin manba tartibi ishlaydi. Odatda
qayta ishlatiladigan class selektorlari bilan sodda CSS yozish qulay.

## Rang va fon

```css
.xabar {
  color: #172033;
  background-color: #eef2ff;
  border: 1px solid #c7d2fe;
}

.banner {
  background-image: linear-gradient(135deg, #eef2ff, #dbeafe);
  background-size: cover;
  background-position: center;
}
```

Matn va fon kontrastini tekshiring. Ma'no faqat rang orqali berilmasin.

## Matn va shrift

```css
body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.1;
}

.maqola {
  max-width: 68ch;
}
```

## Box model

```css
* { box-sizing: border-box; }

.karta {
  width: 100%;
  max-width: 32rem;
  padding: 16px 20px;
  border: 1px solid #cbd5e1;
  margin: 0 auto;
}
```

Qisqa yozuv tartibi: `top right bottom left`.

```css
padding: 8px 12px 16px 20px;
margin: 16px 24px; /* vertikal, gorizontal */
```

## Display va yashirish

```css
.blok { display: block; }
.satr { display: inline; }
.olchamli-satr { display: inline-block; }
.yashirin { display: none; }
.joyi-qoladi { visibility: hidden; }
```

`display: none` elementni accessibility tree'dan ham olib tashlaydi. Interaktiv
menyuni yashirishda ochish tugmasi, `aria-expanded` va fokus boshqaruvi kerak.

## Flexbox

```css
.qator {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.element {
  flex: 1 1 220px;
}
```

- `justify-content` — main o'q bo'ylab taqsimlaydi.
- `align-items` — cross o'q bo'ylab tekislaydi.
- `flex-wrap` — itemlarni yangi qatorga o'tkazadi.
- `gap` — itemlar orasidagi masofa.

## Grid

```css
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.keng {
  grid-column: span 2;
}

.avtomatik-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
```

Grid qator va ustunni birgalikda boshqarishda, Flexbox esa ko'pincha bitta
asosiy o'q bo'ylab joylashtirishda qulay. Tanlovni element soniga emas,
layout vazifasiga qarab qiling.

## Position va qatlam

```css
.ota { position: relative; }

.belgi {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
}

.sarlavha {
  position: sticky;
  top: 0;
  z-index: 2;
}
```

`absolute` eng yaqin containing blockka, `fixed` odatda viewportga bog'lanadi.
Katta `z-index` boshqa stacking context ustidan avtomatik chiqmaydi.

## Responsive dizayn

HTML `head` qismida:

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

Moslashuvchan rasm va o'lcham:

```css
img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}
```

Kontentga asoslangan breakpoint:

```css
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 700px) {
  .layout {
    grid-template-columns: 1fr;
  }
}
```

## Tez debugging tartibi

1. Selektor elementga mos kelayotganini DevToolsda tekshiring.
2. Xossa ustidan chiziq o'tgan bo'lsa, qaysi qoida yutganini toping.
3. `Computed` panelida yakuniy qiymat va box modelni ko'ring.
4. Ota elementning display, width va overflow qiymatini tekshiring.
5. Tor ekran, 200% zoom va klaviatura fokusini sinang.

Keyingi sahifada [CSS quiz](https://learncode.uz/html-css/css-quiz) orqali xossalarni amaliy
vaziyatlarda tanlashni tekshirasiz.