Matn psevdoelementlari
Matn uchun psevdo-elementlar
Matn uchun psevdo-elementlar matn kontentining muayyan qismlarini — birinchi qator yoki birinchi harf kabi — uslublash imkonini beradi.
CSS ::first-line psevdo-elementi
::first-line psevdo-elementi matnning birinchi qatoriga maxsus uslub berish uchun ishlatiladi.
Eslatma: ::first-line psevdo-elementi faqat blok-darajali elementlarga qo‘llanilishi mumkin.
Misol
Barcha <p> elementlaridagi matnning birinchi qatorini formatlash:
p::first-line
{
color: red;
font-variant: small-caps;
font-size: 19px;
}
O‘zingiz sinab ko‘ring »
CSS ::first-letter psevdo-elementi
::first-letter psevdo-elementi matnning birinchi harfiga maxsus uslub berish uchun ishlatiladi.
Eslatma: ::first-letter psevdo-elementi faqat blok-darajali elementlarga qo‘llanilishi mumkin.
Misol
Barcha <p> elementlaridagi matnning birinchi harfini formatlash:
p::first-letter
{
color: red;
font-size: xx-large;
}
O‘zingiz sinab ko‘ring »
Psevdo-elementlar va HTML klasslari
Psevdo-elementlarni HTML klasslari bilan oson birlashtirish mumkin.
Misol
class="intro" li <p> elementlarining birinchi harfini qizil rangda va kattaroq o‘lchamda ko‘rsatish:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
O‘zingiz sinab ko‘ring »
Bir nechta psevdo-elementlar
Bir nechta psevdo-elementlarni birlashtirish ham mumkin.
Quyidagi misolda <p> elementlarining birinchi harfi qizil rangda va xx-large shrift o‘lchamida bo‘ladi. Birinchi qatorning qolgan qismi ko‘k rangda va small-caps ko‘rinishida bo‘ladi. Paragrafning qolgan qismi standart shrift o‘lchami va rangda bo‘ladi:
Misol
p::first-letter
{
color: red;
font-size: xx-large;
}
p::first-line
{
color: blue;
font-variant: small-caps;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!