- I-CSS yangokwezifiso ikuvumela ukuthi ushintshe izingqikithi ezizenzakalelayo ukuze ulawule amafonti, imibala, izakhiwo kanye nokubonakala kuzo zonke izinkundla ezifana ne-WordPress, i-GemPages kanye ne-Virtual Lobby.
- Ama-workflows aphephile asebenzisa izindawo "ze-CSS ezenziwe ngokwezifiso" ezizinikele kanye namathuluzi okuhlola isiphequluli ukuze kuqondiswe izinto ngokunembile ngaphandle kokuhlela itimu eyinhloko noma amafayela esistimu.
- Iziqeshana ezisebenzayo zimboza amafonti, izinkinobho, isitayela sengxoxo, amafomu, amawijethi nezizinda, okuvumela ukwenziwa kwebhrendi okuhlala njalo kanye nokusebenziseka okuthuthukisiwe.
- Ukulandela imikhuba emihle kakhulu—izinguquko ezincane eziphindaphindwayo, amazwana acacile kanye nekhodi ecacile—kugcina i-CSS yangokwezifiso igcinwa futhi ilula ukusebenza.
I-CSS eyenziwe ngokwezifiso iyisithako esiyimfihlo esikuvumela ukuthi ukhululeke kumathempulethi aqinile kanye nezindikimba ezizenzakalelayo ukuze unikeze noma iyiphi iwebhusayithi, isitolo noma uhlelo lokusebenza ubuwena bayo obubonakalayo. Kungakhathaliseki ukuthi ulungisa ibhulogi ye-WordPress, ikhasi lokufika le-Shopify elakhiwe nge-GemPages, isitolo se-Tiendanube noma i-Virtual Lobby yemicimbi eku-inthanethi, ukwazi ukwengeza nokuphatha i-CSS yomuntu siqu kuvula izinga elisha lokulawula.
Esikhundleni sokunamathela kulokho umklami wakho wetimu akucabangayo, i-CSS yangokwezifiso ikuvumela ukuthi ufihle izinto ongazidingi, ushintshe amafonti, imibala kanye nezikhala, ulungise izinkinobho futhi ushintshe ngisho nezingxenye zonke zesakhiwo ngaphandle kokuthinta i-HTML eyisisekelo noma ikhodi yohlelo lokusebenza. Kulesi siqondisi sizochaza ukuthi iyini i-CSS, ukuthi ungangeza kanjani izitayela ezenziwe ngokwezifiso ngokuphephile kumapulatifomu ahlukene, iqoqo elikhulu leziqeshana ezilungele ukusetshenziswa, kanye neminye imikhuba emihle ukuze ukulungisa kwakho kungaphuki ngezibuyekezo zesikhathi esizayo.
Iyini ngempela i-CSS yangokwezifiso nokuthi kungani ibalulekile
I-CSS (Cascading Style Sheets) ulimi lwesitayela olulawula indlela okuqukethwe kwe-HTML noma kwe-XML okubukeka ngayo kusiphequluli: amafonti, imibala, isikhala, ukwakheka, imingcele, izizinda nokunye okuningi. Nakuba i-HTML ichaza isakhiwo kanye nencazelo yedokhumenti, i-CSS yilokho okutshela isiphequluli ukuthi singayidweba kanjani leso sakhiwo esikrinini, ephrintiwe, enkulumweni noma kwezinye izindlela.
Izindinganiso zewebhu zesimanje zihlukanisa okuqukethwe nokwethulwa ngokugcina i-HTML yesakhiwo kanye ne-CSS yokuklama okubonakalayo, ngokuvamile kugcinwa kumafayela esitayela sangaphandle noma amabhlogo esitayela esisemgqeni. Yonke iwebhusayithi oyibonayo engewona nje umbhalo omnyama ekhasini elimhlophe ithembele emithethweni ye-CSS ngemuva kwezigcawu ukulawula izihloko, izigaba, ukuzulazula, amafomu, izithombe kanye namagridi okwakheka.
Kwabakhi abaningi besayithi, izingqikithi kanye nabahleli bamakhasi, uthola isikhombikubona esinobungane sokushintsha izilungiselelo eziyisisekelo njengemibala, amafonti noma izikhala, kodwa kuzohlala kunemininingwane ethile engavezwa yizilawuli ezibonakalayo. Yilapho ikhodi ye-CSS yangokwezifiso ingena khona: ikuvumela ukuthi ushintshe izitayela ezizenzakalelayo bese wengeza imithetho yakho phezulu, ngaphandle kokushintsha amafayela etimu okuqala.
Kwabathuthukisi, ama-ejensi kanye nabasebenzi abazimele abakha okuhlangenwe nakho okwenzelwe bona, i-CSS yangokwezifiso ibalulekile ukuze ihambisane neziqondiso zomkhiqizo, izame ngezakhiwo ezithuthukisiwe, ithuthukise ukusebenzisana okuncane futhi iqinisekise ukuvumelana kuwo wonke amakhasi namadivayisi. Ihlanganiswe neJavaScript yokuxhumana kanye ne-HTML markup ehlanzekile, i-CSS iqeda i-trio enika amandla iningi lewebhu evulekile futhi ikusize dala iwebhusayithi kusuka ekuqaleni.
Ukwengeza ngokuphephile i-CSS yangokwezifiso ku-WordPress namapulatifomu afanayo
Enye yezingozi ezinkulu lapho usebenza ne-CSS kumapulatifomu e-CMS njenge-WordPress ukuhlela amafayela etimu ngqo kusuka kumhleli wekhodi owakhelwe kudeshibhodi yomphathi. Uma ushintsha amashidi esitayela sokuqala setimu noma amafayela e-PHP ngaphandle komlando woshintsho ocacile, izibuyekezo zesikhathi esizayo ziba nzima noma zingenzeki futhi iphutha elincane lingaphula ngisho nengxenye engaphambili.
Kumasethingi e-WordPress aphethwe, abanye abahlinzeki bakhubaza ukuhlela itimu ngqo ukuze bagweme izinkinga zokuphepha kanye namaphupho amabi okulungisa abangelwa ukuguqulwa okungalawulwa kwamafayela ayinhloko. Uma ungakwazi ukubona ukuthi yini eyangempela nokuthi yini oyifakile, amaqembu okusekela awakwazi ukubuyekeza noma ukulungisa iphutha lesayithi lakho ngokuphephile kamuva.
Izindaba ezinhle ukuthi i-WordPress yesimanje ifaka indawo ethi “Eyengeziwe ye-CSS” ku-Customizer (Ukubukeka > Yenza ngokwezifiso > I-CSS Eyengeziwe) lapho unganamathisela khona imithetho yakho ngaphandle kokuthinta amafayela etimu. Izitayela ezibekwe lapho zilayishwa ngemva kwe-CSS yonke, okusho ukuthi imithetho yakho ivame ukuba yinto eza kuqala ngenkathi igcina itimu eyisisekelo ingashintshi.
Ukugcina yonke i-CSS yakho yangokwezifiso ngaphakathi kwale nkambu eyengeziwe kukunikeza indawo eyodwa, ephakathi nendawo yokubuyekeza, ukukopisha kwamanye amasayithi, ukukhubaza okwesikhashana noma ukususa imithetho uma kukhona okungahambi kahle. Uma okunye kokuhlola kwakho konakalisa ukwakheka, umane uphawula noma ususe ingxenye bese itimu ibuyela esimweni sayo sokuqala.
Isici se-Additional CSS ku-WordPress sihlanganisa nokuqinisekiswa okuyisisekelo kanye nokuqedela ngokuzenzakalela, okusiza ekubambeni amaphutha ezimpahleni nasezikhethini futhi kusheshiswe ukubhala ikhodi ehlanzekile nesebenzayo. Ifilosofi efanayo ivela kwamanye amapulatifomu: anikeza ibhokisi elithi “ikhodi yangokwezifiso” noma “i-CSS yangokwezifiso” elizinikele ukuze kugcinwe ukudluliswa kwemininingwane kuhlukile futhi kulula ukukuphatha.
Ukuhlola ikhasi ukuze wazi ukuthi yini okufanele uyihlose nge-CSS
Ngaphambi kokuthi wenze isitayela noma ufihle noma yisiphi isiqephu sekhasi, udinga kuqala ukwazi ukuthi iyiphi i-HTML element kanye nabakhethi be-CSS abanomthwalo wemfanelo walokho. Ngenxa yokuthi i-CSS ngokuvamile ayibonakali ngaphandle, kufanele ubheke ngaphansi kwe-hood usebenzisa amathuluzi onjiniyela besiphequluli sakho.
Iziphequluli eziningi zesimanje zikuvumela ukuthi uchofoze kwesokudla kunoma iyiphi ingxenye yekhasi lewebhu bese ukhetha inketho efana nokuthi “Hlola” (i-Chrome) noma “Hlola Ingxenye” (i-Firefox) ukuvula Amathuluzi Onjiniyela. Lo mbono ukukhombisa isakhiwo se-HTML kolunye uhlangothi, kanti ngakolunye, zonke izitayela ezisetshenziswa njengamanje entweni ekhethiwe.
Ngaphakathi kwephaneli yezitayela ungabona ukuthi yimiphi imithetho namafayela e-CSS athinta leyo nto futhi uzame ngisho nokuguqula, ukushintsha noma ukwengeza izakhiwo ngesikhathi sangempela ngaphandle kokuphula isayithi. Uma usuthole inhlanganisela esebenzayo, ungakopisha isikhethi sokugcina kanye nemithetho endaweni yakho ye-CSS yangokwezifiso (isibonelo i-WordPress Customizer noma umhleli we-Shopify).
Lo msebenzi wokuhlola → ukuhlola → ukunamathisela ku-CSS yangokwezifiso kuyindlela ephephile yokufunda nokulungisa izinguquko zakho ngenkathi uqonda ukuthi abakhethi abahlukene, amakilasi kanye nama-ID asebenzisana kanjani kusakhiwo esiyinkimbinkimbi. Ngokuhamba kwesikhathi uzobona futhi amaphethini ajwayelekile okuqanjwa kwamagama avela kumatimu nakubakhi, okwenza kube lula ukuqondisa ingxenye efanele yekhasi ngaphandle kwemiphumela emibi engafuneki.
Ukusebenzisa i-CSS yangokwezifiso kumapulatifomu emicimbi: Izibonelo ze-Virtual Lobby
Amapulatifomu emicimbi afana ne-InEvent akuvumela ukuthi wenze ngezifiso ukubukeka nomuzwa we-Virtual Lobby yabo ngale komhleli obonakalayo ngokunamathisela i-CSS yangokwezifiso ebhokisini elizinikele le-Source Code. Lokhu kuthuthuke kakhulu kunokucushwa kokudonsa nokulahla futhi kuvame ukunconywa kubantu asebevele bekhululekile nge-syntax ye-CSS.
Ngezitayela ezenziwe ngokwezifiso ku-Virtual Lobby, ungangenisa futhi usebenzise amafonti omkhiqizo, ufihle izinkinobho ezingafanele izilaleli zakho, ulungise imibala yengxoxo, ushintshe imininingwane yefomu bese usetha izithombe zangemuva ezihlukile noma imibala yezigaba ezahlukene. Ipulatifomu iveza ama-ID athile namagama ekilasi ukuze abakhethi bakho bakwazi ukucacisa.
Ukuze ulayishe ifonti ngokwezifiso, ngokuvamile uqala ngokuchaza i- @font-face umthetho noma ukusebenzisa @import ukudonsa ifayela lesimemezelo kusuka ku-URL lapho ifonti ibanjwe khona kwi-inthanethi. Isibonelo, ungakhomba ku-Google Fonts noma i-host yakho, ucacise igama lomndeni wefonti, isitayela, ifomethi yefayela kanye nobubanzi be-unicode.
Uma ifonti isimenyezelwe, ungayisebenzisa emhlabeni jikelele ngokubhekisa ku- body isici noma ngokukhetha okwengeziwe ngokukhomba izimbozo zezimpande ezifana #liveWrapper, #fileManagerWrapper, #myAgendaWrapper, #myFormsWrapper or #ticketManagerWrapper. Ungabeka amafonti amaningi ngokungenisa izinhlobo eziningana zokubhala bese uwabela ngalinye kumakhasi ahlukene kanye nama-wrapper.
Izicelo ezijwayelekile zokwenza ngokwezifiso ku-Virtual Lobby zifaka phakathi ukufihla noma ukulungisa izinto ezisebenzisanayo: ukususa inkinobho ethi “Vula i-lobby” endaweni ye-akhawunti, ukufihla inketho ethi “Troubleshoot” kusihloko, ukususa isilawuli esithi “Phakamisa isandla” emisebenzini noma ukufihla ikheli le-imeyili lezikhulumi ukuze kube yimfihlo. Konke lokhu kuxazululwa ngemithetho ye-CSS ebeka abakhethi abafanele ku- display: none or visibility: hidden nge !important lapho kudingeka khona ukuhlehliswa.
Iziqeshana ze-CSS ezisebenzayo zezinto ze-Virtual Lobby UI
Ukuze ufihle inkinobho ethi “Vula i-lobby” kuthebhu ethi I-Akhawunti Yami kuzo zombili izakhiwo ze-Neo kanye ne-Classic Virtual Lobby, ungaqondisa isitsha esiphethe leso senzo bese usisusa ngokuphelele ekugelezeni kwesakhiwo. Isikhethi esifana #headerVue .eventCover-info-virtual-lobby nge display: none yenza lokhu kanye, iqinisekisa ukuthi ababekhona abakwazi ukufinyelela kuleyo ndlela enqamulelayo.
Ukususa inkinobho ethi “Ukuxazulula Inkinga” kubha yokuzulazula ephezulu kuhilela ukukhomba isikhethi sezinketho zokwehla ezithile bese usifihla, ngokuvamile nge display: none !important ukuze unqobe izitayela ezizenzakalelayo. Uma ibha isebenzisa into efana .v2-barTop .barContent .barDropdown.optionTroubleshoot, umane ushintsha leyo nhlanganisela yekilasi endaweni yakho yekhodi yomthombo.
Uma ufuna ukukhubaza inkinobho ethi “Phakamisa isandla” ngesikhathi semisebenzi ebukhoma, ungathola isikhethi sayo ngaphakathi kwesitsha sokulawula ividiyo bese usifihla ngendlela efanayo. Isakhiwo esijwayelekile singaba #liveContent .videos .videos-controls .toolRaiseHands futhi uyibeka ku- display: none ngenkathi kugcinwa ezinye izakhiwo ezifana position or z-index uma kudingeka.
Ukuze uthole ubumfihlo besipikha ku-Virtual Lobby, ungasusa izinkambu ze-imeyili kumamodali wesipikha ngokubhekisa izimfanelo zedatha ezisetshenziswa ukuzibonisa. Isibonelo, ukwakheka kwe-Neo kungaveza #InEventDialog .speaker-modal kuyilapho ukwakheka kwe-Classic kusebenzisa #liveWrapper .live-speakers .floating-info , futhi kokubili kungafihlwa nge display: none !important.
Ukuze ushintshe umbala wombhalo wengxoxo ngaphakathi kwemisebenzi, ungaguqula umbala wefonti weziqukathi zemiyalezo ukuze uhambisane nephalethi yomkhiqizo wakho. Isikhethi esifana #liveContent .chat-container .chat-unpinned .chat-body .chat ngomkhuba color impahla (ukusebenzisa amagama angukhiye ajwayelekile ombala noma amakhodi e-HEX) kwenza indawo yengxoxo ihambisane kakhulu nomklamo wakho.
Ukuphatha izindawo zesikhathi namafomu emicimbi nge-CSS
I-CSS ayigcini nje ngobuhle; ungasebenzisa nezinto ezingezona ezeqiniso ezifana :after ukwengeza izingcezu ezincane zombhalo ezifana namalebula endawo yesikhathi ezintweni ezikhona ku-ajenda yakho yomcimbi. Ngokunamathisela content: "Your timezone here" kuthebhu ye-ajenda noma ibhulokhi yesikhathi, ababekhona babona ngokushesha ukuthi ishejuli ibhekisela kuyiphi indawo yesikhathi.
Enye indlela ukwengeza umbhalo ochazayo ngemuva kwesimbozo sethebhu sekhalenda usebenzisa isikhethi esifana #websiteContent .calendar .tabs:after futhi uyifake isitayela esifundekayo font-size. Lokhu kwandisa isikhombikubona ngomongo owusizo ngaphandle kokushintsha amathempulethi e-HTML.
Ngaphandle kwalokho, ungabeka amagama endawo yesikhathi eceleni kwesikhathi sokuphela komsebenzi ngokubhekisa into efana #websiteContent .time:after, futhi ichaza content intambo kanye nosayizi wefonti ukuze ihlale icacile kodwa iyabonakala. Igama langempela, njengelithi “Isikhathi SaseMpumalanga” noma olunye uhlobo lwentambo, libhalwe ngaphakathi kwezingcaphuno ze- content ukubusa.
Uma udinga ukususa ulwazi losuku lomcimbi noma lwendawo yesikhathi kumafomu okubhalisa noma okuthenga, i-CSS ikunikeza indlela engonakalisi yokufihla leyo mininingwane kuphela. Isibonelo, ukusetha visibility: hidden !important on #formContent .eventCover .eventDate or #purchaseContent .eventCover .eventDate igcina ukwakheka kodwa ifihla umbhalo kulabo abakhona.
Uma ufuna futhi ukuvimbela inkinobho ethi “Yiya emcimbini” ukuthi ingaveli esikrinini sokuqinisekisa ifomu lokubhalisa, ungafihla isitsha esisiphethe. Isikhethi esifana #formContent section.form .formCard .formEnd isethwe ku display: none !important isusa leso senzo ngenkathi ishiya lonke ifomu lingashintshi.
Izizinda nemibala ehlukile yamakhasi athile e-Virtual Lobby
I-CSS yangokwezifiso inganika indawo ngayinye ye-Virtual Lobby ubuwena bayo ngokunikeza izithombe noma imibala ehlukene yangemuva kuma-wrappers afana ne-My Account, My Agenda, My Tickets, My Forms, My App noma ngisho namafomu afakiwe. Lokhu kuyasiza kakhulu uma ufuna izivakashi zibone ngokubonakalayo ukuthi zikusiphi isigaba.
Ukuze usethe isithombe sangemuva esiyingqayizivele, uvame ukubhekisa izingqwembe ezithile zekhasi ezifana #myAccountWrapper #myAccountContent, #myAgendaWrapper #myAccountContent, #ticketManagerWrapper #myAccountContent or #myFormsWrapper #myAccountContent futhi usebenzise background-image: url("your image URL") hlanganisa a background-size value ezifana cover, contain, amaphesenti noma amanani ephikseli. Ukugcina izingcaphuno zizungeze i-URL kubalulekile ukuze kugwenywe i-CSS engavumelekile.
Imithetho efanayo ingasetshenziswa kokuqukethwe kohlelo lokusebenza noma amafomu, isibonelo ukuqondisa #appContent #myAccountContent, #formVue .formContent or #customFormVue #customFormContent ukuze indawo ngayinye ibonise isizinda esihlukile sophawu esihambisana nomcimbi wakho noma ubuwena benkampani. Ukusebenzisa izithombe ezihambisanayo kuhlanganisa konke okuhlangenwe nakho ndawonye.
Uma ukhetha imibala eqinile esikhundleni sezithombe zangemuva, ungamane ususe background-image futhi background-size izakhiwo ezivela kulabo abakhethi bese uzishintsha nge- background-color umthetho usebenzisa amanani e-hex noma imibala eqanjwe ngamagama. Le nketho igcina izikhathi zokulayisha zilula futhi kulula ukuzilungisa kamuva.
Ngenxa yokuthi lezi zikhethi zicacile impela, ungahlanganisa amasu esithombe nombala ngokusebenzisa izizinda kwezinye izingxenye (isibonelo amathikithi kanye ne-ajenda) ngenkathi ugcina umklamo omncane wombala kuphela kumafomu ukuze ugcine ukufundeka. Futhi, konke ukuqoshwa kwe-over kuhlala ensimini efanayo ye-CSS yangokwezifiso, ngakho-ke ungakulungisa njengoba umklamo wakho uthuthuka.
Abakhi bekhasi be-CSS ngokwezifiso: Ama-GemPages ku-Shopify
I-GemPages iyisakhi sekhasi lokufika elihudula bese uliphonsa se-Shopify esivele siveza izinketho eziningi zesitayela ngaphandle kwebhokisi, kodwa futhi ikuvumela ukuthi unamathisele i-CSS, i-JavaScript kanye ne-HTML yangokwezifiso ukuze ulungise indlela izinto ngazinye eziziphatha futhi zibukeka ngayo. Lokhu kuhle kakhulu uma udinga ukwenza okungaphezu kwalokho okuvumela iphaneli ebonakalayo.
Yonke into oyiphonsa kusakhiwo se-GemPages iza negama leklasi le-CSS elizenzakalelayo, okwenza kube lula ukuyiqondisa ngemithetho yakho. Ukuze ubone lelo klasi, ukhetha isici, uchofoze kwesokudla kuso bese ukhetha inketho ethi Ikhodi Eyenziwe Ngokwezifiso, evula iphaneli enikezelwe kulelo bhulokhi.
Ngaphakathi kwephaneli yeKhodi Eyenziwe Ngokwezifiso uzobona amathebhu ahlukene e-CSS ne-JavaScript, ukuze ukwazi ukunquma ukuthi ushintsha isitayela kuphela noma ungeza nokuziphatha okusebenzisanayo. Ungathayipha izitayela zakho ngqo kuthebhu ye-CSS noma unamathisele izingcezu ezivela kulabhulali yakho noma kumadokhumenti.
Ngemva kokulondoloza ikhodi yakho yangokwezifiso yento ethile, ungasebenzisa imodi yokubuka kuqala ye-GemPages ukuze ubone ukuthi ikhasi libukeka kanjani kumadivayisi (ideskithophu, ithebhulethi, iselula) futhi uqinisekise ukuthi isitayela sakho sisasabela kahle kosayizi besikrini abahlukene. Lolu chungechunge lwempendulo lubalulekile uma usebenza ngezikhala eziqondile noma amafonti enziwe ngokwezifiso.
Nakuba i-GemPages ikunika ukuguquguquka okukhulu, kuwukuhlakanipha ukugcina i-CSS yakho ne-JavaScript ihlelekile futhi ingenasici, ngoba izikripthi eziningi ezisindayo noma imithetho eyinkimbinkimbi kakhulu inganciphisa isivinini sesitolo sakho futhi ilimaze ulwazi lomsebenzisi kanye ne-SEO. Ipulatifomu inemikhawulo efana nesivalo sosayizi we-Liquid esihlanganisiwe samabhulokhi okunwetshwa (isibonelo i-100 KB), ngakho-ke ukuhlala usebenza kahle kuyingxenye yomkhuba omuhle.
Ukulungiswa okuvamile kwe-CSS okwenziwe ngokwezifiso kwezinto ze-GemPages
Enye yezinto ezivame kakhulu ukwenza ngokwezifiso ku-GemPages ukushintsha umbala wombhalo ngale kwalokho okuvumela abakhethi bombala abayisisekelo, ngokuvamile ukuze kuhambisane kahle namakhodi e-hex omkhiqizo noma kugqanyiswe izihloko noma imiyalezo ethile. Ngokuqondisa ikilasi lesici kuthebhu ye-CSS bese usetha okusha color, ungalungisa kahle wonke amagama asekhasini.
Ukulungisa usayizi wefonti kanye nesisindo kungenye indlela yokulungisa ejwayelekile yokugcina uhlu lwemibhalo nokuthuthukisa ukufundeka ezingxenyeni ezinde zekhophi. Ungamaka izihloko njengezigqamile nezinkulu, wenze umbhalo womzimba ube mkhulu kancane ukuze ufinyeleleke noma wehlise ulwazi lwesibili usebenzisa font-size futhi font-weight imithetho.
Izizinda ezenziwe ngokwezifiso zithandwa kakhulu ngokudala umehluko phakathi kwezigaba, ukugqamisa ukukhushulwa noma ukudonsela ukunaka ezibizweni esenzweni. Nge-CSS ungabeka imibala eqinile, ama-gradients noma ngisho nezithombe zangemuva ezitsheni ezigoqa okuqukethwe okubalulekile njengezithiyo zamanani, uhlu lwezici noma ubufakazi.
Ukulungisa kahle ama-padding kanye nomkhawulo ozungeze izinto kukusiza ukuthi uhlanze izakhiwo ezinabantu abaningi futhi udale indawo yokuphefumula eyenza ikhasi lizizwe lihle kakhulu. Isikhala esifanele sithuthukisa ukuhlelwa kokubukwayo, ngoba abasebenzisi bangasho ngokushesha ukuthi yiziphi izinto ezihambisanayo nokuthi yiziphi ezihlukene.
Ukwengeza imingcele namakhona ayindilinga kuyindlela elula kodwa ephumelelayo yokuguqula amabhokisi alula abe yizingxenye ezifana namakhadi noma izindawo zokugcizelela zesitayela sebheji. Lokhu kuwusizo ikakhulukazi kumabhulokhi ezici, ubufakazi noma amabhokisi agqamisayo lapho umugqa omncane noma irediyasi yekona iphakamisa khona umklamo ngokushesha.
Isitayela sezinkinobho nemiphumela yokuhambisa phezulu nge-CSS
Izinkinobho ziyisici esiyinhloko sokuguqulwa kunoma yiliphi ikhasi lokufikela noma isitolo, ngakho-ke kuvamile ukushintsha izitayela zazo ezizenzakalelayo ukuze zivumelane kangcono nolimi olubonakalayo lomkhiqizo. Usebenzisa i-CSS ungalungisa imibala yangemuva, ama-gradients, ukuthayipha, i-border radius kanye nezithunzi ukuze udale ama-CTA ahlukile ayisisekelo nawesibili.
Ngale kokubukeka okungaguquki, imiphumela ye-hover ebhalwe ku-CSS ikuvumela ukuthi udale ukusebenzisana okumnandi okuncane ngaphandle kwe-JavaScript enzima. Isibonelo, ungashintsha umbala wangemuva, ungeze uguquko lwesikali oluncane, ulungise ubukhulu bomngcele noma ulungise umbala wombhalo lapho umsebenzisi ezulazula phezu kwenkinobho.
Uma usebenzisa izimo ze-hover ezenziwe ngokwezifiso, kubalulekile ukugcina umehluko owanele futhi ugweme izithombe ezinolaka ngokweqile ezingaphazamisa abasebenzisi esenzweni esiyinhloko ofuna basithathe. Ukugqamisa okuncane ekuqondeni okuhambayo kuvame ukusebenza kangcono kunokushintshashintsha okukhazimulayo.
Ngenxa yokuthi izinkinobho zivela ezindaweni eziningi kusayithi, kungaba usizo ukuchaza amakilasi ezinkinobho ezabiwe endaweni eyodwa bese uwasebenzisa kabusha kunokuba ulungise isimo ngasinye ngokwehlukana. Lokhu kugcina i-CSS yakho ilula futhi kuqinisekisa ukuthi wonke ama-CTA azwakala ehambisana kahle kuwo wonke ama-funnel akho.
Amacala okusetshenziswa kwe-WordPress ngokwezifiso ze-CSS nezibonelo
Kumasayithi e-WordPress ezemfundo noma ezikhungo, i-CSS yangokwezifiso ivame ukusetshenziselwa ukufihla izihloko zamakhanda ezizenzakalelayo kanye nemigqa yamathegi lapho itimu izibeka ezindaweni ezingajwayelekile, ikakhulukazi ezikrinini ezincane lapho zingase zingqubuzane khona nama-logo. Ngokuqondisa abakhethi abanjengo .site-title futhi .site-description nokubeka display: none, uhlanza i-header ngaphandle kokuhlela amathempulethi.
Izisekelo zingenye into evamile: ungase ufune ukuthi yonke indawo engezansi yabelane ngombala othile wangemuva nombhalo omhlophe kanye nezixhumanisi ezifanelana nomkhiqizo wakho. Umthetho osebenzayo background-color futhi color kuya .site-footer futhi .site-footer a kwanele ukufeza ibha yonyawo eqinile nehlangene.
Ukushintsha imibala yezihloko kuyo yonke isayithi kulula njengokukhetha isisekelo sesitayela njenge h1, kodwa futhi ungaba yinkimbinkimbi ngokwengeziwe ngokubhekisa okuthunyelwe noma amakhasi athile anezigaba ezisekelwe ku-ID ezifana .postid-1 h1. Lokhu kukuvumela ukuthi ugqamise amakhasi athile anemibala yezihloko ezihlukile ngenkathi ushiya okuzenzakalelayo komhlaba wonke kuphelele.
Ukuze udonsele ukunaka kokuthunyelwe okunamathelayo (izihloko ezivelele) ungabanika umngcele noma isizinda esihlukile usebenzisa okwakhelwe ngaphakathi .sticky ikilasi ezinye izingqikithi ezinikezayo. Umngcele oqinile ozungeze izinto ezinamathelayo udala isibonakaliso esicacile sokuthi zibaluleke kakhulu kunokufakwa okuvamile.
Izindawo zamawijethi, ikakhulukazi esinyathelweni noma esiseceleni, zingashintshwa ngokuphelele nge-CSS zibe izihloko eziphakathi, zengeze ukugqamisa, zishintshe isisindo sefonti, noma zibeke phakathi ibhulokhi lokuqukethwe kwamawijethi lonke. Abakhethi bathanda .footer-widgets .widget-title or .footer-widget-area ikuvumela ukuthi uhlele kabusha indlela la mabhulokhi amancane abukeka futhi azwakala ngayo.
Amaphethini e-CSS engeziwe amawijethi, izixhumanisi namabhokisi agqamile
Uma usebenzisa amawijethi akhipha okuthunyelwe okufakiwe noma izithombe emakhasini athile, ungaxhuma i-CSS yakho ku-ID yalelo khasi ukuze ulungise ukuqondanisa noma ukwakheka kuphela lapho kudingeka khona. Ngokwesibonelo, ukuhlanganisa .page-id-62 ngama-ID ewijethi ahlukahlukene akuvumela ukuthi ubeke amawijethi amaningana afakiwe kulelo khasi elilodwa kuphela.
Isitayela sezixhumanisi singenye indawo lapho i-CSS yangokwezifiso inomthelela omkhulu ekufundekeni nasekubukekeni kwayo: ungase ufune ukuthi izixhumanisi zivele ngaphandle kwemigqa engezansi ngokuzenzakalelayo kodwa zibonise imigqa engezansi ku-hover kuphela. Isisekelo sokukhomba a futhi a:hover abakhethi bakunika ukulawula okugcwele kulokhu kuziphatha.
Uma umbhalo ogqamile ozenzakalelayo ungaqinile ngokwanele, ungandisa font-weight ngoba strong izakhi futhi zishintshe nombala wazo, isibonelo zibe nombala oluhlaza okwesibhakabhaka ocebile phakathi kwamabili. Lokhu kungathuthukisa kakhulu ukuskenwa kokuqukethwe okude kokufundisa.
“Amabhokisi ezixwayiso” noma izitsha zokubiza ezenziwe ngokwezifiso kulula ukuzidala usebenzisa ikilasi elizinikele ku- <div> isici, bese usilungisa nge-margin, i-padding, umbala wangemuva kanye nomngcele. Ingemuva elinombala obomvu elinomngcele obomvu omnyama kancane, isibonelo, lilungele izixwayiso noma izaziso ezibalulekile.
Amawijethi ngamanye anama-ID awo (njengo #text-18) zingaguqulwa zibe amabhlogo ahlukile ngokuwabela izizinda ezinemibala, umbhalo omhlophe, ukugoqa okwengeziwe noma izihloko ezikhulisiwe ngezikhethi ezifakwe izidleke ezifana #text-18 .widget-title. Le ndlela iwusizo uma ufuna iwijethi eyodwa ivelele kwezinye.
Ukuqondisa okuthuthukisiwe kwe-CSS kohlu, ama-sidebars nama-plugin
Ngezinye izikhathi ufuna ukuthi i-sidebar ethile noma ikholomu ibukeke ihlukile kuphela kokuthunyelwe okuthile; usebenzisa izikhethi ezihlanganisiwe ezifana .postid-404 #genesis-sidebar-primary ikuvumela ukuthi ushintshe imibala yangemuva, imingcele kanye nokugoqa kuleyo sidebar kodwa kuphela uma ubuka isihloko esikhethiwe. Lokhu kuwusizo ezimemezelweni ezikhethekile noma ezimisweni ezihlukile.
Ama-plugin akhiqiza uhlu lokuthunyelwe noma izigaba avame ukuba nophawu lwawo olungahambisani nengqikithi yakho yonke, kodwa i-CSS yangokwezifiso ingabaletha emgqeni obonakalayo. Isibonelo, ungaqondisa uhlu olu-odiwe oluvela ku-plugin yekhodi emfushane ngezikhethi ezifana .widget ol.display-posts-listing > li bese ulungisa amamajini kanye nokugoqa.
Ngokufanayo, uhlu lwezigaba oluvela kuma-plugin e-taxonomy lungasuswa kabusha ngesitayela .widget li.cat-item ukwengeza noma ukuguqula isikhala, ukuze zihlangane kalula nezitayela zamawijethi endabuko. Lokhu kubukeka okuhlala njalo kusekela ukusetshenziswa kalula ngoba abasebenzisi babona amaphethini ajwayelekile kuyo yonke isayithi.
Uma uhlela i-CSS nge-WordPress Customizer noma amathuluzi afanayo, kuwukuhlakanipha ukwethula izitayela ezintsha kancane kancane, uvivinya imithetho embalwa ngesikhathi esikhundleni sokunamathisela amabhlogo amakhulu ngesikhathi esisodwa. Ukusebenza ngezinyathelo ezincane, ezilungisekayo kwenza ukulungisa amaphutha kube lula kakhulu uma kukhona okungabukeki kahle.
Khumbula ukuthi yonke imigqa ye-CSS kufanele ifeze injongo ecacile yokusebenza, hhayi nje ukuhlobisa ngenxa yokuhlobisa. Ukulungisa isayithi ngokweqile kungadala umsindo obonakalayo futhi kwenze ukulungiswa kube nzima kakhulu, ikakhulukazi lapho izinguquko ezahlukene ziqala ukungqubuzana.
Imikhuba emihle kakhulu kanye nezinsiza zokufunda ze-CSS eyenziwe ngokwezifiso
Ukubhala phansi izinguquko zakho ze-CSS ngamazwana kuwumkhuba ozokongela wena nethimba lakho isikhathi esiningi, ikakhulukazi kumawebhusayithi ahlala isikhathi eside. Ku-CSS, ungabhala imibono efana ne- /* This is a comment */ ngenhla kweqoqo lemithetho ukuze uzikhumbuze ukuthi kungani kwanezelwa isitayela noma ukuthi sithinta liphi ikhasi.
Ngenxa yokuthi i-CSS iwulimi olucebile kangaka, ukuthuthuka kusuka ekushintsheni okuyisisekelo kuya kumasu athuthukile kudinga ilukuluku, ukuhlola kanye nokuzijwayeza njalo. Kunezifundo ezingenakubalwa, izindawo zokugcina izifinyezo kanye nemibukiso yezibonelo ku-inthanethi ekhombisa konke kusukela ezinkinobho ezilula kuya kuma-kit agcwele e-UI akhiwe ngokuphelele nge-CSS.
Amasayithi akhethekile agxile ezingcezu zesixhumi esibonakalayo, ukuhlolwa kwekhodi kanye namaphethini e-UI akunikeza amabhlogo okwakha asevele enziwe ongazivumelanisa namaphrojekthi akho. Eziningi zazo zifaka phakathi ukubuka kuqala okubukhoma, ukuze ubone imiphumela yokuhambisa phezulu, amaqhinga okubeka kanye nezithombe ezinyakazayo zisebenza ngaphambi kokungenisa imibono efanayo ku-CSS yakho yangokwezifiso.
Amasayithi okubhekisela kuwo kanye nemibhalo esemthethweni ayigugu kakhulu uma ufuna ukuqonda ngokujulile yonke impahla kanye nenani, ikakhulukazi izici ezintsha noma izinhlelo zokwakheka njenge-Flexbox ne-Grid. Ukuqonda kahle izisekelo kwenza kube lula ukufunda nokushintsha ikhodi ebhalwe abanye.
Imidwebo yokuklama eshintsha amashidi esitayela kuphela ngenkathi igcina isakhiwo esifanayo se-HTML ibonisa ukuthi i-CSS ingaba namandla kangakanani ekuguquleni ikhasi ngokuphelele ngaphandle kokuthinta okuqukethwe. Ukuphequlula lezo zibonelo kuyindlela enhle kakhulu yokuvuselela imibono nokuphakamisa amazinga akho okuklama.
Ukuletha i-CSS yangokwezifiso emisebenzini yakho yokusebenza ye-WordPress, i-GemPages, i-Virtual Lobbies kanye namanye amapulatifomu kukunika ukulawula okunembile kuyo yonke imininingwane ebonakalayo, kusukela kumafonti nezinkinobho kuya kumbala wengxoxo kanye nezithombe zangemuva, kuyilapho izindawo zekhodi yangokwezifiso ezinikezelwe zigcina lezi zinguquko ziphephile, zilandeleka futhi kulula ukuzilungisa ngokuhamba kwesikhathi. Ngokuzijwayeza kancane usebenzisa amathuluzi okuhlola isiphequluli, ukuhlela izingcezu zakho kanye nokuncika ezinsizeni zokufunda ezisezingeni eliphezulu, ungakha okuhlangenwe nakho okucwebezelisiwe nokungaguquguquki komkhiqizo ngaphandle kokuhlela itimu eyinhloko noma amafayela esistimu.
