Bu modulda elementlarni CSS uchun "nishonga olish" o’rganildi: id va class atributlari, block/inline farqi hamda div va span konteynerlari.
ID selektori
id atributi elementga sahifada yagona nom beradi; CSS’da unga # orqali murojaat qilinadi:
<style>
#asosiy-sarlavha { color: green; }
</style>
<h1 id="asosiy-sarlavha">Yashil sarlavha</h1>
Natija: sarlavha yashil rangda.
Qoida: bitta id qiymati sahifada faqat bir marta ishlatiladi.
Tipik xato. Bir xil idni ikki elementga berish. Brauzer xato ko’rsatmaydi, hatto uslub ham ishlagandek tuyuladi — lekin bunday sahifada JavaScript faqat birinchi elementni topadi va keyin soatlab bosh qotirasiz.
Class selektori
class — takrorlanadigan nom: bitta uslubni istalgancha elementga qo’llash mumkin. CSS’da nuqta bilan yoziladi:
<style>
.muhim { color: red; font-weight: bold; }
</style>
<p class="muhim">Diqqat!</p>
<p>Oddiy matn.</p>
<p class="muhim">Yana muhim xabar.</p>
Natija: birinchi va uchinchi xatboshi qizil va qalin, o’rtadagisi oddiy.
Bir elementga probel bilan bir nechta class berish mumkin — har biri o’z uslubini olib keladi:
<style>
.muhim { color: red; }
.katta { font-size: 24px; }
</style>
<p class="muhim katta">Ham qizil, ham katta.</p>
Natija: xatboshi ikkala class uslubini birdan oladi.
Selektorlarni aniqlashtirish ham mumkin: p.muhim — faqat muhim class’iga ega xatboshilarga qo’llanadi, boshqa tegdagi muhimlarga tegmaydi.
id |
class |
|
|---|---|---|
| Selektor | #nom |
.nom |
| Sahifada nechta element | Faqat bitta | Istalgancha |
| Bir elementda nechta | Bitta | Bir nechta (probel bilan) |
Tipik xato. CSS’da belgini tushirib qoldirish: .muhim o’rniga muhim { ... } yozilsa, bu teg selektoriga aylanadi va brauzer <muhim> degan tegni qidiradi — uslub jimgina ishlamaydi.
Block va inline elementlar
Har bir element oqimda ikki xil "fe’l-atvor"dan biriga ega:
| Block | Inline | |
|---|---|---|
| Egallaydigan joy | Butun qator kengligi | Faqat kontenti sig’adigan joy |
| Yangi qatordan boshlanadimi | Ha | Yo’q |
| Misollar | <div>, <p>, <h1>, <ul>, <table> |
<span>, <a>, <strong>, <img> |
<p>Bu <span style="color: red;">qizil so’z</span> matn ichida turibdi.</p>
<div style="background-color: #eee;">Div esa butun qatorni egallaydi.</div>
Natija: qizil so’z gap ichida davom etadi; div esa alohida, chetdan chetgacha cho’zilgan kulrang qator bo’lib chiqadi.
Ikkita amaliy oqibat: inline elementga width/height berib bo’lmaydi (u faqat kontenti sig’adigan joyni oladi), block elementlar esa yonma-yon turmaydi — har biri yangi qatorni "talab qiladi". <img> — qiziq istisno: inline bo’lsa ham o’lcham oladi. Elementlarni yonma-yon terish usullari (flexbox va boshqalar) CSS kursida o’rganiladi.
div va span
Ikkalasi ham "ma’nosiz" konteyner: o’zicha hech narsani o’zgartirmaydi, elementlarni guruhlash va ularga class/id orqali uslub berish uchun ishlatiladi. Farqi bitta: <div> — block, <span> — inline. Qoidasi ham shundan kelib chiqadi: butun bo’limni o’rash kerak bo’lsa — div, gap ichidagi bir-ikki so’zni — span.
Odatiy namuna — "karta" strukturasi:
<div class="karta">
<h3>HTML kursi</h3>
<p>Boshlovchilar uchun <span class="urgu">bepul</span> kurs.</p>
</div>
karta class’iga fon, chegara va ichki bo’shliq berilsa, shu strukturani istalgancha takrorlab bir xil ko’rinishdagi kartalar hosil qilinadi — sayt kataloglari aynan shunday quriladi.
Amaliyot
- "Yangiliklar" sahifasi tuzing: har bir yangilik
class="yangilik"berilgan<div>ichida, hammasi bir xil uslubda. - Eng muhim yangilikka
id="asosiy"berib, uni boshqa rang bilan ajrating. - Xatboshilar ichidagi muhim so’zlarni
<span class="urgu">bilan belgilab, sariq fon bering. - Uchta
<div>va uchta<span>ketma-ket yozib, ularning qanday joylashishini kuzating — block va inline farqi ko’z oldingizda bo’ladi.
Testdan so’ng formalar moduliga o’ting — u yerda foydalanuvchidan ma’lumot olish o’rganiladi.