The: maqsadli soxta sinf CSS3 -ning ajoyib xususiyatlaridan biridir. URI hujjatidagi identifikator ko'rsatgan elementga mos keladi.
URI identifikatorida "#" belgisi va atribut qiymatiga mos keladigan identifikator nomi mavjud. id hujjatning elementi.
Qo'llab -quvvatlash
Biz CSS3 haqida gapirayotganimiz uchun, soxta sinf IE 6 dan 8 gacha bo'lgan barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi. IE9 allaqachon: target soxta sinfini qo'llab -quvvatlaydi.
Qanday ishlataman: maqsad?
Bu psevdo -klass o'z uslubiga ega bo'lishi mumkin, xuddi psevdo darslari kabi. : hover, : faol yoki : diqqat havolalar uchun. Yuqorida aytib o'tilgan soxta sinflar bilan bir qatorda : maqsad veb -sayt bilan muayyan harakatlarda ishlatiladi. Ayniqsa, fragment identifikatori ishlatilganda, masalan, http://example.com/index.html#lorem-ipsum.
Namoyish
Demo -sahifa qanday va qachon ishlatishni aniq misolini beradi : maqsad... Psevdo sinf : maqsad manbangizning mavjudligini yaxshilashi mumkin.
HTML formatlash
Quyida demodan misol keltirilgan. Bizda 4 ta havola va bir xil miqdordagi bloklar mavjud. Har bir guruh o'ziga xos identifikatorga ega.
- 1 -blok
- 2 -blok
- 3 -blok
- Blok 4
Lorem ipsum dolor o'tir, elitni tanlab ol. Harakatlar tez -tez o'zgarib turadi, har xil turdagi alifendlar, shuning uchun hammasi bir xil. Qachonki, bu juda yaxshi.
Sed lobortis placerat elit tincidunt tempor. Noma'lum vaqtdan boshlab, bu vaqtinchalik. Sed tortor lorem, ultricies auctor nec, auctor ut neque. Qishloq xo'jaligining turli xil turlari, ular bir -biridan farqli o'laroq, o'z navbatida turpis va boshqa turlarga kiradi. Natoque penatibus et magnis part partient montes, nascetur ridiculus mus.
Bu juda yaxshi tortishuvlar va eng yaxshi narsalar. Nunc commodo pretium arcu juda nozik. Yopish -to'kilmaslik, bu esa o'z navbatida. Sinf talablariga ko'ra, har bir kishi o'z navbatida, har bir turkumga mos keladi.
Vaqt o'tishi bilan. Cras convallis tempor orci pulvinar skelerisque. Nollam va erat eu nabh sollicitudin bir vaqtning o'zida o'tiribdi. Sinf darslari euismod portida. Oddiy bo'lmagan lakus. Nunc ornare adipiscing egestas.
CSS
Quyidagi CSS kodi kerakli effektga erishishga imkon beradi, uning yordamida tegishli identifikatorli blok ajratiladi (to'rtburchak atrofida soya paydo bo'ladi).
/ * Bir oz bo'sh joy qo'shing * / ul, div (chekka-pastki: 10 piksel;) / * Standart blok uslubi * / div (to'ldirish: 10 piksel; chegara: 1 piksel qattiq #eaeaea; -moz-chegara-radiusi: 5 piksel; chegara radiusi) : 5px;) / * Chiqish ko'rinishini o'zgartirsa * / div: target (border-color: # 9c9c9c; -moz-box-shadow: 0 0 4px # 9c9c9c; -webkit-box-shadow: 0 0) 4px # 9c9c9c; quti-soya: 0 0 4px # 9c9c9c;)
Quyida kod harakatining natijasi keltirilgan. Agar siz havolani bossangiz, tegishli blok ajratiladi va faol bo'ladi.
JavaScript -ni ishlatmasdan CSS -da bosish hodisalarini boshqarish usuli bormi? Siz usuldan foydalanishingiz mumkin : maqsad... Ammo uni ishlata olmasak nima bo'ladi? Boshqa usul ham bor.
Demoni tomosha qiling. Bu butunlay CSS -da qilingan, JavaScript -ning bitta qatori emas. Bu: faol va: hover selektorlarining asl ishlatilishiga asoslangan.
Tavsif
Birinchidan, tugma va sichqonchani bosishida ko'rsatiladigan bloklarni o'z ichiga oladigan konteyner yaratish kerak. Belgilash tuzilishi quyidagicha bo'ladi:
.Contentni sichqoncha tugmasi bosilmaguncha ko'rinmas qilib qo'yishingiz kerak. Muammoni hal qilish uchun .content uchun display: none xususiyatini o'rnating. Keyin .wrapper tugmachasini bosganimizda .content uchun display: block xususiyatini yoqamiz. Buning uchun .wrapper: active .content uchun display: block xususiyatini o'rnating. Bu holatda .content faqat sichqoncha tugmasi bosilganda ko'rinadi. Agar siz uni qo'yib yuborsangiz, kontent yana yo'qoladi. Tuzatish uchun shunday qilaylikki, sichqoncha kursori .content tugagach, elementga displey: blok xususiyati beriladi. Ya'ni, .content: hover uchun displey: block xususiyatini o'rnatamiz. CSS kodi quyidagicha ko'rinadi:
Tarkib (displey: yo'q;). O'rash: faol .kontent (ko'rsatish: blok;) .mavzuni: hover (ko'rsatish: blok;)
Faqat tashqi ko'rinishini "tarash" va unga aniqlik berish qoladi:
O'rash (pozitsiya: nisbiy;) .tugma (fon: sariq; balandlik: 20px; kenglik: 150px;) .kontent (pozitsiya: mutlaq; to'ldirish tepasi: 20px;).
Yuqoridagi koddagi tugma matni sariq fonga ega bo'ladi va sichqoncha tugmasi bosilganda ko'rsatiladigan ma'lumot qizil fonga ega bo'ladi.
Odatiy bo'lib, havolani bosganingizda, hujjat joriy oynada yoki ramkada ochiladi. Agar kerak bo'lsa, bu shart tegning maqsadli atributi bilan o'zgartirilishi mumkin. ... XHTMLda bu atributdan foydalanish taqiqlangan.
Sintaksis
...Majburiy atribut
Qiymatlar
Qiymat - bu atribut bilan belgilangan oyna yoki ramkaning nomi. Agar mavjud bo'lmagan nom o'rnatilgan bo'lsa, yangi oyna ochiladi. Quyidagilar himoyalangan nomlar sifatida ishlatiladi.
Bo'sh sahifani yangi brauzer oynasiga yuklaydi. _self Sahifani joriy oynaga yuklaydi. _parent Sahifani yuqori freymga yuklaydi, agar ramkalar bo'lmasa, bu qiymat _self kabi ishlaydi. _top Barcha freymlarni bekor qiladi va sahifani to'liq brauzer oynasida yuklaydi, agar ramkalar bo'lmasa, bu qiymat _self kabi ishlaydi.
Standart qiymat
Tasdiqlash
Bu atributdan foydalanish HTML spetsifikatsiyasi bilan bekor qilingan, haqiqiy kod faqat vaqtinchalik yordamida olinadi .
HTML5 IE Cr Op Sa Fx
Yangi oynada ochish
Bugun biz asosiy funktsiyalar haqida gaplashamiz soxta sinf bilan : maqsad CSS -ning ajoyib effektlarini yaratish uchun uni qanday ishlatishingiz mumkin, CSS yordamida slayd -shoularni yaratishni o'rganing va boshqalar.
Nima: maqsad?
h1 (shrift: qalin 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Jeneva, sans-serif;) h1: maqsad (shrift o'lchami: 50 piksel; matnni bezatish: tagini chizish; rang: # 37aee4;)
Animatsiya qo'shing
Keling, effektimizni jonlantiramiz va rangni o'zgartirish uchun kichik o'tish kabi animatsiyani qo'shamiz. Bu qanday ishlashini ko'ring.
h1 (shrift: qalin 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Jeneva, sans-serif; s osonlik; -ms-o'tish: rang 0,5s osonlik; o'tish: rang 0,5s osonlik;) h1: maqsad (shrift o'lchami: 50 piksel; matnni bezatish: tagini chizish; rang: # 37aee4;)
Maqsadli bo'lmagan ob'ektlarni boshqarish
Aytaylik, tanlangan sarlavhadan keyingi paragraf uslublarini o'zgartirmoqchimiz.
Buni quyidagi kod yordamida bajarish juda oson. Demoga qarang.
h1: maqsad + p (fon: # f7f7f7; to'ldirish: 10 piksel;)
CSS yordamida oddiy slayd -shou yaratish
Ishlab chiquvchilar psevdo-klassdan foydalangan holda tonna ilovalarni ishlab chiqdilar : maqsad... Bu soxta selektor yorliqlar yoki hatto slayd -shoular yaratishda qo'l kelishi mumkin. Keling, ikkinchisini qanday amalga oshirishingiz mumkinligini ko'rib chiqaylik.
Keling, tartibsiz ro'yxatni tuzaylik. Har bir ro'yxat elementida identifikator identifikatorini ko'rsatuvchi langar yorlig'i va tegishli identifikatorli rasm bo'ladi.
- Bir
- Ikki
- Uch
- To'rt
- Besh
Endi uslublarimizni qo'shamiz:
* (chegara: 0 piksel; to'ldirish: 0 piksel;) #slayd-shou (chegara: 50 piksel avtomatik; pozitsiya: nisbiy; kenglik: 400 piksel;) ul (ro'yxat uslubi: yo'q;) li (suzish: chap; to'lib toshish: yashirin; chegara: 0) 20px 0 0;) li a (rang: # 222; matnni bezatish: yo'q; shrift: 15px / 1 Helvetica, sans-serif; -webkit-o'tish: rang 0,5s osonlik; -moz-o'tish: rang 0,5s osonlik; -o-o'tish: rang 0,5s osonlik; -ms-o'tish: rang 0,5s osonlik; o'tish: rang 0,5s osonlik;) li a: hover (rang: # 50b0df;) li img (pozitsiya: mutlaq; tepa: 50px; chapda: 0; z-indeks: -1; -webkit-o'tish: shaffoflik 1s osonlik bilan; -ms-o'tish: shaffoflik 1s osonlik bilan o'tish; o'tish: noaniqlik 1s osonlik bilan chiqib ketish;) li img: maqsad (z-indeks: 1;) li img: emas (: maqsad) (shaffoflik: 0;)
Avval qo'shamiz suzish: chapga ro'yxatimizning barcha elementlari. Biz elementlar uchun mutlaq va nisbiy joylashishni qo'lladik.
Keyinchalik, o'rnating z -indeks: -1 barcha tasvirlar uchun va keyin o'rnating z-indeks: 1 maqsadli tasvirlar uchun. Bu ro'yxat elementini bosganingizda tasvir o'zgarishiga olib keladi. O'tishni yumshoq qilish uchun biz boshqa tasvirlar uchun shaffoflik qiymatini o'rnatamiz. 0 .
CSS slayd -shou demosini ko'ring.
Brauzerlararo muvofiqlik
Psevdo-sinf : maqsad bu 3 -darajali CSS -ni tanlash vositasi, demak u deyarli hamma brauzerlarda qo'llab -quvvatlanadi (siz taxmin qilmaysiz) ... IE. Yaxshi eski eshak faqat 9 va 10 -versiyalarda CSS3 tanlovchilarini qo'llab -quvvatlaydi.
IE -dagi har qanday CSS3 -ni tanlash muammosida bo'lgani kabi, Selectivizr -da ham buni tuzatish juda oson.
Ushbu plagin va voodoo sehrlari tufayli kerakli CSS3 selektorlari hatto IE6da ham qo'llab -quvvatlanadi.
Xulosa
Psevdo-darslardan foydalanish birinchi navbatda juda qiyin bo'lib tuyulishi mumkin, lekin nima uchun ular sizning ishingizni osonlashtirishi va saytingizni yanada qiziqarli qilishini tushunasiz. Psevdo -selektor
: maqsad yaxshi misol. Faqat uslublar bilan haddan oshmasligingizga ishonch hosil qiling.
Yana bir qiziqarli foydalanish holati : maqsad
Internetda: maqsadli psevdo-klass yordamida ko'plab darsliklarni osongina topishingiz mumkin. Biroq, biz boshqa birovning kodiga amal qilmaymiz, balki uni tushunishga va uning qanday ishlashini tushunishga harakat qilamiz? Albatta, misollarsiz emas.
Nima: maqsad?
CSS-da: maqsad-bu psevdo-klass, bu sizga HTML-hujjatning butun "qismini" tanlashga imkon beradi, bunda ba'zi harakatlar bajariladi. Bu matn paragrafi yoki sarlavha bo'lishi mumkin, masalan.
Psevdo-sinflarni psevdo-elementlar bilan aralashtirib yubormaslik kerak, ular elementning faqat ma'lum bir qismini tanlashi mumkin, masalan, paragrafning birinchi harfi yoki birinchi qatori.
Psevdo-sinflar:
- a: havola (rang: # 111)
- a: hover (rang: # 222)
- div: birinchi bola (rang: # 333)
Soxta elementlar:
- p :: birinchi harf (rang: # 444)
- p :: birinchi qator (rang: # 555)
Menimcha, u yoki bu soxta sinf yoki soxta element nima qilayotgani sintaksisdan aniq. Psevdo-klassning eng mashhuri: hover, uni hamma veb-ustalar uchratadi, u elementning uslubini tasvirlab beradi. maqsad shunga o'xshash tarzda ishlaydi va ma'lum bir vaziyat yuzaga kelganda elementning uslublarini tavsiflaydi.
Fragment identifikatorlari
Qisqasi, bu bizning psevdo-sinfimiz bog'langan narsadir. Bu manzil oxirida so'z yoki ibora yozilgan hashtag. Bu shunday ko'rinadi:
Ushbu texnikani maqola ichida harakatlanish uchun ishlatish mumkin. Masalan, maqolaning boshida siz kichik tarkib jadvalini tuzasiz, odam elementni bosganida, u havola olib boradigan bo'limga, bo'limga o'tadi va shu bilan birga siz identifikator.
Bu sof HTML -da ishlaydi, hech qanday sozlash talab qilinmaydi. Kichik identifikatorlar.
: Ni bosing
Keling, biz tayyor menyudan kerakli bo'limni bosganingizda, sarlavha uslubi o'zgarib, hozirda qaysi paragraflar faol ekanligini ko'rsatishga harakat qilaylik.
H1 (shrift: 30 piksel Arial sans-serif;) h1: maqsad (shrift o'lchami: 50 piksel; matnni bezatish: tagini chizish; rang: # 37aee4;)
Kod juda sodda - bosilganda sarlavha o'z o'lchamini, rangini va tagini chizib qo'yadi. Siz hayotni qo'shishingiz mumkin (Ruslan, salom) va sarlavha rangining o'zgarishini jonlantirish:
H1 (shrift: 30 piksel Arial sans-serif; -webkit-o'tish: rang 0,5s osonlik; -moz-o'tish: rang 0,5s qulaylik; -o-o'tish: rang 0,5s osonlik; -ms-o'tish: rang 0,5s osonlik; o'tish: rang 0,5s osonlik;)
Faol sarlavhani ajratib ko'rsatish - yaxshi ish, lekin undan keyingi matn ko'rinishini o'zgartirish kerak bo'lsa -chi? CSS bizga bunday imkoniyatni beradi. Bu shunday ko'rinadi:
H1: maqsad + p (fon: #eaeaea; to'ldirish: 10 piksel;)
Bu holda, plyus sarlavhadan keyingi paragrafga uslub qo'llanilishi kerakligini bildiradi. Shunday qilib, faol sarlavhani o'zgartirganda - biz bo'lim dizaynini ham o'zgartiramiz"unga tegishli" degan matn bilan.
Brauzerni qo'llab -quvvatlash
Maqsadli psevdo-klass CSS-ning uchinchi versiyasiga tegishli va 9-versiyadan eski IE-dan tashqari barcha brauzerlar tomonidan mukammal qo'llab-quvvatlanadi. Shuning uchun, agar sizning auditoriyangiz ushbu brauzerdan foydalansa, siz uni bajarmasligingiz kerak. Chiqishning yo'li bor - bu Selectvizr, bu JS kutubxonasi, uni yordamida IEni CSS3 bilan ishlash mumkin. Faqat skriptni qo'shing va bu hammasi ishlaydi.
Yagona narsa, agar siz JQuery yoki MooTools -dan foydalanmasangiz, ushbu skript ishlashi uchun uni ulashingiz kerak. Rasmiy saytda kutubxonalar qaysi birini qo'llab -quvvatlaydigan jadval mavjud. Agar sizni qiziqtirsa, o'qing. Bu.
Xulosa
Psevdo-darslardan foydalanish juda qiyin vazifa bo'lib tuyulishi mumkin, lekin siz ularning qanday ishlashini tushunganingizdan so'ng, siz CSS-dan boshqa hech narsa qila olmaysiz. The: maqsadli soxta sinf- buning ajoyib tasdig'i. Uning yordami bilan siz sahifaning tashrif buyuruvchi bilan o'zaro ta'sirini tubdan o'zgartirishingiz mumkin. Yuqoridagi misol eng sodda, lekin u sahifaga biroz interaktivlik qo'shadi. Ammo bu faqat bir nechta kod satrlari.
Go'zallik va brauzer yordami bilan haddan oshmang, shunda hammasi yaxshi bo'ladi.
Hayrli kun