MohirDox

Ko'rinishi

Elementlarni tanlash ​

CSS selektorlar HTML elementlarini tanlash (yoki topish) uchun ishlatiladi va ularni stilizatsiya qilish imkonini beradi.

CSS selektorlarini besh asosiy toifaga bo'lish mumkin:

  • Oddiy selektorlar (element nomi, id, class asosida tanlaydi)
  • Kombinator selektorlar (elementlar o'rtasidagi munosabatga asoslanadi)
  • Pseudo-class selektorlar (elementning holatiga qarab tanlaydi)
  • Pseudo-element selektorlar (elementning bir qismini tanlaydi va stil beradi)
  • Attribute selektorlar (atribut yoki atribut qiymati asosida tanlaydi)

Quyida eng asosiy CSS selektorlar haqida ma'lumot beriladi.

Element Selektori ​

Element selektori HTML elementlarini ularning nomi bo'yicha tanlaydi.

Misol:

css
p {
    text-align: center;
    color: red;
}

Yuqoridagi kod barcha <p> elementlarini markazga joylashtiradi va matn rangini qizil qiladi.

ID Selektori ​

ID selektori HTML elementini uning id atributi orqali tanlaydi.

ID har bir sahifada yagona bo'lishi kerak, shuning uchun ID selektori faqat bitta elementni tanlaydi.

ID selektorini yozishda # belgisi va id nomi ishlatiladi.

Misol:

css
#para1 {
    text-align: center;
    color: red;
}

Bu kod faqat id="para1" bo'lgan elementga ta'sir qiladi.

Eslatma: ID nomi raqam bilan boshlanmasligi kerak!

Class Selektori ​

Class selektori HTML elementlarini class atributi orqali tanlaydi.

Class selektorini yozishda . belgisi va class nomi ishlatiladi.

Misol:

css
.center {
    text-align: center;
    color: red;
}

Bu kod barcha class="center" bo'lgan elementlarni markazga joylashtiradi va qizil rang beradi.

Faqat ma'lum bir elementni class orqali tanlash ham mumkin:

Misol:

css
p.center {
    text-align: center;
    color: red;
}

Bu kod faqat <p class="center"> elementlariga ta'sir qiladi.

HTML element bir nechta classga ega bo'lishi mumkin:

Misol:

html
<p class="center large">Bu paragraf ikki classga ega.</p>

Eslatma: Class nomi ham raqam bilan boshlanmasligi kerak!

Universal Selektor ​

Universal selektor (*) sahifadagi barcha HTML elementlarni tanlaydi.

Misol:

css
* {
    text-align: center;
    color: blue;
}

Bu kod barcha elementlarni markazga joylashtiradi va matn rangini ko'k qiladi.

Guruhlash Selektori ​

Guruhlash selektori bir nechta elementlarni bir xil stil bilan tanlash uchun ishlatiladi.

Quyidagi kodda h1, h2 va p elementlari bir xil stilga ega:

css
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

Kod qisqaroq bo'lishi uchun selektorlarni vergul bilan guruhlash mumkin:

Misol:

css
h1, h2, p {
    text-align: center;
    color: red;
}