Sebaka sa hau sa marang-rang sa setšoantšo le sebopeho se laoloa ke Li-Sheet tsa Style tsa CSS kapa Cascading. Tsena ke litokomane tse hlahisang marang-rang a leqephe la HTML, ho fana ka li-websaete tsa marang-rang ka litaelo tsa hore na u ka bontša maqephe a hlahang ho marakeng ao joang. CSS e sebetsana le sebaka sa leqephe, hammoho le mebala, litšoantšo tsa mokokotlo, mongolo oa litšoantšo le tse ling tse ngata.
Haeba o sheba faele ea CSS, u tla bona hore joaloka mekhoa leha e le efe ea ho ngolisa kapa puo e ngotsoeng, lifaele tsena li na le li-syntax tse itseng. Letlapa le leng le le leng le na le melao e mengata ea CSS. Melao ena, ha e nkiloe ka botlalo, ke mekhoa efe ea sebaka.
Likarolo tsa Molao oa CSS
Puso ea CSS e entsoe ka likarolo tse peli tse fapaneng - khetho le phatlalatso. Motho ea khethiloeng o etsa qeto ea hore na ho ngotsoe eng leqepheng le phatlalatso ke hore na e lokela ho ngoloa joang. Ka mohlala:
p {
'mala: # 000;
}}
Ena ke puso ea CSS. Karolo ea khetho ke "p", e leng khetho ea "lirapa". Ka lebaka leo, e tla khetha lirapa tse HLAHLENG setšeng ebe o ba fa mokhoa ona (ntle le haeba ho na le lirapa tse lebisitsoeng ke mekhoa e tobileng hosele sebakeng se seng sa tokomane ea CSS).
Karolo ea molao o reng "'mala: # 000;" ke se tsejoang e le phatlalatso. Phatlalatso eo e entsoe ka likotoana tse peli - thepa le boleng.
Thepa ke karolo ea 'mala' ea phatlalatso ena. E hlalosa hore na karolo efe ea khetho e tla fetoloa ho bona.
Bohlokoa ke seo thepa e khethiloeng ea CSS e tla fetoloa ho eona. Mohlala oa rona, re sebelisa bohlokoa ba hex ea # 000, e leng CSS shorthand bakeng sa "batsho".
Kahoo re sebelisa puso ena ea CSS, leqephe la rona le ne le tla ba le lirapa tse bontšitsoeng ka mokhoa oa mobala o motšo.
CSS Thepa ea motheo ea thepa
Ha u ngola thepa ea CSS, u ke ke ua e etsa feela ha u bona e loketse. Bakeng sa mehlala, "'mala" ke thepa ea CSS ea sebele, kahoo o ka e sebelisa. Setša sena ke sona se etsang qeto ea 'mala oa sehlooho. Haeba o ne o leka ho sebelisa "mebala-bala" kapa "mela-bala" e le matlotlo a CSS, tsena li tla hlōleha hobane ha li karolo ea sebele ea puo ea CSS.
Mohlala o mong ke setša sa "setšoantšo sa mokokotlo". Setša sena se beha setšoantšo se ka sebelisetsoang mokokotlo, joalo ka sena:
.logo {
setšoantšo sa morao-rao: url (/images/company-logo.png);
}}
Haeba o ne o leka ho sebelisa "setšoantšo sa setšoantšo" kapa "background-graphic" e le setša, ba ne ba tla hlōleha hobane, hape, tsena ha li matleng a CSS.
Lintho tse ling tsa CSS
Ho na le lisebelisoa tse 'maloa tsa CSS tseo u ka li sebelisang ho fetola sebaka sa sebaka. Mehlala e meng ke:
- Moeli (ho kenyeletsa mokhoa oa moeli, moeli-moeli, le bophara-bophara)
- Padding (ho akarelletsa padding-top, padding-right, bottom padding, le padding-ka ho le letšehali)
- Margins (ho kenyeletsa margin-top, marginal-right, margin-bottom, le margin-ka letsohong le letšehali)
- Lelapa la melaetsa
- Boholo ba pola
- Mobala-mobala
- Bophara
- Boima
Lintho tsena tsa CSS ke tse ntle tseo u lokelang ho li sebelisa e le mehlala, hobane kaofela li totobetse haholo, mme le haeba u sa tsebe CSS, mohlomong u ka inahanela seo ba se etsang ho latela mabitso a bona.
Ho na le lintho tse ling tsa CSS tseo u tla kopana le tsona tse ka 'nang tsa se ke tsa totobala hore na li sebetsa joang ka mabitso a tsona:
- Float
- Tlosa
- Ho khaphatseha
- Mongolo-fetola
- Z-index
Ha u ntse u kenella ka hare ho web design, u tla kopana (le ho sebelisa) thepa ena kaofela le tse ling!
Matlo a Hloka Melao ea Boitšoaro
Nako le nako ha u sebelisa thepa, u tlameha ho e fa bohlokoa - 'me thepa e itseng e ka amohela feela litekanyetso tse itseng.
Mohlala oa rona oa pele oa thepa ea "'mala", re lokela ho sebelisa boleng ba' mala. Sena se ka ba bohlokoa ba hex , boleng ba RGBA, kapa esita le mantlha a mantsoe . Leha e le efe ea melao eo e ka sebetsa, leha ho le joalo, haeba u sebelisitse lentsoe "ho soabisa" le thepa ena, e ne e ke ke ea etsa letho hobane, joalokaha e hlalosoa e le lentsoe leo, hase bohlokoa bo amohelehang CSS.
Mohlala oa rona oa bobeli oa "setšoantšo sa moelelo" o hloka hore setšoantšo sa setšoantšo se sebelisoe ho nka setšoantšo sa sebele ho lifaele tsa hau. Ena ke ea bohlokoa / syntax e hlokehang.
Lintho tsohle tsa CSS li na le litekanyetso tseo li li lebeletseng. Ka mohlala:
- Mobala-moeli o lebeletse hore 'mala oa bohlokoa
- Boholo ba moeli bo lebeletse boleng bo boholo, joaloka pixels kapa liphesente
- Mekhoa ea meeli e lebeletse hore e 'ngoe ea mekhoa e bolokehileng e sebelisetsoeng setša sena, e kang "tiileng"
Haeba o kena lethathamong la thepa ea CSS, u tla fumana hore e mong le e mong oa bona o na le litekanyetso tse khethehileng tseo ba tla li sebelisa ho bopa mekhoa eo ba e reretsoeng.
E hlophisitsoeng ke Jeremy Girard