Isitayela nesakhiwo esibukwayo sewebhu sichazwe yiScss noma i-Cascading Style Sheets. Lezi yizincwadi ezakha umaka we-HTML wekhasi lewebhu, unikeza iziphequluli zewebhu ngemiyalelo yokuthi ungabonisa kanjani amakhasi avela kulowo markup. I-CSS isingatha isakhiwo sekhasi, kanye nombala, imifanekiso yangemuva, i- typography nokuningi okuningi.
Uma ubheka ifayela le-CSS, uzobona ukuthi njenganoma yiluphi uhlobo lwe-markup noma ulimi lokubhala, lawa mafayela ane-syntax ethile kubo. Ishidi ngalinye lesitayela lenziwe ngemithetho eminingi ye-CSS. Le mithetho, uma ithathwe ngokugcwele, yiziphi izitayela isayithi.
Izingxenye zomthetho we-CSS
Umthetho we-CSS wenziwe izingxenye ezimbili ezihlukene - umkhethi kanye nesimemezelo. Umkhethi ubeka ukuthi yini ekhonjiswayo ekhasini futhi isimemezelo ukuthi kufanele senziwe kanjani. Ngokwesibonelo:
p {
umbala: # 000;
}}
Lona umthetho we-CSS. Ingxenye ye- selector yiyona "p", okuyi-selector element ye "izigaba". Ngakho-ke, kuzobe ukhethe ZONKE izigaba kusayithi bese ubahlinzeka ngesitayela (ngaphandle uma kunezindima ezibhekiswe izitayela eziqondile nakwezinye izindawo emcimbini wakho we-CSS).
Ingxenye yomthetho othi "umbala: # 000;" yilokho owaziwa ngokuthi isimemezelo. Lesimemezelo sakhiwa izingcezu ezimbili - impahla kanye nenani.
Le ndawo ingumbala "wombala" walesi simemezelo. Ichaza ukuthi yisiphi isici somkhethi esizoguqulwa ngokubukeka.
Inani yilokho impahla ekhethiwe yeCSS izoshintshwa ibe. Esikhathini sethu, sisebenzisa inani le-hex le- # 000, eliyi-CSS elifushane "lomnyama".
Ngakho-ke usebenzisa le mbuso ye-CSS, ikhasi lethu lizoba nezigaba eziboniswa kumbala wefonti omnyama.
Ama-Basic Basic CSS
Uma ubhala izinto ze-CSS, awukwazi ukumenza nje njengoba ubona kufanelekile. Ngezimo, "umbala" uyimpahla yangempela ye-CSS, ngakho ungayisebenzisa. Lo mhlaba yilokho okucacisa umbala wombhalo wesici. Uma uzame ukusebenzisa "umbala wombhalo" noma "umbala wefonti" njengezimpahla ze-CSS, lezi zizohluleka ngoba azizona izingxenye zangempela zolimi lwe-CSS.
Esinye isibonelo yisakhiwo "sesithombe sangemuva". Lo mhlaba ubeka isithombe esingasetshenziswa ngemuva, njengalokhu:
.logo {
isithombe sangemuva: url (/images/company-logo.png);
}}
Uma uzame ukusebenzisa "isithombe sangemuva-sithombe" noma "imvelaphi engemuva" njengempahla, behluleka ngoba, futhi futhi, lawa akuzona izinto zangempela ze-CSS.
Ezinye izindawo ze-CSS
Kunezinto eziningi ze-CSS ongazisebenzisa ukuze isitayela isayithi. Ezinye izibonelo ziyi:
- Umngcele (kufaka isitayela somngcele, umbala wendwangu, nomkhawulo-ububanzi)
- I-Padding (kufaka phakathi i-padding-top, i-padding-right, i-padding-bottom, ne-padding-kwesobunxele)
- Amaphesenti (kufaka phakathi umkhawulo-phezulu, ngakwesokudla-ngakwesokudla, emanzini-phansi, nangakwesobunxele-ngakwesokunxele)
- Umndeni wefonti
- Usayizi wefonti
- Umbala ongemuva
- Ububanzi
- Ukuphakama
Lezi zakhiwo ze-CSS zikhulu kakhulu ongazisebenzisa njengezibonelo, ngoba konke ziqondile futhi, ngisho noma ungazi i-CSS, cishe ucabanga ukuthi benzani ngokusekelwe ngamagama abo.
Kukhona ezinye izinto ze-CSS ozothola kuzo futhi okungase kungabi nakusobala ukuthi zisebenza kanjani ngokusekelwe ngamagama abo:
- I-Float
- Sula
- Ukuchichima
- Umbhalo-guqula
- Inkomba ye-Z
Njengoba ungena ekujuleni kwewebhu, uzohlangana (futhi usebenzise) zonke lezi zakhiwo nokuningi!
Izakhiwo zidinga izimiso
Njalo uma usebenzisa indlu, kufanele unikeze inani - futhi ezinye izindawo zingamukela kuphela amanani athile.
Esikhathini sethu sokuqala sendawo "yombala", sidinga ukusebenzisa inani lombala. Lokhu kungaba inani le-hex , inani le-RGBA, noma ngisho namagama angukhiye wombala . Noma yikuphi kulawo mazinga angasebenza, noma kunjalo, uma usebenzisa igama elithi "eliyinkimbinkimbi" ngalesi sakhiwo, ngeke lenze lutho ngoba, njengoba kuchaza njengaleli gama, akulona inani elibonakalayo ku-CSS.
Isibonelo sethu sesibili "sesithombe sangemuva" sidinga indlela yesithombe esetshenziselwa ukulanda isithombe sangempela kusuka kumafayela wakho wewebhusayithi. Lona inani / i-syntax edingekayo.
Zonke izimpahla ze-CSS zinamanani abalindele. Ngokwesibonelo:
- Umngcele wemizila ulindele inani lombala
- Ubukhulu bomngcele bulindele inani lokulinganisa, njengamaphikseli noma amaphesenti
- Izitayela ze-Border zilindele enye yezindlela ezigcinwe ezisetshenziselwa le mpahla, njenge "eqinile"
Uma uhamba ngokusebenzisa uhlu lwezinto ze-CSS, uzothola ukuthi ngamunye wabo unamagugu aqondile azowasebenzisa ukudala izitayela ezihloselwe zona.
Ihlelwe nguJeremy Girard