Kuyini Ukuqhathaniswa Kokukhethwa Kwe-CSS?

Kungani i-comma elula yenza lula ukukopisha

I-CSS, noma i-Cascading Style Sheets, iyindlela yokwamukela imboni yewebhu ukufaka izitayela ezibukwayo kwisayithi. Nge-CSS, ungakwazi ukulawula ukuhlelwa kwekhasi, imibala, ukushicilela , isithombe sangemuva, nokunye okuningi. Ngokuyinhloko, uma isitayela esibukwayo, i-CSS yindlela yokuletha lezo zitayela kuwebhusayithi yakho.

Njengoba ungeza izitayela ze-CSS kudokhumenti, ungabona ukuthi idokhumenti iqala ukuthola isikhathi eside nokude. Ngisho nesayithi elincane elinamakhasi ambalwa kuphela angaqeda ifayela le-CSS elikhulu - futhi isayithi elikhulu kakhulu ngenkatho namakhasi amaningi okuqukethwe okuhlukile angaba namafayela amakhulu kakhulu we-CSS. Lokhu kuhlanganiswa nezindawo eziphendulayo ezinemibuzo eningi yemidiya ehlanganisiwe kumashidi wesitayela ukushintsha ukuthi izibukeli zibukeka kanjani nokuthi ikhasi liphuma ngezikrini ezahlukene.

Yebo, amafayela e-CSS angathatha isikhathi eside. Lokhu akuyona inkinga enkulu uma kuziwa ekusebenzeni kwesayithi nokulanda isivinini, ngoba ngisho nefayela elide le-CSS cishe lihle kakhulu (ngoba liyi-document kuphela yombhalo). Noma kunjalo, kancane kancane kubalwa uma kuziwa ngejubane lekhasi, ngakho-ke uma ungenza ishidi lakho lesitayela livuleke, lokho kuwumqondo omuhle. Yilapho "i-comma" ingafika khona kakhulu kwishidi lakho lesitayela!

I-Commas ne-CSS

Ungase uzibuze ukuthi iyiphi indima edlalwa ngayo i-syntax ye- CSS . Njengemisho, i-comma iveza ngokucacile-hhayi ikhodi-kubahlukanisi. I-comma kusikhethi se- CSS ihlukanisa abakhethayo abaningi ngaphakathi kwezitayela ezifanayo.

Isibonelo, ake sibheke ezinye ze-CSS ngezansi.

Umbala: obomvu; }}
td {umbala: obomvu; }}
p.red {umbala: obomvu; }}
div # kuqala {umbala: obomvu; }}

Ngalesi syntax, usho ukuthi ufuna amathegi, ama- td tags, amathegi wesigaba neklasini ebomvu, futhi umaka we-div ne-ID uqale konke ukuba nombala wesitayela obomvu.

Lokhu kuyi-CSS eyamukelekayo ngokuphelele, kodwa kunezinselelo ezimbili ezibalulekile zokuzibhala ngale ndlela:

Ukuze ukwazi ukugwema lezi zinselele, futhi ukuhlehlisa ifayela lakho le-CSS, sizozama ukusebenzisa ama-commas.

Ukusebenzisa ama-Commas ukuze ahlukanise ama-Selector

Esikhundleni sokubhala 4 izikhethi ezihlukene ze-CSS nemithetho engu-4, ungahlanganisa zonke lezi zitayela zibe yimpahla eyodwa yokubusa ngokuhlukanisa izikhethi ngabanye nge-comma. Nakhu ukuthi lokho kuzokwenziwa kanjani:

th, td, p.red, div # kuqala {umbala: obomvu; }}

Umlingisi we-comma ngokuyisisekelo usebenza njengegama "futhi" ngaphakathi kukhethi. Ngakho-ke lokhu kusebenza kumathegi we- h kanye namathegi we-TD kanye namathegi wendima ekilasini elibomvu kanye nomaka we-div ne-ID kuqala. Yilokho okwakunakho ngaphambili, kodwa esikhundleni sokudinga imithetho ye-CSS engu-4, sinomthetho owodwa abanezikhethi eziningi. Yilokho okwenziwa yi-comma kusikhethi, kusenza sibe nama-selector amaningi emthethweni owodwa.

Akuyona nje indlela le ndlela eyenza amafayela e-CSS ahlanzekile, ahlanzekile, futhi enza izibuyekezo zesikhathi esizayo kube lula kakhulu. Manje uma ufuna ukushintsha umbala kusuka obomvu kuya eluhlaza okwesibhakabhaka, kuzomele wenze ushintsho endaweni eyodwa kuphela kunomthetho wokuqala wesitayela esinesine! Cabanga ngalezi zinsuku zokulondoloza kuzo zonke ifayela le-CSS futhi ungabona ukuthi lokhu kuzokugcina kanjani isikhathi nesikhala esikhathini eside!

Ukuguqulwa kwe-Syntax

Abanye abantu bakhetha ukwenza i-CSS ibe lula kakhulu ngokuhlukanisa umkhethi ngamunye ngakwesigaba sayo, esikhundleni sokuyiloba konke emgqeni owodwa njengenhla. Yilokho okuzokwenziwa:

th,
td,
p.red,
div # kuqala
{
umbala: obomvu;
}}

Qaphela ukuthi ubeka i-comma ngemuva komkhethi ngamunye bese usebenzisa "faka" ukuphula ikhethi elilandelayo emgqeni walo. Awufaki i-comma ngemuva kokukhethwa kokugcina.

Ngokusebenzisa ama-commas phakathi kwabakhethi bakho, udala ishidi lesitayela esincwajana esilula ukuthi silungiselele esikhathini esizayo futhi kulula ukufunda namuhla!

Isihloko sokuqala sikaJennifer Krynin. Ihlelwe nguJeremy Girard ngo-5/8/17