Ukusebenzisa i-CSS ukulungelelanisa umfanekiso kwicala lasekhohlo lwePawulo lwephepha lewebhu
Khangela malunga naliphi na iphepha lewebhu namhlanje uze ubone ukudibanisa itekisi kunye nemifanekiso eyenza ubuninzi balawo maphepha. Kulula kakhulu ukongeza umbhalo kunye nemifanekiso kwiphepha . Isicatshulwa sibhalwe ngeetekethi ze- HTML eziqhelekileyo ezifana neziqendu, uluhlu, kunye nezihloko, ngelixa imifanekiso ifakiwe usebenzisa isici .
Ukukwazi ukwenza loo mbhalo kunye nezo mifanekiso zisebenza kakuhle kunye nento eyenza abaqulunqi bewebhu abakhulu! Awufuni nje ukuba itekisi yakho kunye nemifanekiso ibonakale enye emva komnye, yile ndlela ezi zinto ziza kubeka ngayo ngokuzenzekelayo. Hayi, ufuna ukulawulwa kwindlela umyalezo kunye neemifanekiso ezihamba ngayo kunye nento ekugqibeleni iya kuba yileyayilwayo yewebhusayithi yakho.
Ukuba nomfanekiso ohambelana nelokhohlo kwiphepha ngelixa umxholo wale phepha ujikeleza ngakulo unyango oluqhelekileyo lwezoyilo oluprinta kunye namaphepha ewebhu. Ngokwemibandela yewebhu, le mpawu iyaziwa njengezantantyambo yomfanekiso . Le ndlela ifumaneka nepropati yeCSS ye "float". Le propati ivumela ukuba isicatshulwa sijikeleze ngokujikeleza umfanekiso ohambelana nekhohlo ukuya kwicala lasekunene. (Okanye ujikeleze umfanekiso ohambelana nelokunene kwicala lasekhohlo.) Masakhe sijonge indlela yokuphumeza le mpawu.
Qalisa nge HTML
Into yokuqala oya kuyidinga ukuyenza ine-HTML yokusebenza nayo. Ngokomzekelo wethu, siza kubhala umhlathi wesicatshulwa uze ungeze umfanekiso ekuqaleni komhlathi (phambi kombhalo, kodwa emva kokusuka
ithegi). Nantsi le meko ye HTML ibonakala ngathi:
Ngokungagqibekanga, iphepha lethu lewebhu liza kubonakalisa ngomfanekiso ngaphezu kwetawutriki. Oku kungenxa yokuba imifanekiso iindawo zokuvimba kwi-HTML. Oku kuthetha ukuba umkhangeli wesibonakaliso ubonisa ikhefu lokuhlula ngaphambi nangemva kwesakhiwo somfanekiso ngokuzenzakalelayo. Siza kutshintsha ukujonga okungaqhelekanga ngokujika kwiCSS. Okokuqala, nangona kunjalo, siza kudibanisa ixabiso leklasi kwisiqalo sethu somfanekiso . Eli nqanaba liya kwenza "njenge-hook" esiza kuyisebenzisa kwiCSS yethu kamva.
Qaphela ukuba le klasi ye "ngakwesobunxele" ayinanto nhlobo! Ukuze sikwazi ukufeza isitayela sethu esifuna, kufuneka sisebenzise iCSS ngokuzayo.
Izitayela zeCSS
Nge-HTML yethu kwindawo, kubandakanywa nesicatshulwa sethu seklasi "sekhohlo", ngoku singaya kwiCSS. Siza kufaka umgaqo kwiifayile zethu zetekethi eziza kuhambisa loo mfanekiso kwaye zongeze i-padding encane ecaleni kwayo ukuze umbhalo oza kuwugqwesa umz Nantsi i-CSS onokuyibhala:
.left {float: ngakwesobunxele; ukupakisha: 0 20px 20px 0; }Le ndlela ifaka umfanekiso okhohlo kwaye yongeza intambo encinane (isebenzisa i-CSS shorthand) ukuya ngasekunene nakwicala yomfanekiso.
Ukuba uhlolisise iphepha eliqulethe i-HTML kwisiphequluli, umfanekiso ubuya kulungelelaniswa ngakwesobunxele kwaye umbhalo wesigcawu uza kubonakala ungakwesokudla kunye nesixa esifanelekileyo sokupaka phakathi kwababini. Qaphela ukuba ixabiso leklasi "lokushiya" esilisetyenziswayo lingahambelani. Singazibiza ngokuba yiyiphi na into kuba igama "elishiyekileyo" alenzi nto yedwa. Oku kufuna ukuba neklasi yembonakalo kwi-HTML esebenzayo ngesitayela esiyiyo yeCSS esichazela utshintsho olubonakalayo olufuna ukuyenza.
Ezinye iindlela zokufezekisa ezi zitayela
Le ndlela yokunika umfanekiso wesakhiwo umxholo weklasi uze usebenzise isitayela esiqhelekileyo seCSS esithengisa i-element yindlela enye kuphela ongayifeza ngayo le "mfanekiso ohambelana nomfanekiso". Ungathatha ixabiso leklasini ngaphandle komfanekiso kunye nesitayela ngeCSS ngokubhala umkhethi-khethi othe ngqo. Ngokomzekelo, makhe sijonge umzekelo apho loo mfanekiso ungaphakathi ngaphakathi kwesahlulo ngexabiso leklasi "lokubambisene nomxholo".
Ukubhala lo mfanekiso, ungabhala le CSS:
.inomxholo we-img {float: kwesobunxele; ukupakisha: 0 20px 20px 0; }Kulo mdlalo, umfanekiso wethu uya kulungelelaniswa ngakwesobunxele, kunye nesicatshulwa esilungeze ngapha nangaphambili, kodwa asizange sidinge ixabiso leklasi elongezelelweyo kwi-markup yethu. Ukwenza oku kumlinganiselo kunokunceda ukudala ifayile ye-HTML encinci, eya kuba lula ukulawula kwaye inokukunceda ukuphucula ukusebenza.
Ekugqibeleni, unokongeza ngisho nezitayela ngqo kwi-HTML markup, njengale:
Le ndlela ibizwa ngokuba " izitayela ezisezantsi ". Akucebisekanga kuba idibanisa ngokucacileyo isitayela sento kunye nokukhangela kwayo. I-Web best practices ifuna ukuba isitayela kunye nesakhiwo sephepha kufuneka zihlale zihluke. Oku kunceda xa iphepha lakho lifuna ukutshintsha indlela yalo kunye nokujonga ubukhulu beeskrini ezahlukeneyo kunye nezixhobo ezinewebhusayithi ephendulayo. Ukuba nesitayela sephepha elidibeneyo kwi-HTML kuya kwenza kube nzima ngakumbi ukubhala imibuzo yemidiya eya kutshintshela ukubukeka kwendawo yakho njengoko kuyimfuneko kwizo zikrini ezahlukeneyo.
Inqaku loqobo loJennifer Krynin. Ulungiswe nguJeremy Girard ngomhla we-4 / 3/17.