Iiklasi kunye ne-IDs Uncedo Ukwandisa i-CSS yakho
Ukwakha iiwebhsayithi kwiWebhu yanamhlanje kudinga ukuqonda ngokujulileyo kweCSS (iifayile zeStackading Sheets). Le yimiyalelo oyinike iwebhusayithi ukujonga indlela eya kubeka ngayo kwiwindow. Usebenzisa uchungechunge lwe "izitayela" kwidokhumenti yakho ye-HTML eya kudala ukubukeka nokuvakalelwa kwekhasi lakho lewebhu.
Kukho iindlela ezininzi zokusebenzisa ezi ndlela ezikhankanyiweyo ngasentla kuwo wonke umqulu, kodwa ngokukhawuleza ufuna ukusebenzisa isitala kuphela kwezinye izinto kwixwebhu, kodwa kungekhona zonke iziganeko zaloo nto.
Ungaphinda ufune ukudala isitayela ongayisebenzisa kwizinto eziliqela kwidokhumenti, ngaphandle kokuphindaphinda umgaqo wesitayela kumzekelo ngamnye. Ukuze ufezekise ezi zindlela ezifunwayo, uzakusebenzisa iimpawu zeklasi kunye ne-ID. Ezi zimpawu ziyimpawu zomhlaba jikelele ezingasetyenziswa malunga neyonke itekisi ye-HTML. Oko kuthetha ukuba ngaba ukwahlukana kwamagama, imihlathi, izixhumanisi, uluhlu okanye nayiphi na enye yeengxenye ze HTML kwidokhumenti yakho, unako ukubuyela kwiiklasi kunye neempawu ze-ID kukunceda ufeze lo msebenzi!
Selectioners
Ikhethi yeklasi ikuvumela ukuba ubeke izitayela ezininzi kwizinto ezifanayo okanye uthabe kwirekhodi. Umzekelo, unokuba ufuna ukufumana amacandelo athile okubhaliweyo wakho kumbhali ohlukileyo kuwo wonke umbhalo okwiphepha. Ezi ziqendu eziqakathekileyo zingaba "uqaphile" obekayo kwiphepha. Unokwabela imihlathi yakho ngeeklasi ezifana nale:
{{umbala: # 0000ff; }
umbala {umbala: # ff0000; }
Ezi zitawu ziza kubeka umbala wazo zonke iziqendu kuluhlaza okwesibhakabhaka (# 0000ff), kodwa nawuphi na umhlathi kunye nombakala weklasi we "uqaphile" kunokuthi ube ngumzobo obomvu (# ff0000). Oku kungenxa yokuba uphawu lweklasi luneenkcukacha eziphezulu ngaphezu kolawulo lokuqala lweCSS, olusebenzisa kuphela umkhethi wethegi.
Xa usebenza kunye neCSS, umgaqo othe ngqo uya kunqumla omnye othe ngqo. Ngoko kulo mzekelo, umgaqo oqhelekileyo ubeka umbala wazo zonke iziqendu, kodwa okwesibini, umgaqo othe ngqo ngakumbi kunokuba ubeka ngaphezu kweminye imihlathi.
Nantsi indlela oku kungasetyenziselwa ngayo umlenze we HTML:
Lo mhlathi uza kuboniswa ngokuluhlaza okwesibhakabhaka, okukuphela kwephepha.
Lo mhlathi uza kuba wubuluhlaza.
Kwaye le mhlathi iya kubonakala ebomvu kuba isalathisi seklasi yayiza kubhala umbala obala okwesibhakabhaka ukusuka kwindlela yokukhetha inketho.
Ngaloo mzekelo, isitayela se "p.alert" sizakusebenza kuphela kumacandelo omhlathi abasebenzisa loo "klasi". Ukuba ufuna ukusebenzisa le klasi kwizinto ezininzi ze-HTML, unokususa kuphela isici se-HTML ukususela ekuqaleni umnxeba wesitayela (qiniseka ukuba ushiye ixesha (.) endaweni), njengale:
.alert {umbala wesiqalo: # ff0000;}
Eli klasi ngoku lifumaneke nayiphi na into eyifunayo. Naliphi na iqhosha lakho le-HTML elinenani lexabiso le-class of "uqaphile" ngoku liya kufumana le ndlela. Ku-HTML apha ngezantsi, sinesibili umhlathi kunye nenqanaba lesi-2 elisezantsi elisebenzisa "isilumkiso" kwiklasi. Bobabini bezo babe nombala-obomvu obomvu ngokusekelwe kwiCSS esiyibonisile.
Lo mhlathi uza kubhalwa obomvu.
kwaye le h2 iya kubomvu.
Kwiwebhusayithi namhlanje, iimpawu zeklasi zihlala zisetyenziswe kwizinto ezininzi kuba kulula ukusebenzisana kunye nombono othile othi ii-ID ziyiyo. Uza kufumana amanqaku amaninzi e-HTML azaliswe ngamanqaku eklasi, amanye awo aphindaphindiweyo kaninzi kwidokhumenti kunye nabanye abangabonakala kuphela.
Selectioners ID
Isikhethi se- ID siyakuvumela ukuba unike igama kwisitayela esithile ngaphandle kokudibanisa nethegi okanye enye into ye-HTML . Yithi unesahlulo kwi-HTML markup equlethe ulwazi malunga nesiganeko.
Unokwenza le ncahluko ibonakaliswe yi-ID "yesiganeko", kwaye ke ukuba ufuna ukucacisa eso sahlulo ngomda omnyama we-1-pixel ubhala ikhowudi ye-ID njengale:
# ozayo {umngcele: 1px oqinile # 000; }
Umngeni kunye nabakhethi be-ID kukuba abakwazi ukuphindaphinda kwixwebhu le-HTML. Zimele zizodwa (ungasebenzisa i-ID efanayo kumaphepha amaninzi ewebsite yakho, kodwa kanye kuphela kwixwebhu ngalinye le-HTML). Ngoko ukuba unemicimbi engama-3 ekufuneka yonke loo mida, kufuneka ubenike izibhengezo ze-ID "yesiganeko1", "isiganeko2" kunye "nesiganeko3" kunye nesitayela ngasinye. Ngoko ke, kuya kuba lula kakhulu ukusebenzisa umxholo weklasi okhankanywe ngasentla apha "kunye nesitayela kuzo zonke.
Enye inselele ngeempawu ze- ID kukuba zinendawo ephezulu ngaphezu kweempawu zeklasi. Oku kuthetha ukuba ukuba ufuna ukuba neCSS eyongamela isitayela esasisungulwe ngaphambili, kunokuba kunzima ukwenza njalo ukuba uthembele kakhulu kwii-ID. Kungenxa yesi sizathu ukuba abaninzi abathuthukisi bewebhu baye bathabatha ekusebenziseni ii-ID kwi-markup yabo, nokuba ngaba bazimisele ukusebenzisa le xabiso kanye kanye, kwaye baye endaweni yabo bajika kwiimpawu ezithile zeklasi malunga nazo zonke izitayela.
Ummandla omnye apho iimpawu ze-ID ziza kudlala xa ufuna ukudala iphepha elinamaqhosha e-anchor. Ngokomzekelo, ukuba unayo iwebhusayithi ye-parallax equlethe yonke umxholo kwiphepha elilodwa kunye nezixhumanisi "zinyuka" kwiindawo ezahlukeneyo zephepha. Oku kwenziwa ngokusebenzisa iimpawu ze-ID kunye nezikhonkco zetekisi ezisetyenziselwa ezi zikhonkwane.
Uza kufaka nje ixabiso leloo mfanelo, elandelwa ngulophawu lwama- #, kwi-attribute ye-href yekhonkco, njengale:
Le ngqamaniso
Xa uqakraza okanye uchukumise, le nxu lumene kwiqonga lephepha elinalo mbonakalo. Ukuba akukho nxalenye kwiphepha elisebenzise le xabiso leSazisi, unxibelelwano aluyi kwenza nantoni na.
Khumbula, ukuba ufuna ukudala iphepha elikudibanisa kwisayithi, kuya kufuneka ukuba kusetyenziswe iimpawu ze-ID, kodwa unokwazi ukubuyela kwiiklasi zeenjongo zeCSS jikelele. Yile ndlela endenza ngayo amaphepha namhlanje - ndasebenzisa abakhethi beklasi ngokubanzi kunokwenzeka kwaye ndabuyela kwii-ID xa ndifuna i-attribute ukuba ingenzi nje kuphela njengekhonkco yeCSS kodwa kunye nekhonkco lekhasi.
Inqaku loqobo loJennifer Krynin. Ehlelwe nguJeremy Girard ngomhla we-8 / 9/17