Awunqunyelwe ku-class eyodwa ye-CSS ngayinye ngayinye.
I-Cascading Style Sheets (CSS) ikuvumela ukuthi uchaze ukubukeka komuntu ngokubheka izici ozisebenzisayo kuleso sici. Lezi zimfanelo zingaba noma i-ID noma isigaba futhi, njengezici zonke, zengeza ulwazi oluwusizo ezakhiweni ezixhunyiwe kuzo. Kuye ngokuthi yikuphi ukufaka okungeziwe kwisici, ungabhala i-CSS ukhethwa ukusebenzisa izitayela ezibukwayo ezidingekayo ukuze kutholakale ukubukeka nokuzizwa ngaleyo nto kanye ne-website yonkana.
Ngenkathi ama-ID noma amakilasi esebenza ngenjongo yokuzihlanganisa nge-CSS imithetho, izindlela zokwakha zewebhu zanamuhla zithanda amakilasi ngaphezu kwama-ID, ngokwengxenye, ngoba azincane kakhulu futhi kulula ukusebenza nomuntu jikelele. Yebo, uzothola amasayithi amaningi asebenzisa ama-ID, kodwa lezo zimfanelo zisetshenziselwa kancane kancane esikhathini esidlule ngenkathi amakilasi ethathe amakhasi wewebhu wamanje.
Amakilasi angashadile noma amaningana ku-CSS?
Ezikhathini eziningi ungabeka isici esisodwa seklasi kwisici, kodwa empeleni awukhawuli ekilasini elilodwa nje ngendlela onayo ama-ID. Ngenkathi i-element ingaba nesici esisodwa se-ID, ungakwazi ngokuphelele ukunikeza amaqembu amaningi amaqembu futhi, kwezinye izimo, ukwenza kanjalo kuzokwenza ikhasi lakho libe lula ngesitayela futhi luguquguquke kakhulu!
Uma udinga ukwabela amakilasi amaningi ku-element, ungangeza amakilasi angeziwe futhi uvele uwahlukanise ngesikhala endaweni yakho.
Isibonelo, lesi sigaba sinamakilasi amathathu:
ukudonsa okufakiwe kufakwe kwesokunxele "> Lokhu kungaba umbhalo wesigaba
Lokhu kubeka amakilasi amathathu alandelayo esigabeni sendima:
- Pullquote
- Okufakiwe
- Kwesobunxele
Qaphela izikhala phakathi kweyodwa yalezi zindinganiso zamaklasi. Lezo zikhala yilokho okuzibeka njengezihluke, amakilasi ngabanye. Yingakho amagama ekilasi azinakukwazi ukuba nezikhala kuzo, ngoba ukwenza kanjalo kuzobabeka njengamakilasi ahlukene.
Isibonelo, uma usebenzisa "i-pullquote-ebonakalayo-kwesokunxele" ngaphandle kwesikhala, kungaba yiklasi elilodwa lokulinganisa, kodwa isibonelo esingenhla, lapho lawa magama amathathu ahlukaniswa khona isikhala, uwabeka njengamanani ahlukile. Kubalulekile ukuqonda lo mqondo njengoba unquma ukuthi yiziphi izindinganiso zamakilasi ozisebenzisayo kumawebhusayithi wakho.
Uma unayo amanani akho ekilasini ku-HTML, ungabe ubanika laba amakilasi ku-CSS yakho bese usebenzisa izitayela ongathanda ukuzengeza. Ngokwesibonelo.
.pullquote {...}
.featured {...}
i-p.left {...}
Kulezi zibonelo, izimemezelo ze-CSS kanye namanani wezintengo zingaba ngaphakathi kwamakhondomu aphikisiwe, ukuthi yizo kanjani izitayela ezizosetshenziselwa ukhetho olufanele.
Qaphela - uma usetha isigaba kwisici esithile (isibonelo, p.left), usengayisebenzisa njengengxenye yohlu lwamakilasi; Kodwa-ke, qaphela ukuthi kuzothinta kuphela lezo zakhi ezichazwe ku-CSS. Ngamanye amazwi, isitayela se-p.left sizosebenza kuphela kuzigaba ngalesi sigaba kusukela umkhethi wakho empeleni ethi uzisebenzise "ezigabeni ngexabiso lesigaba 'lesobunxele'". Ngokuphambene, ezinye izikhethi ezimbili kulesi sibonelo azicaci isici esithile, ngakho-ke zingasebenza kunoma iyiphi into esebenzisa lawo mazinga wamaklasi.
Izinzuzo zamaKlasi amaningi
Amakilasi amaningi angenza kube lula ukwengeza imiphumela ekhethekile ezakhiweni ngaphandle kokudala isitayela esisha esisha saleso sici.
Isibonelo, ungase ufune ukuba nekhono lokuthambisa izinhlamvu ngakwesokunxele noma kwesokudla ngokushesha. Ungabhala amakilasi amabili kwesokunxele futhi kwesokudla ngokushelela nje: kwesokunxele; bese uphambuka: kwesokudla; kuzo. Khona-ke, noma kunini lapho unesici udinga ukuthethelela ngakwesobunxele, ubunganezela isigaba "ngakwesokunxele" ohlwini lwaso lwesigaba.
Kukhona umugqa omuhle wokuhamba lapha, noma kunjalo. Khumbula ukuthi izindinganiso zewebhu zisho ukuhlukaniswa kwesitayela nesakhiwo. Isakhiwo senziwa nge-HTML ngenkathi isitayela se-CSS.
Uma idokhumenti yakho ye-HTML igcwele izakhi zonke ezinamagama eklasi afana nokuthi "obomvu" noma "ngakwesobunxele", amagama angamaqondana nokuthi izinto kufanele zibukeke kunjani, ziwela lelo gqa phakathi kwesakhiwo nesitayela. Ngizama ukunciphisa amagama ami ekilasini engingeyona semastic ngangokunokwenzeka ngalesi sizathu.
Amakilasi amaningi, ama-Semantics, ne-JavaScript
Enye inzuzo yokusebenzisa amakilasi amaningi ukuthi ikunika amathuba amaningi okuxhumana.
Ungasebenzisa amakilasi amasha kuzici ezikhona usebenzisa iJavaScript ngaphandle kokukhipha noma yiziphi izifundo zokuqala. Ungasebenzisa futhi amakilasi ukuchaza i- semantics ye-element . Lokhu kusho ukuthi ungangezela kumakilasi angeziwe ukuze uchaze ukuthi yini leyo nto isho ngokuyisimangaliso. Yile ndlela ama-Microformats asebenza ngayo.
Ukungahleki kwamakilasi amaningi
Okungalungile okukhulu ukusebenzisa amakilasi amaningi ezakhiweni zakho ukuthi kungenza kube lula ukubuka nokuphatha isikhathi. Kungaba nzima ukuthola ukuthi yiziphi izitayela ezithinta isici futhi uma ngabe yiziphi izikripthi ezithinta. Izinhlaka eziningi ezitholakalayo namuhla, njenge-Bootstrap, zisebenzise kakhulu izakhi ezinezigaba eziningi. Leyo khodi ingavela esandleni futhi kunzima ukusebenza ngokushesha uma ungaqapheli.
Uma usebenzisa amakilasi amaningi, nawe ugibela ingozi yokuba nesitayela seklasi elilodwa lingaphezu kwesitayela somunye noma ngabe awuhlosile lokhu. Lokhu kungenza kube nzima ukuthola ukuthi kungani izitayela zakho zingasetshenziswa ngisho nalapho kubonakala sengathi kufanele.
Udinga ukuqaphela okucacile, ngisho nezici ezisetshenziswe kuleso sici esisodwa!
Ngokusebenzisa ithuluzi elifana namathuluzi weWebmaster ku-Chrome, ungabona kalula ukuthi amakilasi akho asithinta kanjani izitayela zakho futhi ugweme le nkinga yezitayela nezici eziphikisanayo.
Isihloko sokuqala sikaJennifer Krynin. Ihlelwe nguJeremy Girard ngo-8/7/7