CSS cheatsheet — asosiy xossalar

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

CSS qoidasining shakli

selektor {
  xossa: qiymat;
}

Tashqi CSS faylni HTMLga ulash:

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

Selektorlar

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

.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

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

* { 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.

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

Display va yashirish

.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

.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

.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

.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:

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

Moslashuvchan rasm va o’lcham:

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

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

Kontentga asoslangan breakpoint:

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

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

Tez debugging tartibi

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

Keyingi sahifada CSS quiz orqali xossalarni amaliy vaziyatlarda tanlashni tekshirasiz.