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, bu yoki boshqa 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, qaysi band hozirda 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 hajmini, 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 "matn" bilan.
Brauzerni qo'llab -quvvatlash
Maqsadli psevdo-klass CSS-ning uchinchi versiyasiga tegishli va IE-dan boshqa barcha brauzerlar tomonidan qo'llab-quvvatlanadi, 9-versiyadan eski. 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
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
Salom blog saytining aziz o'quvchilari. Men bugungi nashrni webmasteringning eng muhim jihatiga bag'ishlashga qaror qildim, bu erda men giperhavola nima bilan uzviy bog'liqlik borligini batafsil tushuntirishga harakat qilaman, bu esa o'z navbatida mubolag'asiz Internetning asosi hisoblanadi.
Giperhavolalarni to'g'ri yaratish va ularni veb -sahifalar kodiga (masalan, sizning saytingizga) kiritish uchun siz gipermatn belgilash tilining tegishli maydonini o'rganishingiz kerak (), chunki bu elementlar HTML a yordamida yaratilgan. kerakli turga havolani yangilash qobiliyatiga ega bo'lgan teg.
Shunday qilib, bugun biz giperhavola qanday qismlardan iboratligini, maqsadli bo'sh atributdan foydalanish sahifani yangi oynada (tabda) ochish imkoniyatini, har qanday rasmni havolaga aylantirishni va boshqa ko'plab muhim ma'lumotlarni tahlil qilamiz. Boshqa narsalar qatorida, bu ma'lumotlar sizni HTML tilini o'rganishga undaydi.
Giperhavola nima va uni havola deb atash mumkinmi?
Sarlavhada berilgan savolga javob berib, men aytamanki, "havola" atamasi kengroq semantik diapazonga ega (Sibirga havola, to'lovchini aniqlash uchun bank, kitobdagi matn va hk), shu jumladan kontseptsiyaga xos bo'lgan ma'no. "giperhavola", bu faqat gipermatn bilan bog'liq bo'lib, bu ma'lumotni chiziqli bo'lmagan qabul qilishga imkon beradi.
Shunday qilib, giperhavola - bu havolaning alohida holati shuning uchun ularni bugungi mavzuda teng asosda ishlatish mumkin. Men bugungi nashr paytida o'zimning "xudbin manfaatlarim" uchun foydalanaman, keraksiz kalit so'zlar spamiga yo'l qo'ymaslik uchun ikkala shartni ham ishlataman.
Lekin yordami bilan yaratilgan ko'rinmas xizmatlar ham bor va ma'lum bir funktsiyani bajarish uchun brauzerlarga ko'p signal va buyruqlar yuborish vazifasi bo'lgan chegaralarda.
Masalan, xizmat ko'rsatuvchi giperhavolalar yordamida ikonkani ko'rsatish mumkin. Ularni faqat HTML kodining bir qismi sifatida ko'rish mumkin (buning uchun brauzerda ochilgan har qanday sahifani bosing):
Hozircha, xizmat havolalarini yolg'iz qoldirib, giperhavola yaratishning umumiy naqshini ko'rib chiqaylik. Ularning umumiyligi shundaki, ularning hammasi bor zarur href atributi, qiymati hujjatning manzili (). HTML havolasi saytning ichki sahifasiga ham, tashqi hujjatga ham olib kelishi mumkin.
Yana bir muhim eslatma. Href atributidan foydalanish giperhavolalarni bosish imkonini beradi, ya'ni foydalanuvchilarni bosish natijasida veb -saytning tegishli sahifasiga avtomatik o'tishga imkon beradi.
Href yordamida HTML -da qanday giperhavola qilish kerak
Shunday qilib, biz havolani yaratish uchun tag va href atributi zarurligini bilamiz, ularning parametrlari har xil turdagi URL bo'lishi mumkin. Qanday bo'lmasin a bu, keyin ochilish o'rtasida va yopilish veb -sahifada ko'rsatiladigan tarkibni o'z ichiga oladi.
u mazmuni langar deyiladi va matn yoki rasm ko'rinishida taqdim etilishi mumkin (biz qanday qilib havolani rasm qilish haqida quyida batafsilroq gaplashamiz). Men aytganimdek, langar bosilishi mumkin. Keling, matn mazmuniga ega bo'lgan giperhavola misolini ko'rib chiqaylik. HTML kodida uning qurilishi shunday ko'rinadi:
langarlar haqida bir oz
HTTP -dan tashqari, xavfsiz HTTPS protokoli ishlatilishi mumkin. Havola veb -sahifaga olib kelishi shart emas. Bularning barchasi href qiymatiga bog'liq, bu ba'zi fayllarga yo'l bo'lishi mumkin:
//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg
yuklab olish
Veb -sahifada ushbu havola quyidagi ko'rinishga ega bo'ladi:
Brauzer "tushunadi" .zip kengaytmasi bo'lgan ob'ekt faqat yuklab olish uchun ishlatilishi mumkin, bu esa foydalanuvchiga taklif qiladi.
Aytgancha, har qanday faylga yo'l ba'zan FTP () orqali ko'rsatiladi. Keyin href atributining parametri sifatida ishlatiladigan URLda siz HTTP (HTTPS) protokolini FTP bilan almashtirishingiz kerak. Fayl havolasi quyidagicha bo'ladi:
serverdan yuklab olish
Lekin bu hammasi emas. Shunga o'xshash tarzda pseudo-mailto protokoli yordamida elektron pochtaga havola yaratiladi xat yozish vositasiga tez kirish uchun:
xat yozish
Bunday havolani bosgandan so'ng, standart pochta mijozining oynasi paydo bo'lishi kerak, unda siz xabar matnini tuzishingiz va href -dan, siz taxmin qilganingizdek, ko'rsatilgan manzilga yuborishingiz mumkin.
Amalda, ilgari veb -ustalar va katta manbalar egalari pochta yuborish formasiga bir marta bosish orqali kira oladigan foydalanuvchilar va mijozlarning qulayligini ta'minlash uchun elektron havolalarga havolalarni ishlatgan.
Ammo veb -resurslardagi bunday aloqa endi unchalik mashhur emas (ayniqsa, masalan, masalan, uni o'rnatish mumkin), chunki shu tarzda ochilgan pochta manzillari dasturiy ta'minot tomonidan faol ushlab qolinadi va har xil spamerlar tomonidan ishlatiladi.
Men misol sifatida faqat URL manziliga kiritilgan eng keng tarqalgan protokollarni keltirdim, bu esa o'z navbatida giperhavola yaratishda href atributining parametridir. HTTP (HTTPS), FTP va mailto -dan tashqari, torroq profil muammolarini hal qilish uchun boshqalar ham bor. Ehtimol, biz ularni boshqa nashrlarda batafsil ko'rib chiqamiz.
Giperhavola turlari
Keling, havolalarni u yoki bu belgiga ko'ra tasniflashga harakat qilaylik.
Faoliyat sohasi bo'yicha:
1. Tashqi- ular joylashtirilgan saytdan tashqarida joylashgan sahifalarga olib borish;
2. Ichki- bitta veb -resursda joylashgan veb -sahifalarni bog'lash.
Format bo'yicha:
2. Grafik jihatdan f - bu holda, giperhavola langari - bu tasvir (shu jumladan, eskiz), banner, tugma va boshqalar.
Href atributining qiymati sifatida xizmat qiladigan URL turiga ko'ra:
1. Mutlaq, unda ma'lumotlarni uzatish protokoli (masalan, HTTP) va saytning domen nomi (domenlar haqidagi hamma narsada) aniq ko'rsatmasi mavjud.
Bu havolalar tashqi manbalar sahifalariga bog'lanishda ko'proq ishlatiladi. Bunday holda, href qiymati kerakli fayl yoki veb -sahifaning to'liq yo'lini o'z ichiga oladi. Mana, mutlaq giperhavola misoli:
Kontekst - bu nima
2. Nisbatan, yaratish variantlaridan biri, bu veb -saytning ildiz papkasiga nisbatan ko'rsatilgan yo'l bo'ladi (shuning uchun bu turdagi giperhavola nomi). Bunday holda, protokol (HTTP) va sayt domeni URL manzilidan o'chiriladi:
Kontekst - bu nima
Veb -sahifadagi nisbiy giperhavolalar ichki sahifalarga havolalar berishi mumkin. Shunday qilib, ular qisqaroq bo'lib, HTML -ni ishlatishni osonlashtiradi. Albatta, hamma narsa unchalik oddiy emas va kengroq qamrovni talab qiladi, agar siz havolani bajargan bo'lsangiz, ko'rib turganingizdek.
Tag atributlari
Keling, kerakli hrefdan tashqari yana qanday atributlar mavjudligini va ular giperhavola yaratishga qanday ta'sir qilishi mumkinligini ko'rib chiqaylik. Bu boradagi eng to'liq ma'lumotlarni, aytganda, "birinchi qo'ldan" W3C Xalqaro Konsorsiumining rasmiy veb -saytida topish mumkin, u erda eng so'nggi ma'lumotlar eng tez ko'rinadi.
Ular mutlaqo bir xil va joriy varaqda veb -sahifani ochishni boshlashadi. Agar siz havolalarni bosganingizda sahifalar yangi tabda ochilishini xohlasangiz, havolani tuzishda qo'shishingiz kerak bo'sh parametrli maqsadli atribut:
Kontekst - bu nima
Garchi ba'zi veb -ustalar va SEO mutaxassislari tashrif buyuruvchilarga tanlash imkoniyatini berishsa yaxshi bo'ladi, deb hisoblashadi (ya'ni, maqsadli bo'sh joyni yozmang), chunki agar kerak bo'lsa, sahifani kontekst menyusi yordamida yangi tabda ochish mumkin (ko'chirish havola kursorini sichqonchaning o'ng tugmasi bilan bosing va tegishli elementni bosing):
Ko'rib turganingizdek, bu holda foydalanuvchining afzalligi shundaki, veb -sahifani nafaqat yangi tabda, balki ochish ham mumkin. yangi oynada(Bu variantni HTML yordamida amalga oshirish mumkin emas, faqat skriptlar yordamida).
Lekin men ishonamanki, hamma ham yangi foydalanuvchilar mashhur brauzerlarning imkoniyatlari va sozlamalari bilan to'liq tanish emas. O'quvchi tashqi giperhavolani kuzatib, manba sahifasini (uning o'rniga qabul qiluvchining hujjati paydo bo'ladi) ko'zdan g'oyib bo'lib, qalblaridagi yorliqni yopib qo'yishi mumkin.
Shunday qilib, veb -resurs egasi nafaqat istiqbolli tashrifchini yo'qotishi, balki xatti -harakatlarning yomonlashuviga olib kelishi mumkin (), bu esa reytingdagi sahifa pozitsiyalarini yo'qotishiga olib keladi.
Bundan tashqari, sahifani qo'shni tabda ochish qulaylik nuqtai nazaridan juda qulaydir (). Foydalanuvchi veb -sahifaning giperhavolasini kuzatadi, qo'shimcha ma'lumot oladi va hech narsa bo'lmagandek, asosiy materialni o'rganishda davom etadi.
Ob'ektiv rasm yaratish uchun, shuni qo'shimcha qilish kerakki, "target =" _blank "" ni har qanday tashqi havolalarga qo'llash, ma'lum bo'lishicha, xavfsizlik uchun xavf tug'diradi. Agar kimdir manfaatdor bo'lsa, o'qishingiz mumkin, maqsadli bo'sh joyni ishlatishda muammolarni bartaraf etish bo'yicha tavsiyalar berilgan, shuningdek veb -sahifani yangi tabda ochish vazifasini bajarishning muqobil variantlari keltirilgan.
Ko'rinib turibdiki, yangi oynada giperhavola ochish uchun bo'sh qiymatdan foydalanishning barcha ijobiy va salbiy tomonlari qayd etilgan. Agar siz mening blogimdagi maqolalarni o'qiyotgan bo'lsangiz, ehtimol siz maqsadli atributning ushbu parametriga munosabatimni taxmin qilgan bo'lasiz.
Hozirgi vaqtda men uchun uning kamchiliklari minuslardan ustun turadi va men uning mutlaq tarafdoriman. Yuqoridagi faktlarga asoslanib, siz bu masala bo'yicha o'z fikringizni bildirishingiz mumkin. Garchi ... yangi sharoitlarning paydo bo'lishini hisobga olsak, u o'zgarishi mumkin.
Qanday qilib xash havolalarni, langarlarni yaratish kerak va ular nima uchun kerak?
Keyin, men sizning e'tiboringizni boshqa turdagi giperhavolalarga qaratmoqchiman, agar ular veb -sahifadagi materiallar juda katta bo'lsa va navigatsiyani yaxshilash uchun tuzilgan bo'lsa, foydali bo'lishi mumkin.
Misol uchun uzoqqa borishning hojati yo'q, faqat boshida ushbu nashrning mazmunini ko'rib chiqing. Qarang, maqolaning bo'limlari ro'yxati bormi? Bu bo'limlarga giperhavola - bu faqat xash havolalar. Ulardan birini bosgandan so'ng, brauzer sahifani tegishli qism boshlanadigan joyga siljitadi.
Bunday havolalar juda sodda tarzda yaratilgan. Avval siz yaratishingiz kerak langar har qanday HTML tegiga qo'llaniladigan global atributlardan biri bo'lgan identifikator shaklida sahifadagi kerakli joyga tegishli yorliqni joylashtirish orqali.
Identifikatorlarning universalligi tufayli bunday langar teglar veb -sahifaning deyarli istalgan joyiga joylashtirilishi mumkin. Matn odatda paragraflarga bo'linganligi uchun ularni qo'llash mumkin. Men asosan maqolalarni mantiqiy qismlarga ajratadigan langarlarni qo'yaman:
HTML kodidagi barcha kerakli joylarni shu tarzda belgilab, biz ularga giperhavola yaratamiz. Buni amalga oshirish uchun, oxirida URL manzilidagi "/" belgisidan so'ng (href atributining qiymati), biz ketma -ket "#" funt belgisi va teg nomini yozamiz ( ID):
Qanday qilib xash havolalar va langarlarni yaratish mumkin?
Bundan tashqari, agar bunday ankraj havolasi ankrajlar bilan bir xil sahifada joylashtirilgan bo'lsa, href parametri sifatida faqat "#" va ID nomidan tashqari, "hash" qo'shilishidan oldin oxirgi chiziqgacha bo'lgan urlning bir qismi qoldirilishi mumkin. (aslida, bu nisbiy havolalardan biri):
Qanday qilib xash havolalar va langarlarni yaratish mumkin?
Ya'ni, HTML -kodni optimallashtirish bo'yicha qo'llanma uchun tarkib jadvalini tuzishda siz ushbu engil variantni osongina ishlatishingiz mumkin. Agar siz identifikator nomisiz URL sifatida faqat bir funtli belgini qo'ysangiz, u holda bunday havola joylashgan joydan sahifa yuqoriga siljiydi:
Yuqoriga
Aslida, bu eng oddiy variant, bu yana resurslardan foydalanishning qo'shimcha afzalligi bo'lib xizmat qiladi, chunki bu tashrif buyuruvchilarning hayotini osonlashtiradi. Tugmani yaratish uchun langar sifatida siz jozibali tasvirdan foydalanishingiz mumkin.
Pastki chiziqni olib tashlang va havola rangini o'zgartiring
HTML ishlab chiquvchilari u yoki bu jihatni optimallashtirishga yordam beradigan deyarli barcha nuanslarni o'ylab topishdi, xuddi shu narsa giperhavola uchun ham amal qiladi. Masalan, boshqa veb -sahifaga giperhavolani kuzatib, keyin qaytib kelganda, foydalanuvchi giperhavola rangi o'zgarganini ko'radi.
Agar unga bunday harakatlarni bir necha bor takrorlash kerak bo'lsa, u qaysi havolalarni bosganini va qaysi qilmaganligini tezda aniqlay oladi. Bu parametr deyarli har bir brauzerda mavjud. Bu qanchalik qulayligini va qancha vaqtni tejashini tushuntirishga hojat yo'q.
Odatiy bo'lib va CSS giperhavolalarini ishlatmasdan pastki chiziq va uchta rang variantlari bilan ajratilgan, ularning har biri o'ziga xos xususiyatlarga ega:
- havola - veb -sahifadagi giperhavola rangini belgilaydi (sukut bo'yicha ko'k, u # 0000ff bilan belgilanadi);
- alink - veb -brauzer tomonidan qayta ishlanar ekan, faol giperhavola rangi (qizil # ff0000);
- vlink - foydalanuvchi tashrif buyurgan havola rangi (binafsha, # 800080).
Saytingiz uchun brauzerlar ko'rsatadigan havolalar ranglarini qanday almashtirish mumkin? Sahifalar qo'lda tuziladigan oddiy HTML-sayt uchun (va menimcha, zamonaviy kundaliklarda bunday kundaliklar va ochilish sahifalaridan tashqari deyarli to'liq resurslar yo'q), siz faqat kirish yorlig'ini topishingiz kerak.
va unga kerakli parametrlarni belgilang (aytmoqchi, siz rangni belgilash uchun uning nomidan foydalanishingiz mumkin), masalan:
Agar siz veb -resursingizni boshqarish uchun kontentni boshqarish tizimini () o'rnatgan bo'lsangiz, unda qanday dvigateldan foydalanayotganligingizdan qat'i nazar, sarlavha (sarlavha) chiqishi uchun mas'ul bo'lgan faylni tahrir qilish uchun ochish kerak. teg mavjud
.Agar sizning manbangiz WordPress nazorati ostida ishlayotgan bo'lsa, bu g'oyani amalda amalga oshirish uchun siz uni kutubxonadan tanlagan yoki kerakli rasmni yuklagan va joylashtirgan havolaga rasmni avtomatik kiritish vositasi sifatida ishlatishingiz mumkin. matnga:
Keyin olingan rasm kodini tanlang va tahrirlovchining "havola" tugmachasini bosing, shundan so'ng paydo bo'lgan oynaga kerakli nusxalangan giperhavola joylashtiring:
Bugun biz asosiy funktsiyalar haqida gaplashamiz soxta sinf bilan : maqsad CSS -ning ajoyib effektlarini yaratish uchun uni qanday ishlatishingiz mumkin, CSS -dan foydalanib 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 bilan 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 psevdo -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.
Keyin, 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 har qanday brauzerda 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 vudu sehrlari tufayli kerakli CSS3 selektorlari hatto IE6da ham qo'llab -quvvatlanadi.
Xulosa
Psevdo-darslardan foydalanish birinchi navbatda qo'rqinchli 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
Hujjatning tanlangan qismiga o'tish uchun manzilga # belgisi yoziladi va identifikatorning nomi ko'rsatiladi. Masalan, manzilda http://www.w3.org/TR/css3-selectors/#target-pseudo id atributi maqsad-soxta qilib o'rnatilgan elementga o'tish mavjud. Bu manzil yozuvi "maqsadli element" deb nomlanadi. : Target soxta klassi maqsadli elementga, boshqacha aytganda, brauzerning manzil satrida ko'rsatilgan identifikatorga qo'llaniladi.
Belgilanishlar
| Tavsif | Misol | |
|---|---|---|
| <тип> | Qiymat turini ko'rsatadi. | <размер> |
| A & B | Qiymatlar ko'rsatilgan tartibda ko'rsatilishi kerak. | <размер> && <цвет> |
| A | B | Tavsiya etilgan qiymatlardan faqat bittasini tanlash kerakligini ko'rsatadi (A yoki B). | normal | kichik qalpoqchalar |
| A || B | Har bir qiymat yakka o'zi yoki boshqalar bilan birgalikda istalgan tartibda ishlatilishi mumkin. | kenglik || sanash |
| Guruh qiymatlari. | [hosil || kesib o'tish] | |
| * | Nol yoki undan ko'p marta takrorlang. | [,<время>]* |
| + | Bir yoki bir necha marta takrorlang. | <число>+ |
| ? | Belgilangan tur, so'z yoki guruh ixtiyoriy. | kiritish? |
| (A, B) | Hech bo'lmaganda A ni takrorlang, lekin B dan ortiq emas. | <радиус>{1,4} |
| # | Vergul bilan ajratilgan bir yoki bir necha marta takrorlang. | <время># |
Misol
- 1 -hikoya
- 2 -hikoya
1 -hikoya
Qanday qilib qabr qilish kerakligi haqidagi hikoya, ular uni qazishni boshladilar, keyin ko'mdilar va undan nima chiqdi.
2 -hikoya
Ovqatlanish xonasi yonida oltita barmoqli pushti pushti izlar qanday paydo bo'lganligi va nima uchun bunday bo'lganligi haqidagi hikoya.
Bu misolda maqsadli element fon rangi bilan ajratilgan.
Eslatma
3.0 -dan oldingi Safari -da, agar foydalanuvchi brauzer navigatsiyasidan foydalansa (Orqaga va Oldinga tugmalari) uslublar qoidalari qo'llanilmaydi.
Xususiyat
Har bir spetsifikatsiya tasdiqlashning bir necha bosqichlaridan o'tadi.
- Tavsiya - Bu spetsifikatsiya W3C tomonidan tasdiqlangan va standart sifatida tavsiya etilgan.
- Nomzod tavsiyanomasi ( Mumkin bo'lgan tavsiya) - standart uchun mas'ul bo'lgan guruh o'z maqsadlariga javob berishidan mamnun, lekin standartni amalga oshirish uchun ishlab chiquvchilar jamoasining yordami zarur.
- Tavsiya etilgan tavsiya ( Tavsiya etilgan tavsiya) - Bu vaqtda hujjat W3C maslahat kengashiga yakuniy tasdiqlash uchun taqdim etiladi.
- Ishchi loyiha - muhokamadan so'ng va jamoatchilik ko'rib chiqish uchun qayta ko'rib chiqilgandan so'ng, loyihaning yanada etuk versiyasi.
- Tahririyat qoralamasi ( Tahririy qoralama) - loyiha muharrirlari tahrir qilgandan so'ng standartning qoralama versiyasi.
- Qoralama ( Loyiha spetsifikatsiyasi) - standartning birinchi loyihasi.
Brauzerlar
Brauzer jadvalida quyidagi qoidalar qo'llaniladi.