1-dars

CSS Asoslari

CSS — bu HTML elementlarga qanday ko'rinishda bo'lishini aytib beradigan til. Bu darsda CSS'ning asosiy tushunchalari va qanday ishlashini o'rganamiz.

1. CSS nima va u nima uchun kerak?

Bu nima?

CSS — bu HTML elementlarga qanday ko'rinishda bo'lishini aytib beradigan til.

HTML:

• nima borligini aytadi (matn, tugma, rasm)

CSS:

• u qanday ko'rinishini aytadi (rang, joylashuv, o'lcham)

Nega kerak?

Agar CSS bo'lmasa:

• hamma matn bir xil
• sahifa xunuk va tushunarsiz bo'ladi

CSS yordamida:

• rang beramiz
• elementlarni joylashtiramiz
• sahifani chiroyli qilamiz

Eng oddiy misol

p {
  color: red;
}

Bu barcha <p> matnlarni qizil qiladi.

Xulosa

CSS — sahifaning ko'rinishi uchun javobgar.

2. CSS qayerga yoziladi? (inline, style, file)

Bu nima?

CSS'ni HTML'ga ulashning 3 ta yo'li bor.

1-usul: Inline CSS

<p style="color: red;">Hello</p>

👉 Ishlaydi, lekin yomon usul.

2-usul: <style> ichida

<style>
  p {
    color: red;
  }
</style>

👉 Kichik sahifalarda bo'lishi mumkin.

3-usul: Alohida .css fayl

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

👉 ENG TO'G'RI USUL.

Xulosa

Real loyihada CSS har doim alohida faylda bo'ladi.

3. CSS qanday o'qiladi? (selector + property + value)

Bu nima?

CSS qoida bilan ishlaydi.

Qoida 3 qismdan iborat:

1. Selector — qaysi element
2. Property — qanday xususiyat
3. Value — qanday qiymat

Misol

p {
  color: blue;
}

• p — selector
• color — property
• blue — value

Xulosa

CSS = "Qaysi element + Qanday bo'lsin".

4. Class nima va nega kerak?

Bu nima?

Class — elementlarni nomlab, ularga style berish usuli.

Misol

HTML:

<p class="text">Hello</p>

CSS:

.text {
  color: red;
}

Nega kerak?

Agar 10 ta <p> bo'lsa va faqat bittasini bezamoqchi bo'lsang — class ishlatasan.

Xulosa

Class — CSS'ning asosiy quroli.

5. ID nima va nega kam ishlatiladi?

Bu nima?

ID — bitta element uchun yagona nom.

Misol

<p id="title">Hello</p>

#title {
  color: blue;
}

Nega kam ishlatiladi?

• Juda kuchli
• Keyin o'zgartirish qiyin

Xulosa

CSS'da ko'pincha class, kamdan-kam id ishlatiladi.

6. Bir nechta bir xil CSS code bo'lsa nima bo'ladi?

Bu nima?

Bir elementga bir nechta style yozilishi mumkin.

Misol

p {
  color: red;
}

p {
  color: blue;
}

👉 Oxirgisi ishlaydi.

Xulosa

CSS yuqoridan pastga o'qiladi.

7. Brauzer default style degani nima?

Bu nima?

Brauzer elementlarga o'zi style berib qo'yadi.

Masalan:

• <h1> katta
• <p> da margin bor

Misol

Sen CSS yozmasang ham sahifa chiroyliroq ko'rinadi — bu default style sababli.

Xulosa

Brauzer CSS'ni noldan boshlamaydi.

8. CSS buyruq emas

Bu nima?

CSS:

• "shuni qil" demaydi
• "agar mos kelsa, shunaqa bo'lsin" deydi

Oddiy misol

p {
  color: red;
}

Agar <p> bo'lsa — qizil bo'ladi. Bo'lmasa — hech narsa bo'lmaydi.

Xulosa

CSS majburlamaydi, taklif qiladi.

9. CSS'ni to'g'ri o'rganish qanday bo'ladi?

CSS'ni yodlab emas, tushunib o'rganiladi.

To'g'ri yo'l

1. Avval: bu nima?
2. Keyin: qanday ishlaydi?
3. Keyin: qayerda muammo chiqadi?

Xulosa

CSS — murakkab emas. Uni sekin va to'g'ri ketma-ketlikda o'rganish kerak.