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: 020-21
Bajardi: Yangaboyev M

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):