CSS psevdoelement tanlangan element(lar)ning ma’lum bir qismini uslublash imkonini beruvchi selektorga qo‘shilgan kalit so‘zdir. Masalan, ::birinchi qatordan paragrafning birinchi qatori shriftini o'zgartirish uchun foydalanish mumkin.
/* Har birining birinchi qatori
Element. */ p::birinchi qator (rang: ko'k; matnni o'zgartirish: katta harf; )
Sintaksis
selektor :: pseudo-element ( xususiyat: qiymat; )Selektorda faqat bitta psevdoelementdan foydalanishingiz mumkin. U bayonotdagi oddiy selektorlardan keyin paydo bo'lishi kerak.
Eslatma: Qoidaga ko'ra, bitta ikki nuqta (:) o'rniga qo'sh nuqta (::) qo'llanilishi kerak. Bu psevdosinflarni psevdoelementlardan ajratib turadi. Biroq, bu farq W3C spetsifikatsiyasining eski versiyalarida mavjud bo'lmaganligi sababli, ko'pchilik brauzerlar asl psevdo-elementlar uchun ikkala sintaksisni ham qo'llab-quvvatlaydi.
Standart psevdoelementlar indeksi
| Brauzer | Eng past versiya | ni qo'llab-quvvatlash |
|---|---|---|
| Internet Explorer | 8.0 | :psevdoelement |
| 9.0 | ||
| Firefox (Gecko) | 1.0 (1.0) | :psevdoelement |
| 1.0 (1.5) | :pseudo-element::pseudo-element | |
| Opera | 4.0 | :psevdoelement |
| 7.0 | :pseudo-element::pseudo-element | |
| Safari (WebKit) | 1.0 (85) | :pseudo-element::pseudo-element |
Muallifdan: CSS psevdoelementlar modulining 4-darajali spetsifikatsiyasi mavjud soxta elementlarning xatti-harakatlarini yoritib beradi va yangilarini kiritadi. Biroq, so'nggi brauzerlarda faqat bir nechta yangi psevdo-elementlar qo'llab-quvvatlanadi.
Bugun biz quyidagi psevdoelementlar haqida gaplashamiz:
::befor - yaratilgan tarkibni element tarkibidan oldin kiritadi
::after - yaratilgan tarkibni element tarkibidan keyin qo'shadi
::first-letter - elementning birinchi harfini tanlaydi
::first-line - elementning birinchi qatorini tanlaydi
::selection - kursor tomonidan tanlangan matnni uslublaydi
Ulardan ::birinchi-harf, ::birinchi-satr va::tanlash elementlari manbalarga kiritilgan tarkibga ta'sir qiladi. Pseudo-elementlar::oldin va::after, aksincha, hujjatga manba kodida bo'lmagan tarkibni kiriting. Keling, barcha psevdoelementlarni batafsil ko'rib chiqaylik.
Eslatma: bitta ikki nuqta sintaksisi
Siz eski CSS-da ::birinchi-harf, ::birinchi-satr, ::oldin va ::keyinning bitta vergulli versiyalarini ko'rgan bo'lishingiz mumkin. CSS2 da bu psevdo-elementlar bir martalik ikki nuqta yordamida ko'rsatilgan:. IE8 bitta ikki nuqta sintaksisini talab qiladi, ammo boshqa brauzerlarning ko'pchiligi ikkalasini ham qo'llab-quvvatlaydi. Ikki nuqta sintaksisidan foydalanish yaxshidir.
Pseudo-elementlar::oldin va::keyin
Aksariyat pseudo-elementlar hujjat manbasida mavjud bo'lgan, lekin tilda ko'rsatilmagan (boshqacha qilib aytganda, HTML) kontentni tanlash imkonini beradi. Biroq, ::oldin va::ishdan keyin boshqacha. Ushbu psevdoelementlar yaratilgan tarkibni hujjat daraxtiga qo'shadi. Yaratilgan kontent HTML manbasida mavjud emas, lekin u ko'rsatiladi.
Nima uchun yaratilgan kontentdan foydalaniladi? Masalan, kerakli shakl maydonlarini teglardan keyin tarkib qo'shish orqali belgilashingiz mumkin:
/* Kerakli maydon bilan bog'langan yorliq uchun amal qiladi */ .required::after (kontent: " (Majburiy) "; rang: #c00; shrift o'lchami: .8em; )
Kerakli forma maydonida kerakli HTML xususiyatidan foydalanishingiz kerak. Ushbu ma'lumot DOMda allaqachon mavjud bo'lganligi sababli, ::befor va::after yordamchi sifatida harakat qiladi. Bu muhim kontent emas, shuning uchun u manba kodiga kiritilmasligi mumkin.
Eslatma: yaratilgan kontent va mavjudlik
Ba'zi ekran o'qiydiganlar va brauzerlar yaratilgan kontentni taniydi va o'qiydi, lekin ko'pchilik buni tanimaydi. Nogiron foydalanuvchilar uchun yaratilgan kontentni taqdim etish uchun ::oldin va ::so‘ng psevdoelementlardan foydalanmang. Bu masalani batafsilroq Leoni Uotsonning “CSS-da yaratilgan kontentga kirish imkoniyatini qo‘llab-quvvatlash” maqolasida o‘rganishingiz mumkin.
::befor va::after dan foydalanishning yana bir usuli - tarkibga prefiks yoki qo'shimcha qo'shish. Yuqoridagi shakl quyida ko'rsatilgandek yordamchi matndan foydalanishi mumkin:
< form method = "post" action = "/save" > < fieldset > < legend >Parolingizni o'zgartiring< / legend > < p > < label for = "password" >Yangi parolni kiriting< / label > < input type = "password" id = "password" name = "password" > < / p > < p > < label for = "password2" >Parolingizni qayta kiriting< / label > < input type = "password" id = "password2" name = "password2" > < / p > < p class = "helptext" >Uzunroq parollar kuchliroq.< / p > < p > < button type = "submit" >O'zgarishlarni saqlang< / button > < / p > < / fieldset > < / form > |
Yordamchi matnimizni ::before va ::after yordamida juft qavs ichiga kiritamiz.
Yordam matni::oldin (kontent: "("; ) .helptext::so'ng (kontent: ")"; )
Yordam matni::oldin( tarkib: "(" ; Yordam matni::keyin ( tarkib: ")" ; |
Natija.
Ehtimol, ::before va ::after dan foydalanishning eng foydali usuli suzuvchi elementlarni tozalashdir. Nikolas Gallager o'zining "yangi micro clearfix hack" postida ushbu texnikani (Tierri Koblentz ishiga asoslangan) taqdim etdi:
/* IE qo'llab-quvvatlash uchun<= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }
Suzilgan elementdan keyin tozalanishi kerak bo'lgan har qanday elementga clearfix sinfini qo'shing.
::oldin va ::so’ng psevdo-sinflar o’zini butunlay ular biriktirilgan tegning bolalari kabi tutadi. Ular ota-onaning barcha mumkin bo'lgan xususiyatlarini meros qilib oladi va ota-ona blokining ichida joylashgan. Ular, shuningdek, boshqa blok elementlari bilan xuddi haqiqiy teglar kabi o'zaro aloqada bo'lishadi. Displey: blok yoki displey: jadval xususiyatlari :: oldin va :: ishlagandan keyin boshqa elementlardagi kabi.
Ogohlantirish: har bir selektor uchun bitta psevdo element
Hozirda har bir selektorga faqat bitta psevdoelementga ruxsat berilgan. Ya'ni, p::first-line::befor kabi yozuv noto'g'ri.
Tipografik effektlarni yaratish:birinchi harf
::oldin va ::so'ng psevdoelementlar tarkibni kiritadi va ::birinchi harf manbalarda allaqachon yozilgan kontent bilan ishlaydi. Uning yordami bilan siz jurnal va kitoblarda ko'rgan bo'lishingiz mumkin bo'lgan birinchi harf yoki qopqoq effektini yaratishingiz mumkin.
Eslatma: birinchi harf va bosh harflar
Birinchi harf effekti matn boshida katta harf bo'lib, unga matnning qolgan qismiga nisbatan kattaroq shrift o'lchami beriladi. Qopqoq qalpoq birinchi harfga o'xshaydi, lekin tushirish qopqog'i kamida ikkita satrning birinchi xatboshiga kiritiladi.
Quyidagi uslublar hujjatdagi barcha p paragraflarga birinchi bosh harfni qo'shadi:
p::birinchi harf (shrift-family: serif; shrift-og'irligi: qalin; shrift o'lchami: 3em; shrift uslubi: kursiv; rang: #3f51b5; )
p::birinchi harf( shrift - oilasi: serif; shrift - vazni: qalin; shrift o'lchami: 3em; shrift uslubi: kursiv; rang: #3f51b5; |
Skrinshotdan ko'rish mumkinki, agar elementga birliklarsiz satr balandligi qiymati berilgan bo'lsa, ::first-harfi birinchi qatorning satr balandligini o'zgartiradi. Bunday holda, barcha p teglar tana tegidan 1,5 chiziq balandligi qiymatini meros qilib oladi.
Ushbu muammoni hal qilishning uchta usuli mavjud:
::birinchi harfli psevdoelement uchun satr balandligi qiymatini kamaytiring, .5 qiymati deyarli har doim ishlaydi;
psevdo-element uchun birliklar bilan chiziq balandligini belgilang::birinchi-harf;
tana yoki ota-ona::birinchi-harf uchun birliklar bilan chiziq balandligini o'rnating.
Birinchi variant vertikal ritmni saqlab qoladi, xuddi birliklarsiz chiziq balandligi qiymatida bo'lgani kabi. Ikkinchi variant soxta elementlarning o'zlari uchun sobit chiziq balandligining yon ta'sirini cheklaydi. Uchinchi variant - eng yomoni, siz qo'shimcha CSS kodi yordamida qayta yozishingiz kerak bo'lgan yon ta'sirni yaratishingiz ehtimoli yuqori.
Bizning holatda p::first-harf uchun satr balandligi qiymatini .5 ga kamaytiramiz (va fayldagi xususiyatlarni qayta yozamiz, biz stenografiya shrifti xususiyatidan foydalanamiz):
p::birinchi harf (shrift: qalin kursiv 3em / .5 serif; rang: #3f51b5; )
p::birinchi harf( rang: #3f51b5; |
Natijani quyida ko'rish mumkin. Shuni yodda tutingki, biz p::birinchi harfdagi satr balandligining pasaytirilgan qiymatini qoplash uchun har bir p-bandning pastki chetini sozlashimiz kerak edi.
Katta harflarni yaratish uchun sizga CSS-ning biroz ko'proq qatorlari kerak bo'ladi. Birinchi bosh harflardan farqli o'laroq, tomchi qalpoqning qo'shni matni uning atrofiga o'raladi. Ya'ni, float qo'shishimiz kerak: chap; bizning uslublarimizga kiradi. Shuningdek, biz yuqori, o'ng va pastki chetlarni qo'shamiz:
p::birinchi harf (shrift: qalin kursiv 3em / .5 serif; shrift uslubi: kursiv; rang: #607d8b; float: chap; chet: 0,2em 0,25em .01em 0; )
p::birinchi harf( shrift: qalin kursiv 3em / . 5 serif; shrift uslubi: kursiv; rang: #607d8b; float: chap; chegara: 0,2em 0,25em. 01em 0; |
Suzilgan element yoki bizning holatlarimizda psevdo element, quyida ko'rsatilganidek, matnning qolgan qismini o'rashga olib keladi.
Agar siz o'lchamlar, chekka va chiziq balandligini o'rnatish uchun px yoki rem dan foydalanmasangiz, barcha brauzerlarda ::birinchi harfni mukammal tarzda shakllantirish juda qiyin bo'ladi.
Ba'zan matn elementining birinchi harfi tinish belgisidir. Masalan, iqtibos bilan boshlangan yangiliklar:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit." Fusce odio leo, sollicitudin va mattis eget, ...
< p > & #8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin va mattis eget, ... |
Bunday holda, ::birinchi harf uchun uslublar quyida ko'rsatilganidek, ham bosh qo'shtirnoq, ham birinchi harf uchun qo'llaniladi. Uslublar barcha brauzerlarda bir xil qo'llaniladi.
Biroq, tinish belgilari element tomonidan yaratilganda, natija boshqacha bo'ladi. Quyidagi belgini ko'rib chiqing:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce odio leo, sollicitudin vel mattis eget, iaculis sit...
< p > < q >Lorem ipsum dolor sit amet, consectetur adipiscing elit.< / q >Fusce odio leo, sollicitudin vel mattis eget, iaculis o'tiribdi. . .< / p > |
Hozirda brauzerlar q tegini tilga xos tirnoq sifatida ko‘rsatadi, ular ochiladi va yopiladi. Biroq, barcha brauzerlar bunday tirnoq belgilarini bir xil tarzda tanimaydilar. Firefox 42 (pastga qarang), Safari 8 va undan oldingi versiyalarida, ::birinchi harf faqat ochilish tirnoqini o'zgartiradi.
Chrome, Opera va Yandex-da q tegining ochilish tirnoqi va paragrafning birinchi harfi uslublanmagan. Quyida Chrome brauzerida skrinshot mavjud.
IE uslublarni paragrafning bosh harfiga ham, birinchi harfiga ham qo'llaydi. Pastga qarang.
CSS Pseudo-element modulining 4-darajali spetsifikatsiyasi birinchi harf yoki belgidan oldingi yoki darhol keyingi tinish belgilarini uslublash kerakligini bildiradi. Biroq, spetsifikatsiyada yaratilgan tinish belgilariga uslublarni qo'llash aniq emas.
::birinchi harfdan foydalanishda brauzer xatolari
Ko'pincha, ::birinchi harf barcha brauzerlarda siz kutganingizdek ishlaydi. Barcha CSS xususiyatlarida bo'lgani kabi, bu psevdo-elementda siz bilishingiz kerak bo'lgan bir nechta xato va noto'g'ri foydalanish mavjud.
Firefox 39 va undan oldingi versiyalarida ba'zi belgilar Firefox-ning ::first-harf qoidasini e'tiborsiz qoldirishiga olib keladi: ‑,$,^,_,+,`,~,>,<.>
Bu birinchi belgi ::pre va kontent xususiyati orqali ko'rsatilgan holatlarga, shuningdek, agar u hujjat manbalarida ko'rsatilgan bo'lsa, amal qiladi. Bu xato uchun hech qanday tuzatish mavjud emas. Agar siz ::birinchi harfdan foydalansangiz, paragraf boshida bu belgilardan qochishingiz kerak bo'ladi.
Eslatma: Blink brauzerlaridagi xatolar
Blink brauzerlarining ba'zi versiyalari, agar ota-onaning displey xususiyati inline yoki jadvalga o'rnatilgan bo'lsa, ::first-harf qoidasini qo'llamaydi. Xato Chrome 42, Opera 29 va Yandex 15 da mavjud. Xato Chrome 44 da tuzatildi, ammo bu kitob sizning qo'lingizda bo'lmaguncha nashr kun yorug'ligini ko'rmaydi. Xatodan xalos bo'lishning eng oson yo'li displeyni qo'shishdir: inline-block, display: block or display: table-cell xususiyati ota-onaga.
::birinchi qator bilan tipografik effektlarni yaratish
::birinchi qator psevdo-sinfi deyarli ::birinchi harf kabi ishlaydi, faqat effekt elementning butun birinchi qatoriga qo'llaniladi. Siz, masalan, har bir paragrafning birinchi qatorini kattalashtirishingiz va matn rangini o'zgartirishingiz mumkin:
Quyida ko'rsatilganidek, br yoki hr yordamida birinchi qatorning oxirini majburlashingiz mumkin. Afsuski, bu har doim ham ishlamaydi. Agar sizning elementingiz faqat 72 ta belgidan iborat bo'lsa, 80-belgidan keyingi br tegi :: birinchi qator psevdo-elementiga ta'sir qilmaydi. Siz shunchaki g'alati chiziqni olasiz.
Xuddi shu narsa satrlar orasidagi so'zlarni buzmaslik uchun kiritilgan uzilmaydigan bo'shliq () uchun ham amal qiladi. Bu ::birinchi qatorga ta'sir qilmaydi. Oldin kelgan so'z uzilmaydigan bo'shliqdan keyin matn joylashgan qatorga o'tishga majbur bo'ladi.
:: oldin orqali qo'shilgan yaratilgan tarkib quyida ko'rsatilganidek, birinchi qatorda paydo bo'ladi.
Agar yaratilgan matn etarlicha uzun bo'lsa, u birinchi qatorni to'liq to'ldiradi. Biroq, agar siz displey: blokini qo'shsangiz (masalan, p:: oldin (kontent: '!!!'; displey: blok;)), u holda tarkib butun birinchi qatorni egallaydi.
Afsuski, bu xato hali ham Firefox 40 va undan oldingi versiyalarida mavjud. Firefox qoidani butunlay e'tiborsiz qoldiradi.
::selection bilan qiziqarli interfeyslar
::selection pseudo-element CSS psevdo-elementlar modulining 4-darajali spetsifikatsiyasida ko'rsatilgan "ta'kidlovchi" psevdo-elementlarga ishora qiladi. brauzerlarda.
:: tanlash bilan siz sichqoncha bilan tanlangan tarkibga CSS uslublarini qo'llashingiz mumkin. Odatiy bo'lib, ajratilgan kontentning fon va matn rangi tizim tomonidan o'rnatiladi. Biroq, ishlab chiquvchilar ushbu sozlamalarni quyida ko'rsatilganidek o'zgartirishi mumkin.
Barcha xususiyatlardan ::selection bilan foydalanilmaydi. Spetsifikatsiya faqat quyidagi xususiyatlarni o'z ichiga oladi:
::tanlov uchun old va fon ranglarini tanlashda foydalanish imkoniyatini yodda tuting. Ba'zi rang kombinatsiyalari ko'rish qobiliyati past odamlar uchun yomon kontrastni ta'minlaydi. Boshqa kombinatsiyalar rangli ko'r odamlar uchun tushunarsiz bo'lishi mumkin. Rang tanlashni yakunlashdan oldin Kontrast tekshiruvi va Rang ko'rligi simulyatoridan foydalaning.
Pseudo-Elements moduli shuningdek psevdo-sinflarni o'z ichiga oladi::imlo xatosi va::grammatik xato. Ular amalga oshirilgach, biz brauzer lug'atida tekshirilgan xatolar bilan matnni uslublashimiz mumkin bo'ladi.
Pseudo elementlar - bu elementning o'zida emas, balki uning alohida qismida ishlashga imkon beruvchi CSS xususiyatlarining maxsus turi.
Bu erda barcha psevdoelementlar ro'yxati:
- :birinchi harf- matn blokining birinchi harfining uslubi
- : birinchi qator- Matn blokining birinchi qatoriga uslub bering
- :keyin- Elementdan keyin tarkib qo'shadi.
- : oldin- Elementga tarkib qo'shadi.
- :: tanlash- foydalanuvchi tanlagan matn uslubi.
Pseudo-sinflarda bo'lgani kabi, psevdoelementlar ham quyidagi sintaksisga muvofiq ishlatiladi:
p:birinchi harf (rang:#ff0000)p- psevdoelement qo'llaniladigan selektor.
:birinchi harf- yo'g'on nuqtadan keyin haqiqiy psevdoelement.
(rang:#ff0000)- jingalak qavslardagi uslub deklaratsiyasi bloki.
Bunday holda, biz barcha paragraflarning birinchi harfi qizil bo'lishini ko'rsatdik.
Keling, sanab o'tilgan psevdoelementlarni ko'rib chiqaylik.
Birinchi harf uslubi.
Psevdoelement birinchi harf har qanday matn blokidagi birinchi harfning uslubini o'rnatadi, boshqacha qilib aytganda, bu sizga ko'p harakat qilmasdan "bosh harf" yaratishga imkon beradi; Ushbu saytda xatboshilardagi birinchi harflar boshqa harflardan farqli rang va hajmda ekanligini payqadingizmi? - bu psevdo-element qanday ishlashiga misol birinchi harf.
Xo'sh, agar bu misol siz uchun etarli bo'lmasa, boshqasini ko'rishingiz mumkin:
Biz oz narsani bilishimiz uchun qancha bilishimiz kerakligini kam odam biladi.
Fikrlarni tushunish, ma'no ma'nosida, aqlga sig'maydigan narsalar haqida o'ylash mantiqan..
Yuqoridagi misolda biz sahifadagi barcha paragraflar uchun birinchi harfning o'lchamini, shriftini, rangini va qalinligini o'zgartirdik.
Birinchi qator uslubi.
Psevdoelement birinchi qator matn blokidagi birinchi qatorning uslubini belgilaydi.
Agar ishga kirish uchun ariza topshirayotganda ... ... ...
Bir kuni yosh tizim administratori.......
Rostini aytsam, qanday holatlarda psevdoelementdan foydalanish tavsiya etilishini bilmayman. birinchi qator, garchi bunday holatlar bo'lishini istisno qilmayman. Bu, birinchi navbatda, ekran kengaytmasiga, shrift o'lchamiga, so'zlar va belgilar orasidagi masofaga va hokazolarga bog'liq. Matn blokidagi birinchi qator turli uzunliklarda bo'ladi, bu esa veb-masterga ushbu matn blokining uslubini to'liq nazorat qilish imkonini bermaydi.
Tarkib.
Psevdo-elementlar keyin Va oldin HTML hujjatida dastlab ko'rsatilmagan veb-sayt sahifasiga tarkibni "qo'shish" uchun mo'ljallangan. Tarkibi oldin kiritilgan ( : oldin) yoki keyin ( :keyin) xususiyatdan foydalanadigan har qanday element mazmuni, bu aslida kiritilishi kerak bo'lgan tarkibni belgilaydi.
Hammasi birgalikda shunday yozilgan:
p: keyin (tarkib: "Oxiri, tinglaganlar afsus!"; )Endi har bir xatboshidan keyin quyidagi yozuv qo'shiladi: "Oxiri, tinglaganlarga afsus!"
Mulk qiymati mazmuni balkim:
- "matn"- aslida har qanday matn yoki belgilar.
- "\0410" - Unicode.
- url (yo'l)- har qanday ob'ektning manzili.
- ochiq iqtibos- ochilish iqtibos.
- yaqin iqtibos- yakunlovchi iqtibos.
- ochiq iqtibos yo'q- ochilish kotirovkasini bekor qiladi.
- yaqin iqtibos- yakunlovchi kotirovkani bekor qiladi.
- meros- asosiy elementning qiymatini meros qilib oladi.
- yo'q- hech narsa qo'shilmaydi.
- normal- psevdo-elementlar uchun oldin Va keyin bilan bir xil yo'q .
- hisoblagich- mulk tomonidan belgilangan hisoblagich qiymatini ko'rsatadi qarshi qayta o'rnatish .
- attr (teg atributi)- qavs ichida ko'rsatilgan muayyan teg atributining qiymati bo'lgan matnni ko'rsatadi.
Yurak bilan sarlavha.
Boshiga "latifa:" so'zini qo'shadigan paragraflar va oxirida tabassum:
Agar ish uchun ariza berayotganda...
Bir kuni yosh tizim administratori...
Rasmdan keyin uning atributining qiymati qo'shiladi: "src" - rasmga yo'l:
Qo'shtirnoq ichidagi iqtibos:
Muz buzildi, hakamlar hay'ati janoblari!
Nostandart belgilar bilan ro'yxat:
- Birinchidan
- Ikkinchi
- Uchinchi
Men o'zimni misol bilan aqldan ozgandek his qilyapman, shuning uchun unga bir nechta sharhlar:
Pseudo-element oldidan yulduzcha *: psevdo-element (xususiyat) belgilangan uslub qoidalari barcha elementlarga tegishli ekanligini bildiradi. Shunday qilib, bizning misolimizda boshida matn hamma joyda ko'k rangda va oxirida u hamma joyda qizil bo'ladi, agar u qo'shimcha ravishda ko'rsatilmagan bo'lsa, masalan, misoldagi ro'yxatdagi yashil "markerlar".
Misolda har qanday ob'ektni kontent sifatida qo'shish mumkin, biz barcha sarlavhalarga rasm qo'shdik, ammo agar brauzer ma'lum bir faylni qayta ishlay olmasa, unda hech narsa qo'shilmaydi.
HTML maxsus belgilar (masalan, maxsus belgi: ¶ ), oddiy matnda ko'rsatiladi ( ¶ lekin emas ¶ ) shuning uchun agar siz ba'zi hiyla-nayranglarni qo'shishingiz kerak bo'lsa, Unicode-dan foydalaning.
Psevdo-elementlar keyin Va oldin, mulk kabi mazmuni Internet Explorer 7 va undan pastroq brauzerlar tomonidan qo'llab-quvvatlanmaydi.
Pseudo-element::select.
Psevdoelement :: tanlash(Men noto'g'ri yozmadim, u ikki nuqta bilan yozilgan) foydalanuvchi tanlagan matn uslubini bildiradi.
Ushbu psevdoelement faqat CSS3 spetsifikatsiyasida tug'ilgan va afsuski, barcha brauzerlar tomonidan qo'llab-quvvatlanmaydi, shuning uchun IE uni butunlay e'tiborsiz qoldiradi va Firefox brauzeri o'ziga o'xshash pseudo-elementdan foydalanadi. ::-moz-tanlash Bu rasman CSS spetsifikatsiyasining bir qismi emas.
Ushbu matnni xuddi uni nusxalash uchun tanlashga harakat qiling. Agar brauzeringiz (masalan, Opera 9.6 va undan yuqori versiyalari) ::selection psevdoelementini qo'llab-quvvatlasa, tanlangan matn qizil rangga, uning foni esa yashil rangga aylanganini ko'rasiz.
Ushbu psevdoelementga faqat quyidagi CSS xossalari qo'llanilishi mumkin: rang , fon Va fon rangi .
CSS3 spetsifikatsiyasida, CSS2 va CSS2.1 dan farqli o'laroq, barcha psevdo-elementlar odatda ikkita nuqta bilan yoziladi. ::birinchi harf, ::birinchi qator, ::keyin, ::oldin, va yangi :: tanlash- shu tarzda ishlab chiquvchilar psevdoelementlarni psevdosinflardan ajratishga qaror qilishdi. Biroq, bu sintaksis Internet Explorer-ning 9-chi versiyasigacha butunlay e'tiborga olinmaydi! Shuning uchun hozircha psevdoelementlarni eski uslubda bitta nuqta bilan yozish yaxshidir. Biroq, masalan, buni tushunish kerak :birinchi harf Va ::birinchi harf Bular rasmiy ravishda ikki xil psevdoelementdir.
Pseudo-elementlar uchun uslub qoidalarida faqat shrift, matn va fonga tegishli xususiyatlarga ruxsat beriladi.
CSS psevdo-elementlari mavjud HTML teglarining shartli komponentlarining bir turi.
Sintaksis nuqtai nazaridan ular psevdosinflardan farq qilmaydi. Ularning o'xshashligi ular qo'llaniladigan narsaning ma'lum bir "fantomizmida" ham namoyon bo'ladi, faqat psevdo-sinflardan farqli o'laroq, psevdo-elementlar sahifadagi ma'lum teglar holatidagi o'zgarishlarga ta'sir qilmaydi, balki o'ziga xos fantom tarkibiy qismlarini yaratadi. allaqachon mavjud teglar.
CSS pseudo-element selektorlaridan qanday foydalanish kerak?
CSS psevdoelement selektorining vazifasi hujjat strukturasidan selektor xarakteristikalariga va psevdoelement spetsifikatsiyasiga kiruvchi elementlarning tarkibiy qismlarini tanlashdan iborat.
U ikki nuqtadan keyin ishlatiladigan soxta element nomi bilan belgilanadi.
Misol tariqasida, paragraflardagi birinchi harfni kattaroq qizil rangda chop qilaylik:
p: birinchi harf (shrift o'lchami: 150%; rang: qizil; )
CSS psevdo-elementlaridan foydalanish uchun ogohlantirish shundaki, ular selektor oxirida kelishi kerak. Ya'ni, bu yozuv ishlamaydi:
p: birinchi qator oralig'i (rang: qizil; )
Pseudoelementlar nima?
Xulosa qilish
CSS psevdo-elementlari ba'zi maxsus holatlarda HTML hujjatining dizaynini soddalashtirish uchun ishlatiladi. Ular bizga qo'shimcha teglar qo'shish emas, balki CSS-dagi mavjud teglarga dizayn qo'shish imkoniyatini beradi.
Ko'pincha amalda: keyin va:befor ishlatiladi (masalan, ro'yxatlarga markerlar qo'shish uchun, ochiladigan menyuning yanada murakkab dizayni), biroz kamroq: birinchi harf va: birinchi qator. Qolgan psevdoelementlarni qo'llash sohalari juda ekzotik va amalda juda kam uchraydi.
Shuni unutmangki, faqat ushbu 4 ta selektor uzoq vaqt davomida barcha brauzerlar tomonidan qo'llab-quvvatlanadi. Boshqa psevdoelementlar CSS3 standarti paydo bo'lishi bilan ishlatila boshlandi, ya'ni ular endi eski brauzerlarda qo'llab-quvvatlanmaydi.
Oxirgi yangilanish: 21.04.2016
Pseudo-elementlar veb-sahifa elementlarini tanlash uchun bir qator qo'shimcha imkoniyatlarga ega va psevdo-sinflarga o'xshaydi. Mavjud psevdoelementlar ro'yxati:
::first-letter : matndan birinchi harfni tanlash imkonini beradi
::birinchi qator: matnning birinchi qatorini uslublaydi
::before : ma'lum bir elementdan oldin xabar qo'shadi
::after : ma'lum bir elementdan keyin xabar qo'shadi
::selection : foydalanuvchi tanlagan elementlarni tanlaydi
CSS2 da, psevdo-sinflar kabi soxta elementlardan oldin bitta nuqta qo'yilgan. CSS3 da ularni psevdosinflardan ajratish uchun psevdoelementlar oldiga ikkita nuqta qo'yila boshlandi. Biroq, CSS3-ni qo'llab-quvvatlamaydigan eski brauzerlar bilan muvofiqligi uchun bitta ikki nuqta qabul qilinadi: :before .
Biz matnni birinchi harf va birinchi qator psevdo-elementlari yordamida shakllantiramiz:
Ammo u hech narsani ko'rmadi. Uning tepasida osmondan boshqa hech narsa yo'q edi - baland osmon, tiniq emas, lekin baribir beqiyos baland, kulrang bulutlar jimgina o'rmalab o'tirardi.
Biz psevdo-elementlardan oldin va keyin foydalanamiz:
Tilingizni elektr rozetkaga yopishtirmang.
Bu erda psevdo-elementlar sinf ogohlantirishi bilan elementga qo'llaniladi. Ikkala psevdoelement ham kiritiladigan matnni saqlaydigan kontent xususiyatini qabul qiladi. Shuningdek, diqqatni kuchaytirish uchun psevdo-elementlar shrift-weight: qalin xususiyatidan foydalangan holda qalin matndan foydalanadi. .
Biz tanlangan elementlarni uslublash uchun psevdo-elementdan foydalanamiz:
CSS3-dagi psevdo elementlar matnni formatlash imkonini beradi.