CSS nima va uni qanday usullarda ulash mumkin?

Savol

CSS nima, u nima uchun kerak va uni HTML'ga qanday usullarda ulash mumkin?

Qisqa javob

CSS (Cascading Style Sheets) — HTML-hujjatning tashqi ko'rinishini tasvirlash tili: ranglar, bo'shliqlar, shriftlar, elementlarning joylashuvi. Stillarni uchta usulda ulash mumkin: style inline-atributi orqali, hujjat ichidagi <style> tegi orqali yoki <link> orqali tashqi fayl sifatida.

Batafsil javob

CSS ko'rinishni hujjat strukturasidan ajratadi: HTML mazmun va semantikani tasvirlaydi, CSS esa — bu mazmun qanday ko'rinishini. Bir xil HTML'ni butunlay boshqacha ko'rinishga keltirish mumkin, shunchaki boshqa stillar to'plamini ulash orqali.

Ulashning uchta usuli:

• Inline stillar (style="color: red") — tegning atributida to'g'ridan-to'g'ri belgilanadi. Kaskadda maksimal og'irlikka ega, ammo ularni qayta ishlatib bo'lmaydi va qo'llab-quvvatlash qiyin. Faqat JS orqali nuqtali dinamik o'zgartirishlar uchun mos keladi.
• Ichki stillar (<head> ichidagi <style>...</style>) — faqat bitta sahifa doirasida ishlaydi. Kichik demolar yoki birinchi renderni tezlashtirish uchun joylanadigan kritik CSS uchun qulay.
• Tashqi fayl (<link rel="stylesheet" href="styles.css">) — stillar alohida .css-faylga chiqarilgan. Real loyihalardagi asosiy usul: brauzer faylni keshlaydi, stillar barcha sahifalarda qayta ishlatiladi, qo'llab-quvvatlash va modullarga bo'lish osonroq.

CSS qoidasining asosiy sintaksisi:

selektor {
  xususiyat: qiymat;
  xususiyat: qiymat;
}

Selektor qoida qaysi elementlarga qo'llanilishini ko'rsatadi, jingalak qavslar ichidagi tana esa nuqta-vergul bilan ajratilgan "xususiyat: qiymat" juftliklari to'plamidir. Selektorlar teg bo'yicha (p), klass bo'yicha (.card), id bo'yicha (#header), atribut bo'yicha ([type="text"]), shuningdek ularning kombinatsiyasi bo'yicha bo'ladi.

Misol

/* tashqi fayl styles.css, <link> orqali ulanadi */

/* teg bo'yicha */
p {
  margin: 0 0 16px;
}

/* klass bo'yicha */
.card {
  padding: 16px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

/* id bo'yicha */
#main-header {
  font-size: 24px;
}

/* atribut bo'yicha */
input[type="email"] {
  border: 1px solid #ccc;
}

<!-- inline -->
<p style="color: red;">Matn</p>

<!-- ichki stillar -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>

<!-- tashqi fayl -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Qo'shimcha savollar

• Agar turli manbalardan olingan stillar bir-biriga zid bo'lsa, brauzer ularni qanday tartibda qo'llaydi?
• Nega prodakshinda inline stillar yomon amaliyot hisoblanadi?
• Kritik CSS nima va nega u <head>ga inline qilinadi?