O’zbekiston Respublikasi Axborot Texnologiyalari va Кommunikatsiyalarini Rivojlantirish Vazirlig

O’zbekiston Respublikasi Axborot Texnologiyalari va

Кommunikatsiyalarini Rivojlantirish Vazirlig

Muhammad Al-Xorazmiy nomidagi

Toshkent Axborot Texnologiyalari Universiteti.

MUSTAQIL ISH


Mavzu: CSS Pseudo-klasslari

Guruh: 650-19

Bajardi: G’aniyev B

Tekshirdi: Rayimqulov O’

Toshkent 2021

Reja:

1. 
   Psevdo-sinflar
   
2. 
   Anchor Pseudo-klasslar
   
3. 
   Barcha CSS Pseudo Elements
   

Psevdo-sinflar nima?

Elementning maxsus holatini aniqlash uchun psevdo-klass ishlatiladi.

Masalan, u quyidagilar uchun ishlatilishi mumkin:

• 
  Agar foydalanuvchi sichqonchani bosganda elementni uslubi
  
• 
  Stil tashrif buyurgan va ko'rilmagan havolalarni turlicha
  
• 
  Fokusga tushganda elementga uslub bering
  

Sintaksis

Psevdo-sinflar sintaksisi:

selector:pseudo-class {

  property: value;
}

Anchor Pseudo-klasslar

Havolalar turli xil ko'rinishda ko'rsatilishi mumkin:

Misol

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */

a:visited {
  color: #00FF00;
}

/* mouse over link */

a:hover {
  color: #FF00FF;
}

/* selected link */

a:active {
  color: #0000FF;
}

O'zingiz sinab ko'ring »

Izoh: samarali bo'lishi uchun CSS ta'rifidan a:hoverkeyin a:linkva keyin a:visitedkelishi kerak! Samarali bo'lishi uchun CSS ta'rifidan a:activekeyin KELISHI KERAK a:hover! Psevdo-klass nomlari kichik-kichik harflarga bog'liq emas.

Soxta darslar va CSS darslari

Soxta darslarni CSS sinflari bilan birlashtirish mumkin:

Misoldagi havola ustiga o'tsangiz, u rangni o'zgartiradi:

Misol

a.highlight:hover {

  color: #ff0000;
}

O'zingiz sinab ko'ring »

ustiga olib boring

:hover

elementida psevdo-klassdan foydalanish misoli :

Misol

div:hover {

  background-color: blue;
}

O'zingiz sinab ko'ring »

Oddiy maslahat uchun sichqoncha

elementini ko'rsatish uchun

elementi ustiga suring (masalan, asboblar maslahati kabi):