Selectorlar misol


Download 60.1 Kb.
bet3/3
Sana21.06.2023
Hajmi60.1 Kb.
#1637875
1   2   3
Bog'liq
web dedline2

Masalan: a:hover { color: red; }
Universal Selector: Barcha elementlarni tanlash uchun ishlatiladi. "*"-ga teng edi. Masalan: * { margin: 0; padding: 0; }
CSS-da oziga hoslik (specificity) selectorlar belgilashdagi tartibga asoslangan hisoblash tizimi hisoblanadi. Bu tizimda, birinchi tartib element selectorlari uchun, ikkinchi tartib class selectorlari uchun, uchinchi tartib ID selectorlari uchun hisoblanadi.
Specificity tartibini aniqlash uchun, her bir selector uchun belgilangan hoslik qiymatlari bor. Hoslik qiymatlari, bitta selector uchun bitta qiymatdan iborat boʻladi. Hoslik tartibidagi qiymatlar quyidagi koʻrinishda yoziladi:

  • Element Selectorlari: 0, 0, 1

  • Class Selectorlari: 0, 1, 0

  • ID Selectorlari: 1, 0, 0

  • Inline Styles: 1, 0, 0, 0

Bu tartibda, birinchi qiymat ID selectorlariga mos keladi, ikkinchi qiymat class selectorlari uchun mos keladi va uchinchi qiymat element selectorlari uchun mos keladi. Bu tartibni hisoblash uchun, belgilangan selectorlar uchun belgilangan qiymatlarni qoʻshish kerak.
Misol uchun, `.container` class selectori uchun hoslik qiymatlari 0, 1, 0 va
`#header` ID selectori uchun hoslik qiymatlari 1, 0, 0 boʻladi. Agar `.container` class selectori va `#header` ID selectori bir xil element uchun ishlatilsa, `#header`
ID selectori belgilagan hoslik tartibida birinchi oʻrinda turadi, shuningdek, `.container` class selectori ikkinchi oʻrinda turadi. Shuningdek, inline stil qoʻllash xususiyatlari, element selectorlari va class selectorlari bilan birgalikda ishlatilsa, inline stil qoʻllash xususiyatlari belgilangan hoslik tartibida birinchi oʻrinda turadi.
Hoslik tartibini tushuntirish uchun quyidagi namunalar ishlatilishi mumkin:

  • `#header` → 1, 0, 0

  • `#header .container` → 1, 1, 0

  • `div#header .container p` → 1, 1, 2

  • `.container p` → 0, 1, 1

  • `div p` → 0, 0, 2

Bu tartibdagi hoslik qiymatlari belgilangan selectorlarning toʻplam hosligini aniqlash uchun ishlatiladi. Hoslik tartibi CSS-da qoʻllaniladigan eng muhim konseptlardan biridir, chunki u holda, turli selectorlar va stil qoʻllash xususiyatlari ishlatilganda hoslik mohiyatini tushuntirish uchun oʻz-oʻziga mos keladigan qoida hisoblangan
Quyidagi dastur kodida, CSS-da tanlab oluvchilar (selectors) bilan bir nechta HTML elementlari uchun stil qoʻllash koʻrsatilgan:
```html


Selectorlar misol



Element Selector uchun misol

Class Selector uchun misol


ID Selector uchun misol



Hover qilinganda rang oʻzgaradi
ector uchun misol -->

  • Birinchi element

  • Ikkinchi element

  • Uchinchi element



Bu paragraf stil qoʻllash uchun belgilanmagan

Bu paragraf stil qoʻllash uchun belgilangan


Download 60.1 Kb.

Do'stlaringiz bilan baham:
1   2   3




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling