Ho sebelisa CSS ho lumellana setšoantšo lehlakoreng le letšehali la Leqephe la leqephe la marang-rang
Shebang hoo e batlang e le leqephe la websaete kajeno mme o tla bona motsoako oa litemana le litšoantšo tse etsang boholo ba maqephe ao. Ho bonolo haholo ho kenya mongolo le litšoantšo ho leqephe . Mongolo o ngotsoe ka mekhahlelo e tloaelehileng ea HTML joaloka lirapa, lethathamo, le lihlooho, ha litšoantšo li kenyelelitsoe ho sebelisa sehlahisoa .
Bokhoni ba ho etsa hore temana eo le litšoantšo tseo li sebetse hantle ke sona se etsang hore baetsi ba websaete ba be le likarolo tse ngata! Ha u batle feela hore temana ea hau le litšoantšo li hlahe ka morao ho e 'ngoe, ke kamoo lihlooho tsena tsa litekanyetso li tla limela ka ho sa feleng. Che, o batla ho laola hore na litemana le litšoantšo li phalla joang ho seo qetellong e tla ba sebopeho sa hau sa marang-rang sa marang-rang.
Ho ba le setšoantšo se amanang le lehlakoreng le letšehali la leqephe ha temana ea leqephe leo e phalla ho potoloha ke mokhoa o tloaelehileng oa phekolo ea moqapi o hatisitsoeng le oa maqephe a maqephe. Ka mantsoe a web, phello ena e tsejoa e le e phallang setšoantšong . Mokhoa ona o finyelloa ka thepa ea CSS ea "float". Setša sena se lumella hore molaetsa o phalle ho pota setšoantšo se tsamaeang ka letsohong le letšehali ho lehlakoreng le letona. (Kapa ho potoloha sets'oants'o se nepahetseng ho lehlakoreng la lona le letšehali.) A re hlahlobeng hore na re ka finyella joang ponahalo ena.
Qala ka HTML
Ntho ea pele eo u tla lokela ho e etsa ke ea HTML e sebetsang le eona. Bakeng sa mohlala oa rona, re tla ngola serapa sa temana ebe re eketsa setšoantšo qalong ea serapa (pele ho temana, empa ka mor'a hore ho buuoe
tag). Mona ke seo markup a HTML a shebahalang:
Ka ho feletseng, leqephe la rona la marang-rang le ne le tla bontša ka setšoantšo ka holimo ho temana. Lebaka ke hobane litšoantšo ke likarolo tse thibelang sekhahla HTML. Sena se bolela hore sebapali se bontša mekhahlelo ea mela pele le ka mor'a setšoantšo sa setšoantšo ka ho sa feleng. Re tla fetola ponahalo ena e sa feleng ka ho retelehela ho CSS. Ea pele, leha ho le joalo, re tla eketsa bohlokoa ba sehlopha ho setho sa rona sa setšoantšo . Sehlopha seo se tla sebetsa e le "hook" eo re tla e sebelisa nakong ea CSS ea rona hamorao.
Hlokomela hore sehlopha sena sa "le letšehali" ha se etse letho! E le hore re finyelle mokhoa oa rona o lakatsang, re lokela ho sebelisa CSS e latelang.
CSS Styles
Ka HTML ea rona sebakeng, ho kenyelletsa le sebopeho sa rona sa tlelase sa "letšehali", joale re ka retelehela ho CSS. Re ne re tla eketsa molao ho mechine ea rona ea litšoantšo e neng e tla phaphama setšoantšo seo le ho eketsa ho penya ho le haufi le eona e le hore temana e tla qetella e pota-potile setšoantšo ha e fane ka eona haholo. Mona ke CSS eo u ka e ngolang:
.left {fula: ho le letšehali; ho palama: 0 20px 20px 0; }}Setaele sena se phahamisa setšoantšo ka letsohong le letšehali 'me se phaella ka mokhoa o fokolang (ho sebelisa tse ling tsa CSS shorthand) ho ea ka ho le letona le ka tlaase ho setšoantšo.
Haeba u hlahlobile leqephe le nang le HTML ho sebapali, setšoantšo se ne se tla be se lumellane le ka letsohong le letšehali 'me taba ea serapa e tla hlaha e nepahetse ka sebaka se lekaneng sa ho arohana pakeng tsa tse peli. Hlokomela bohlokoa ba sehlopha sa "ka ho le letšehali" boo re bo sebelisitseng ke bo bontšang hore na ke bofe. Re ka e bitsa ntho leha e le efe hobane lentsoe "left" ha le etse letho ka le leng. Sena se hloka ho ba le tšobotsi ea sehlopha ka HTML e sebetsang le mokhoa oa sebele oa CSS o bonang liphetoho tse bonts'ang tseo u batlang ho li etsa.
Mekhoa e meng ea ho Finyella Mekhoa ena
Mokhoa ona oa ho fana ka setšoantšo sa setšoantšo sebopeho sa sehlopha 'me joale o sebelisa mokhoa oa kakaretso oa CSS o phaphamang ntlha e le tsela e le' ngoe feela eo u ka finyellang "setšoantšo" se setšoantšong se setšehali. U ka boela ua nka phalliso ea boleng ba setšoantšo le mokhoa oa eona ka CSS ka ho ngola mo khetho e khethehileng. Ka mohlala, a re shebeng mohlala oo setšoantšo seo se leng ka hare ho karohano ka bohlokoa ba sehlopha sa "li-content".
Ho hlalosa setšoantšo sena, u ka ngola CSS ena:
.main-content img {float: ka ho le letšehali; ho palama: 0 20px 20px 0; }}Ketsahalong ena, setšoantšo sa rona se ne se tla tsamaisana le ka ho le letšehali, ka taba e potolohileng ho potoloha joaloka pele, empa ha rea lokela ho eketsa bohlokoa ba sehlopha sa kakaretso ho marakeng. Ho etsa sena ka tekanyo ho ka thusa ho theha faele e nyenyane ea HTML, e tla ba bonolo ho e laola mme e ka thusa ho ntlafatsa tshebetso.
Qetellong, u ka ba ua kenya mekhoa ka ho toba ka marang-rang ea hau a HTML, a kang:
Mokhoa ona o bitsoa " mekhoa ea inline ". Ha ho eletswe hobane e kopanya ka mokhoa o hlakileng mokhoa oa sebopeho se nang le mohaho oa moralo. Mecha e nepahetseng ea Web e etsa hore mokhoa le mokhoa oa leqephe le lule o arohane. Sena se na le thuso haholo-holo ha leqephe la hau le hloka ho fetola sebaka sa lona le ho sheba boholo ba lichelete le lisebelisoa tse nang le websaete e amohelehang. Ho ba le mokhoa oa leqephe o kenngoeng ka HTML ho tla etsa hore ho be thata haholo ho ngola lipotso tsa mecha ea litaba tse tla fetola ponahalo ea sebaka sa hau e hlokahalang bakeng sa li-skrini tse fapaneng.
Sehlooho sa pele sa Jennifer Krynin. E hlophisitsoeng ke Jeremy Girard ka la 4/3/17.