Sheba leqephe leha e le lefe la websaete 'me u tla bona motsoako oa litemana le litšoantšo. Lintlha tsena ka bobeli ke lisebelisoa tsa bohlokoa ho atleha ha websaeteng. Litokomane tsa mangolo ke seo baeti ba maqephe ba tla se bala le hore na li-eng tsa ho batla li tla li sebelisa e le karolo ea maemo a bona a boemo. Litšoantšo li tla eketsa thahasello e bonahalang setšeng le ho thusa ho hatisa taba.
Ho eketsa mongolo le litšoantšo ho liwebsaete li bonolo. Mongolo o kenyelletsoa ka ma-tags a tloaelehileng a HTML joaloka lirapa, lihlooho, le lethathamo, ha litšoantšo li behoa leqepheng le sehlahisoa. Hang ha o kentse setšoantšo ho leqephe la hau la web, leha ho le joalo, u ka rata hore molaetsa o phalle haufi le setšoantšo, ho e-na le ho lumellana ka tlaase ho oona (e leng tsela e fapaneng eo setšoantšo se kenyelletsitsoeng ho khomphuteng ea HTML se tla fana ka sebapali). Ha e le hantle, ho na le mekhoa e 'meli eo u ka finyellang ponahalo ena ka eona, ka ho sebelisa CSS (e khothalletsoang) kapa ka ho eketsa litaelo tse bonahalang ka ho toba ka HTML (e sa khothaletsoeng, kaha u batla ho boloka karohano ea mokhoa oa moboho oa hau le websaete ea hau).
Ho sebelisa CSS
Tsela e nepahetseng ea ho fetola tsela eo litemana le litšoantšo li shebahalang ka eona le kamoo mechine ea bona e bonts'ang e hlahang ka sebapali e na le CSS . Hopola feela, kaha re bua ka phetoho ea pono leqepheng lena (ho etsa hore molaetsa o phalle ho potoloha sets'oants'o), sena se bolela hore ke sebaka sa Ts'ebetsong ea Li-Sheet Style.
- Pele, eketsa setšoantšo sa hau leqepheng la hau la marang-rang. Hopola ho kenyelletsa litšobotsi leha e le life tsa pono (joaloka bophara le bophahamo ba litekanyetso) ho tloha ho HTML. Sena ke sa bohlokoa, haholo-holo bakeng sa websaeteng e amohelehang moo boholo ba setšoantšo bo tla fapana ho latela sebapali. Lisebelisoa tse ling, joaloka Adobe Dreamweaver, li tla eketsa boitsebiso bo bophara le bophahamo ho litšoantšo tse kenngoa ka sesebelisoa seo, kahoo tiisa hore u tlose tlhahisoleseding ena ho tsoa ho khoutu ea HTML! Leha ho le joalo, etsa bonnete ba hore o kenyeletsa litemana tse loketseng tsa altare . Mona ke mohlala oa hore na khoutu ea hau ea HTML e shebahala joang:
-
- Bakeng sa mekhoa ea setaele, u ka boela ua eketsa sehlopha ho setšoantšo. Tlelase ena ea bohlokoa ke seo re tla se sebelisa lefapheng la rona la CSS. Hlokomela hore boleng boo re bo sebelisang mona bo na le boikemelo, le hoja, ka mokhoa ona o khethehileng, re atisa ho sebelisa litekanyetso tsa "ho le letšehali" kapa "tokelo", ho itšetlehile ka tsela eo re batlang hore setšoantšo sa rona se lumellane ka eona. Re fumana syntax e bonolo hore re sebetse hantle 'me re be bonolo ho ba bang bao ho ka' nang ha hlokahala hore ba tsamaise setša nakong e tlang hore ba e utloisise, empa u ka fa sena bohlokoa ba sehlopha seo u se batlang.
-
- Ka boeona, sehlopha sena se ke ke sa etsa letho. Setšoantšo se ke ke sa lumellana ka tsela e itšetlehileng ka letsohong le letšehali la mongolo. Bakeng sa sena, hona joale re hloka ho khutlela ho fono ea rona ea CSS.
-
- Ka mokhoa oa hau oa mokhoa, joale u ka eketsa mokhoa o latelang:
- .left {
- float: ho le letšehali;
- ho palama: 0 20px 20px 0;
- }}
- Seo o se entseng mona se sebedisa thepa ea CSS "float" , e tla hula setšoantšo ho tsoa ka mokhoa o tloaelehileng oa phallo (tsela eo setšoantšo se neng se tla bonahala ka eona, le mongolo o tsamaisitsoeng ka tlaase ho eona) 'me o tla se tsamaisa lehlakoreng le letšehali la setshelo . Mantsoe a hlahang ka morao ho markup ea HTML 'me joale a se phuthele. Hape re kentse lisebelisoa tse ling tsa marang-rang e le hore temana ena e se ke ea ema khahlanong le setšoantšo. Ho e-na le hoo, e tla ba le sebaka se setle se tla ba se khahlehang sebopeho sa leqephe. Ka shorthand ea CSS bakeng sa padding, re kentse litekanyetso tse 0 holimo le ka letsohong le letšehali la setšoantšo, le pixels tse 20 ho ea ka ho le letšehali le ka tlase. Hopola, ho hlokahala hore u kenyetse karolo e nepahetseng ea setšoantšo se lumellaneng le letsšehali. Setšoantšo se lumellanang hantle (seo re tla se sheba ka motsotsoana) se ne se tla ba le padding se sebelisitsoeng ka lehlakoreng le letšehali.
- Haeba u sheba leqephe la hau la marang-rang ka sebapali, joale u lokela ho bona hore setšoantšo sa hau se amana le lehlakoreng le letšehali la leqephe 'me taba eo e tla e phutholla hantle. Tsela e 'ngoe ea ho bua sena ke hore setšoantšo "se phaphametse ka letsohong le letšehali".
- Haeba o ne o batla ho fetola setšoantšo sena hore se tsamaisane le se nepahetseng (joaloka setšoantšo sa setšoantšo se tsamaeang le sehlooho sena), e ka ba se bonolo. Pele, o tlameha ho etsa bonnete ba hore, ntle le mokhoa oo re o kentseng ho CSS ea rona bakeng sa boleng ba sehlopha sa "ka ho le letšehali", re boetse re na le se seng sa ho lumellana hantle. E ne e tla shebahala tjena:
- .right {
- float: ho le letona;
- ho palama: 0 0 20px 20px;
- }}
- U ka bona hore sena se batla se tšoana le CSS ea pele eo re e ngotseng. Phapang e le 'ngoe feela ke boleng boo re bo sebelisang bakeng sa thepa ea "float" le maralo ao re a sebelisang (ho eketsa ka lehlakore le letšehali la setšoantšo sa rona ho e-na le tokelo).
- Qetellong, o ne o tla fetola boleng ba sehlopha sa setšoantšo ho tloha "ho le letšehali" ho "ho le letona" ka HTML ea hau:
-
- Sheba leqephe la hau ka sebapali hona joale 'me setšoantšo sa hau se lokela ho lumellana le tokelo le ho ngola ka mokhoa o nepahetseng ho potoloha. Re atisa ho eketsa mekhoa ena ka bobeli, "ho le letšehali" le "ho loka" ho lihlopha tsohle tsa rona tsa mekhoa e le hore re ka sebelisa mekhoa ena e bonahalang ha ho hlokahala ha re bōpa maqephe a marang-rang. Mekhoa ena e 'meli e ba ntle, likarolo tse tsosolositsoeng tseo re ka li lebisang neng kapa neng moo re hlokang litšoantšo tsa litšoantšo ka ho ngoloa molaetsa ho ba pota-potile.
Ho sebelisa HTML ho e-na le CSS (le Hobane'ng ha u sa lokela ho etsa joalo)
Le hoja ho ka khoneha ho koahela temana ho potoloha setšoantšo ka HTML, litekanyetso tsa marang-rang li re CSS (le mehato e hlalositsoeng ka holimo) ke tsela ea ho ea e le hore re ka boloka karohano ea moralo (HTML) le mokhoa (CSS). Sena ke sa bohlokoa ka ho khetheha ha u nahana joalo, bakeng sa lisebelisoa tse ling le mekhoa e meng, temana eo e ka 'na ea se ke ea potoloha ho potoloha setšoantšo. Bakeng sa li-skrini tse nyane, mohaho oa sebapali se amohelehang o ka 'na oa hloka hore mongolo o hlile o lumellane ka tlase setšoantšong le hore setšoantšo se otlolla bophara bo feletseng ba skrine. Sena se etsoa habonolo ka lipotso tsa mecha ea phatlalatso haeba mekhoa ea hau e fapane le marang-rang a hau a HTML. Lefatšeng la kajeno la li-multi-device, moo litšoantšo le mongolo li tla hlaha ka ho fapaneng bakeng sa baeti ba sa tšoaneng le lipapaling tse fapaneng, ho arohana hona ke habohlokoa bakeng sa katleho ea nako e telele le tsamaiso ea leqephe la hau.