Sof CSS-da:targetsiz hodisani bosing. CSS-da maqsad. U qanday ishlaydi? Semantika va mavjudlik haqida nima deyish mumkin?
CSS-da bosish hodisalarisiz boshqarishning bir usuli bormi? JavaScript yordamida. bilan usuldan foydalanishingiz mumkin : maqsad. Ammo undan foydalanish mumkin bo'lmasa-chi? Boshqa usul ham bor.
Demoni tomosha qiling. U butunlay CSS-da yaratilgan, JavaScript kodi qatori emas. U:active va:hover selektorlaridan asl foydalanishga asoslangan.
Tavsif
Avval siz sichqonchani bosilganda ko'rsatiladigan tugma va bloklarni o'z ichiga olgan konteyner yaratishingiz kerak. Belgilash tuzilishi shunday bo'ladi:
Sichqoncha tugmasi .wrapperda bosilmaguncha .kontentni ko'rinmas qilishimiz kerak . Muammoni hal qilish uchun .content xususiyati displeyini o'rnating: none . Keyin, .wrapper-da sichqoncha tugmasi bosilganda, biz displeyni o'z ichiga olamiz: .content uchun bloklash xususiyati. Nima uchun .wrapper:active .content xususiyati displeyni o'rnating: blok . Bu holatda .content faqat sichqoncha tugmasi bosilganda ko'rinadi. Agar siz uni qo'yib yuborsangiz, .kontent yana yo'qoladi. Buni tuzatish uchun keling, sichqoncha kursori tugagach .content , elementga displey: blok xususiyati tayinlanganligiga ishonch hosil qilaylik. Ya'ni .content:hover uchun displey: block xususiyatini o'rnatamiz. CSS kodi quyidagicha ko'rinadi:
Kontent (displey: yo‘q; ) .wrapper:active .content (displey: blok; ) .content:hover (displey: blok; )
Qolgan narsa - uni "tarash" tashqi ko'rinish va aniqroq qiling:
Oʻram (joylashuv: nisbiy; ) .tugmasi (fon: sariq; balandlik: 20px; kenglik: 150px; ) .kontent (pozitsiya: mutlaq; toʻldirish-tepasi: 20px; ) .content li (fon: qizil; )
Yuqoridagi koddagi tugma matni sariq fonga ega bo'ladi va sichqoncha tugmasi bosilganda ko'rsatiladigan ma'lumotlar qizil fonga ega bo'ladi.
Pseudo-class:target yordamida Internetda ko'plab o'quv qo'llanmalarini osongina topishingiz mumkin. Biroq, keling, boshqa birovning kodiga amal qilmaylik, balki uni tushunishga va uning qanday ishlashini tushunishga harakat qilaylikmi? Albatta, biz misollarsiz qilolmaymiz.
Bu nima: maqsad?
CSS:target-da, bu psevdo-sinf bo'lib, u sizga HTML hujjatingizning ba'zi harakatlar amalga oshiriladigan butun "qismini" tanlash imkonini beradi. Bu, masalan, matnning paragrafi yoki sarlavhasi bo'lishi mumkin.
Pseudo-sinflarni psevdoelementlar bilan aralashtirib yubormaslik kerak, ular elementning faqat ma'lum qismini, masalan, paragrafning birinchi harfi yoki birinchi qatorini tanlashi mumkin.
Pseudo-sinflar:
- a: havola (rang: # 111)
- a: suring (rang: # 222)
- div:birinchi farzand(rang:#333)
Psevdo elementlar:
- p::birinchi harf(rang:#444)
- p :: birinchi qator (rang: # 555)
Menimcha, sintaksisdan u yoki bu psevdosinf yoki psevdoelementning nima qilishi aniq. Eng mashhur psevdo-sinf: hover, barcha veb-ustalar unga duch kelishadi; u sichqonchani ko'targanda elementning uslublarini tavsiflaydi. maqsad xuddi shunday ishlaydi va muayyan vaziyat yuzaga kelganda elementning uslublarini tavsiflaydi.
Fragment identifikatorlari
Muxtasar qilib aytganda, bu bizning psevdosinfimiz bog'langan narsadir. Bu manzil oxirida joylashgan so'z yoki iboraga ega heshteg. Bu shunday ko'rinadi:
Ushbu uslub maqola ichidagi o'tishlar uchun ishlatilishi mumkin. Masalan, maqolaning boshida siz kichik tarkib jadvalini yaratasiz, uning elementini bosganingizda, odam havola olib boradigan bo'limga o'tadi; bo'limga identifikator qo'shilishi kerak.
Bu uchun ishlaydi toza HTML, hech qanday fokuslar talab qilinmaydi. Kichik identifikatorlar.
Klik bilan ishlash:target
Keling, bizning improvizatsiya qilingan menyumizdan kerakli bo'limni bosganingizda, sarlavha uslubi o'zgarib, qaysi paragraf hozirda faol ekanligini ko'rsatishga harakat qilaylik.
H1 (shrift: 30px Arial sans-serif; ) h1:target (shrift oʻlchami: 50px; matn bezatish: tagiga chizilgan; rang: #37aee4; )
Kod juda oddiy - bosilganda sarlavha o'zining o'lchamini, rangini o'zgartiradi va tagiga chiziladi. Siz hayot (Ruslan, salom) qo'shishingiz va sarlavha rangini o'zgartirish uchun animatsiya qilishingiz mumkin:
H1 (shrift: 30px Arial sans-serif; -webkit-o'tish: rang 0,5s oson; -moz-o'tish: rang 0,5s oson; -o-o'tish: rang 0,5s oson; -ms-o'tish: rang 0,5s oson; o'tish: rang 0,5s oson; )
Faol sarlavhani ajratib ko'rsatish yaxshi narsa, lekin undan keyingi matn dizaynini o'zgartirish kerak bo'lsa-chi? CSS bizga bu imkoniyatni beradi. Bu shunday ko'rinadi:
H1:target + p (fon: #eaeaea; to‘ldirish: 10px; )
Bunday holda, ortiqcha belgisi uslubning sarlavhadan keyingi paragrafga qo'llanilishi kerakligini anglatadi. Shunday qilib, faol sarlavha o'zgarganda, biz bo'lim dizaynini ham o'zgartiramiz unga tegishli bo'lgan matn bilan.
Brauzerni qo'llab-quvvatlash
Maqsadli psevdo-sinf CSS-ning uchinchi nashriga tegishli bo'lib, 9-versiyadan eski bo'lgan IEdan tashqari barcha brauzerlar tomonidan mukammal darajada qo'llab-quvvatlanadi. Shuning uchun, agar auditoriyangiz ushbu brauzerdan foydalansa, uni amalga oshirmasligingiz kerak. Garchi chiqish yo'li bor - bu Selectvizr, JS kutubxonasi bo'lib, uning yordamida IEni CSS3 bilan ishlashga imkon beradi. Biz shunchaki skriptni qo'shamiz va hamma narsa ishlaydi.
Bitta narsa shundaki, agar siz JQuery yoki MooTools-dan foydalanmasangiz, ushbu skript ishlashi uchun uni ulashingiz kerak. Rasmiy veb-saytda qaysi kutubxonalar nimani qo'llab-quvvatlashini ko'rsatadigan jadval mavjud. Agar qiziqsangiz, o'qing. Bu .
Xulosa
Pseudo-klasslardan foydalanish murakkab tuyulishi mumkin, lekin ular qanday ishlashini tushunganingizdan so'ng, siz faqat CSS yordamida ajoyib narsalarni qilishingiz mumkin va boshqa hech narsa emas. Pseudo-sinf: maqsad- buning ajoyib tasdig'i. Uning yordami bilan siz sahifaning tashrif buyuruvchi bilan o'zaro ta'sirini tubdan o'zgartirishingiz mumkin. Yuqoridagi misol eng oddiy, ammo u hali ham sahifaga biroz interaktivlik qo'shadi. Lekin bu faqat bir necha qator kodlar.
Go'zallik va brauzerni qo'llab-quvvatlash bilan ortiqcha ishlamang va hamma narsa yaxshi bo'ladi.
Kuningiz xayrli o'tsin
target="_blank teg yaratish uchun ishlatiladi havolani yangi oynada ochdi. Lekin maqsadli HTML nima? Nima uchun u bo'sh bo'lishi kerak? Va eng qiziq narsa shundaki, nima uchun boshida pastki chiziq bor? Keling, ushbu kodni batafsil ko'rib chiqamiz va u nima qilishini tushunamiz.
maqsadli atribut
Maqsadli qiymatlar
Maqsadli atribut uchun eng keng tarqalgan to'rtta qiymat:
_o'zini
Bu teg HTMLda ishlatilsa sodir bo'lishi mumkin bo'lgan yagona holat
_bo'sh
Havolani yangi tab yoki oynada ochadi. Bu foydalanuvchining mahalliy sozlamalari bilan belgilanadi, aksariyat brauzerlarda bu yangi tab sahifasi. Ushbu qiymatdan foydalanib, siz qalqib chiquvchi reklama birliklarini amalga oshirishingiz mumkin deb o'ylashingiz mumkin. Ammo bu unday emas. Ko'pincha buning uchun HTML emas, balki JavaScript ishlatiladi.
Ushbu maqsadli HTML atribut qiymati tashqi saytlarga yoki PDF fayllarga havolalarni yangi tabda ochish uchun eng yaxshi ishlatiladi. Buning yordamida ushbu yorliqlarni yopgandan so'ng, foydalanuvchi saytingizga qaytariladi. Ammo buni suiiste'mol qilmaslik kerak, chunki har bir havola yangi tabda ochilsa, foydalanuvchi uchun navigatsiya qilish juda qiyin bo'ladi.
_ota-ona
_parent qiymati siz joylashgan freym uchun asosiy freymdagi havolani ochadi. Bu mashhur qiymat emas, chunki ramkalar yaratish uchun teglar