Indlela yokusebenzisa iiKlasi ezininzi zeCSS kwi-Single Element

Awunagxininiswa kwiklasi enye yeCSS nganye.

AmaSpredishithi eHlobo lokuHlola (CSS) akuvumela ukuba uchaze ukubonakala kwezinto ngokubheka kwiimpawu ozisebenzisayo kuloo nto. Ezi zimpawu zinokuba yiyo kunye ne-ID okanye iklasi kwaye, njengezo zonke iimpawu, zongeza ulwazi oluncedo kwizinto eziqhotyoshelwe kuzo. Ngokuxhomekeke ekubeni yeyiphi impawu oyifakayo kwi-element, ungabhala umkhethi we-CSS ukusebenzisa iindlela ezibonakalayo ezifunekayo ukuphumeza ukubonakala nokuziva ngaloo nto kunye newebhusayithi ngokupheleleyo.

Nangona ii-ID okanye iiklasi zisebenza ngenjongo yokubambisana nazo nge-CSS, iindlela zokuloba zewebhu zangoku ziyakuthanda iiklasi kwi-IDs, inxenye, kuba zingabalulekanga kwaye zilula ukusebenzisana kunye. Ewe, uya kufumana amaninzi amaninzi asebenzisa ii-ID, kodwa ezo zimbonakaliso zisetyenziswe ngokungaphantsi kunexesha elidlulileyo ngexesha iiklasi zithathile amaphepha ewebhu anamhlanje.

IiKlasi eziBodwa okanye ezininzi kwiCSS?

Kwiimeko ezininzi unika isabelo esinye seklasi kwinto, kodwa empeleni awukhawulelanga kwiklasi enye nje ngendlela onayo ii-ID. Nangona i-element ingaba nekhwalithi enye ye-ID kuphela, unako ukunika iiklasi ezininzi iinkalo kwaye, ngezinye iimeko, ukwenza njalo kuya kwenza ukuba iphepha lakho libe lula ngakumbi kwisitayela kwaye ziguqule ngakumbi!

Ukuba udinga ukunika iiklasi ezininzi kwiqela, unokongeza iiklasi ezongezelelweyo uze uzihlukanise kunye nesithuba kwindawo yakho.

Ngokomzekelo, le mhlathi ineeklasi ezintathu:

ukutsalathisa okubonakalayo ngakwesobunxele "> Oku kuya kuba yombhalo womhlathi

Oku kuseka ezi zilandelayo zithathu kwiklasi yomhlathi:

  • Pullquote
  • Okufakiwe
  • Khohlo

Qaphela izikhala phakathi komnye walezi zithethe zeklasi. Ezi zithuba zizibeka ezihlukeneyo, kwiiklasi ezizimeleyo. Oku kungenxa yoko amagama eklasi awanakukwazi ukufumana izikhala kuzo, kuba ukwenza njalo kuya kubabeka njengeeklasi ezihlukeneyo.

Ngokomzekelo, ukuba usebenzisa "i-dragquote-featured-left" ngaphandle kwendawo, bekuza kuba yiklasi lexabiso elilodwa, kodwa umzekelo ongentla, apho la magama amathathu ahlukaniswe khona nebala, awamisela njengamaxabiso athile. Kubalulekile ukuyiqonda le ngcamango njengoko ugqiba ukuba yeyiphi imilinganiselo yeklasi oyisebenzisayo kwiwebhusayithi yakho.

Emva kokuba unamanani eklasi lakho kwi-HTML, unako ukubanika ezi njengeklasi kwi-CSS yakho kwaye usebenzise izitayela ofuna ukuzongeza. Umzekelo.

.pullquote {...}
.fomityi {...}
p.left {...}

Kule mizekelo, izibhengezo ze-CSS kunye namanani eempawu ziza kuba phakathi kwe-brace curly, yindlela ezo zitawuliso eziza kusetyenziswa ngayo kwi-selector efanelekileyo.

