Amakilasi nama-ID Usizo Ukwandisa i-CSS yakho
Ukwakha amawebusayithi kuWebhu wanamuhla kudinga ukuqonda okujulile kwe-CSS (Ama-Sheet Style Style). Lezi yiziqondiso ozinikeza iwebhusayithi ukucacisa ukuthi kuzobe kanjani ukufaka efasiteleni lesiphequluli. Usebenzisa uchungechunge lwe "izitayela" kumbhalo wakho we-HTML ozokwenza ukubukeka nokuzizwa kwekhasi lakho lewebhu.
Kunezindlela eziningi zokusebenzisa lezo zitayela ezibalwe ngenhla kunoma iyiphi idokhumenti, kodwa ngokuvamile uthanda ukusebenzisa isitayela kwezinye zezici embonweni, kodwa hhayi zonke izimo zalowo mbhalo.
Ungase futhi ufuna ukwakha isitayela ongayisebenzisa ezinkathini eziningana kumadokhumenti, ngaphandle kokuphindaphinda umbuso wesitayela sehlakalo ngasinye. Ukufeza lezi zitayela ezifunayo, uzosebenzisa izimfanelo zekhasi ne-ID ye-HTML. Lezi zimfanelo ziyizimfanelo zomhlaba wonke ezingasetshenziswa cishe kuwo wonke amathegi we-HTML .Lokhu kusho ukuthi noma ngabe uyindlela yokwahlukanisa, izigaba, izixhumanisi, uhlu noma ezinye zezingxenye ze-HTML kumadokhumenti wakho, ungashintshela izici ze-class kanye ne-ID sikusize ufeze lo msebenzi!
Selection Class
Ikhethi yeklasi ikuvumela ukuthi usethe izitayela eziningi kuleso sici noma umaka kumadokhumenti. Isibonelo, ungase ufune ukuba nezigaba ezithile zombhalo wakho zikhishwe ngombala ohlukile kulo lonke umbhalo kulo mbhalo. Lezi zigaba ezigqamile zingase zibe "isaziso" osibekayo ekhasini. Ungabela izigaba zakho ngamakilasi afana nalokhu:
p {umbala: # 0000ff; }}
p.alert {umbala: # ff0000; }}
Lezi zitayela zizofaka umbala wazo zonke izigaba zibe ziluhlaza okwesibhakabhaka (# 0000ff), kodwa noma yikuphi isigaba ngekhwalithi yesigaba "sokuqaphelisa" kunalokho kuzodingeka kubhalwe ngokubomvu (# ff0000). Lokhu kungenxa yokuthi isici seklasi sinemininingwane ephakeme kunomthetho wokuqala we-CSS, osebenzisa kuphela umakhethi wamathegi.
Lapho usebenza ne-CSS, umthetho ocacile ozobe uwedlula ngaphezulu. Ngakho-ke kulesi sibonelo, umthetho ovamile ubeka umbala wazo zonke izigaba, kodwa owesibili, umthetho oqondile kunokwedlulela ngaphezulu okubeka kuphela kwezinye izigaba.
Nansi ukuthi lokhu kungasetshenziswa kanjani emakethe we-HTML:
Lesi sigaba sizoboniswa nge-blue, okuyinto okuzenzakalelayo kwekhasi.
Lesi sigaba sizoba sesibhakabhaka.
Futhi lesi sigaba sizoboniswa ebomvu ngoba isici seklasi sizobe sibhala umbala ojwayelekile ohlaza okwesibhakabhaka kusuka kumlingisi wokukhetha wesici.
Kuleso sibonelo, isitayela se "p.alert" sizosebenza kuphela kuzigaba zesigaba esisebenzisa leso sigaba "sokuxwayisa." Uma ufuna ukusebenzisa leli klasi kuzo zonke izakhi ze-HTML, uzomane ususe isici se-HTML kusukela ekuqaleni isitayela sesitayela (qiniseka ukuthi ushiya isikhathi (.) endaweni), kanje:
.alert {umbala wesizinda: # ff0000;}
Leli klasi selitholakale kunoma iyiphi into eyidinga. Noma iyiphi ingxenye ye-HTML yakho ene-value attribute ye "isaziso" manje izothola lesi sitayela. Ku-HTML ngezansi, sinezigaba zombili nesigaba sesihloko sesibili esisebenzisa isigaba "saziso". Zombili lezi zizoba nombala-obomvu obomvu ngokusekelwe ku-CSS esivele sibonise.
Lesi sigaba sizobhalwa ngokubomvu.
Futhi le h2 izophinde ibomvu.
Emawebhusayithi namuhla, izimfanelo zesigaba zivame ukusetshenziselwa izakhi eziningi ngoba kulula ukusebenzisana nombono othize ama-ID. Uzothola amakhasi amaningi we-HTML okwamanje agcwaliswe ngezici zeklasi, ezinye zazo eziphindaphindiwe izikhathi eziningi kumadokhumenti kanye nezinye ezingabonakala kuphela.
ID Selectors
Isikhethi se- ID sikuvumela ukuthi unikeze isitayela esithile ngaphandle kokuzihlanganisa ngetekisi noma esinye isici se-HTML . Yisho ukuthi ube nokuhlukaniswa emakethe wakho we-HTML equkethe ulwazi mayelana nomcimbi.
Unganika lesi sigaba umfanelo we-ID we "umcimbi", bese-ke uma ufuna ukuchaza lokho kuhlukaniswa nomngcele omnyama we-1 pixel ubhala ikhodi ye-ID kanje:
#event {umngcele: 1px oqinile # 000; }}
Inselelo nabakhethi be-ID ukuthi ayikwazi ukuphindaphindiwe kumqulu we-HTML. Kumele kube okuyingqayizivele (ungasebenzisa i-ID efanayo kumakhasi amaningi esayithi lakho, kodwa kuphela kanye kuphela kumbhalo ngamunye we-HTML). Ngakho-ke uma ngabe unemicimbi engu-3 bonke abayidingayo lomngcele, kuzodingeka ubanikeze izimfanelo ze-ID ze- "event1", "event2" kanye "nesenzakalo3" nesitayela ngasinye. Ngakho-ke, kuyoba lula kakhulu ukusebenzisa isichazamazwi esilandela ngenhla ye "umcimbi" futhi isitayela bonke ngesikhathi esisodwa.
Enye inselele ngezimpawu ze- ID ukuthi zinezici eziphezulu kunezimfanelo zesigaba. Lokhu kusho ukuthi uma udinga ukuba ne-CSS engaphezu kwesitayela esasungulwe ngaphambili, kungaba nzima ukwenza kanjalo uma uthembele kakhulu kuma-ID. Kungenxa yalesi sizathu ukuthi abathuthukisi abaningi bewebhu baye basuka ekusebenziseni ama-ID kumakethe abo, noma ngabe bahlose ukusebenzisa leyo nzuzo kanye, futhi esikhundleni salokho baphendukela ezinkampanini ezithile eziqondene naso cishe zonke izitayela.
Indawo eyodwa lapho ubunikazi be-ID ababa khona khona uma ufuna ukudala ikhasi elinama-anchor links. Isibonelo, uma unewebhusayithi ye-parallax yesitayela equkethe konke okuqukethwe ekhasini elilodwa elinamaxhumanisi athi "gxuma" ezingxenyeni ezihlukahlukene zalelo khasi. Lokhu kwenziwa ngokusebenzisa izici ze-ID nezixhumanisi zombhalo ezisebenzisa lezi zixhumanisi ze-anchor.
Ubungeke wengeze ukubaluleka kwalowo mbono, olandelwa yi- # uphawu, kumfanelo ye-href yesixhumanisi, njengale:
Lesi yisixhumanisi
Uma uqhafazwe noma uthintwa, lesi sixhumanisi sizodlulela engxenyeni yekhasi elinemfanelo yale ID. Uma kungekho isici ekhasini elisebenzisa leli xabiso le-ID, isixhumanisi ngeke senze noma yini.
Khumbula, uma ufuna ukudala ikhasi elixhumanisa kwisayithi, kuzodingeka ukuthi kusetshenziswe izimfanelo ze-ID, kodwa ungakwazi ukubuyela emakilasini ngezinhloso ezijwayelekile zeCSS styling. Yile ndlela engimaka ngayo amakhasi namhlanje - Ngasebenzisa abakhethi beklasi ngangokunokwenzeka futhi ngiya kuma-ID kuphela lapho ngidinga umphumela wokusebenza hhayi nje njenge-hook ye-CSS kodwa futhi njengesixhumanisi sekhasi.
Isihloko sokuqala sikaJennifer Krynin. Ihlelwe nguJeremy Girard ngo-8 / 9/17