Qaphela - ukuba ubeka iklasi kwisigaba esithile (umzekelo, p.left), unokusisebenzisa njengenxalenye yoluhlu lweeklasi; Noko ke, qaphela ukuba kuya kubachaphazela kuphela ezo zinto ezichazwe kwiCSS. Ngamanye amazwi, isitayela se-p.left siya kusebenza kuphela kumhlathi kule klasi ukususela oko umkhethi wakho ekuthiwa uyifake "kwimimiselo ngexabiso leklasi 'lasekhohlo'". Ngokwahlukileyo, abanye abakhethiweyo ababini kumzekelo abakucacisi into ethile, ngoko baya kusebenza kunoma yiphi na into esebenzisa ezo xabiso zeklasi.

Iingenelelo zeeklasi ezininzi

Iiklasi ezininzi zingenza kube lula ukongeza imiphumo ekhethekileyo kwizinto ngaphandle kokudala isitayela esitsha saloo nto.

Ngokomzekelo, unokuba ufuna ukukwazi ukuthambisa izinto kwikhohlo okanye ngokukhawuleza. Ungabhala iiklasi ezimbini ezishiya kwaye zihamba ngokuhamba nje; ngakwesobunxele; kwaye ujikeleze: kunene; kuzo. Emva koko, naliphi na xa unesici kufuneka ujikeleze ngakwesobunxele, unokongeza nje iklasi "ekhohlokileyo" kwiklasi yeklasi.

Kukho umgca omhle ukuhamba apha, nangona kunjalo. Khumbula ukuba imigangatho yewebhu ibonisa ukuhlukana kwesitayela nesakhiwo. Ulwakhiwo lwenziwa nge HTML ngexesha isitayela seCSS.

Ukuba ixwebhu lakho le-HTML lizaliswe ngamaqhosha onke anamagama eklasi anjenge "obomvu" okanye "asekhohlo", awamagama agunyazisa ukuba izinto zifanele zibukeke kunjani, ziwela ngaphantsi komgca phakathi kwesakhiwo kunye nesitayela. Ndizama ukunciphisa amagama amacandelo angama-semantic ngokungangoko kunokwenzeka ngenxa yesi sizathu.

Iiklasi ezininzi, iSemantics, neJavaScript

Enye inzuzo ekusebenziseni iiklasi ezininzi kukuba kukunika ezininzi iindlela zokusebenzisana.

Ungasebenzisa iklasi elitsha kwizinto ezikhoyo usebenzisa iJavaScript ngaphandle kokususa nayiphi na iiklasi zokuqala. Ungasebenzisa kwakhona iklasi ukuchaza i- semantics yento . Oku kuthetha ukuba unokongeza kwiiklasi ezongezelelweyo ukuchaza ukuba yintoni le nto ithetha ukutyhila. Yile ndlela i-Microformats isebenza ngayo.

Iingxaki zamaCandelo amaninzi

Iyona nto inzima kakhulu ekusebenziseni iiklasi ezininzi kwizinto zakho kukuba kunokubenza bangabonakali ukujonga nokulawula ixesha. Kungaba nzima ukufumanisa ukuba ziphi izitayela ezichaphazela into kwaye ukuba ziphi na iempendulo ezichaphazelayo. Izikhokelo ezininzi ezikhoyo namhlanje, njengeBootstrap, zisebenzise kakhulu izinto kunye neeklasi ezininzi. Le khowudi inokuphuma ngaphandle kwaye kunzima ukusebenza ngokukhawuleza ukuba awuyiqapheli.

Xa usebenzisa iiklasi ezininzi, uqhuba umngcipheko wokuba nesitayela kwiklasi enye yongaphezulu kwesitayela somnye nangona ungazange uhlose oku. Oku kungenza kube nzima ukuqonda ukuba kutheni izitayela zakho zingasetyenziswanga nokuba zibonakala ngathi zifanele.

Kufuneka uqaphele inkcazo, kunye neempawu ezisetyenziswe kwento enye!

Ngokusebenzisa isixhobo esinjenge-Webmaster amathuluzi kwi-Chrome, unokubona ngokulula ukuba iiklasi zakho zichaphazela njani iindlela zakho kwaye ugweme le ngxaki yeendlela eziphikisanayo kunye neempawu.

Inqaku loqobo loJennifer Krynin. Ehlelwe nguJeremy Girard ngo-8 / 7/17