- I-CSS eyenzelwe wena ikuvumela ukuba utshintshe imixholo emiselweyo ukuze ulawule iifonti, imibala, uyilo kunye nokubonakala kuzo zonke iiplatifomu ezifana neWordPress, iGemPages kunye neVirtual Lobby.
- Iindlela zokusebenza ezikhuselekileyo zisebenzisa iindawo ezizinikeleyo "ze-CSS" kunye nezixhobo zokuhlola isikhangeli ukuze zijolise izinto ngokuchanekileyo ngaphandle kokuhlela umxholo oyintloko okanye iifayile zenkqubo.
- Iziqwenga ezisebenzayo zigubungela iifonti, amaqhosha, isitayile sencoko, iifom, iiwijethi kunye nemvelaphi, okuvumela ukwenziwa kwebhrendi rhoqo kunye nokuphuculwa kokusebenziseka.
- Ukulandela iindlela ezilungileyo—utshintsho oluncinci oluphindaphindwayo, izimvo ezicacileyo kunye nekhowudi ecacileyo—kugcina i-CSS eyenzelwe wena ikwimeko entle kwaye isebenziseka lula.
I-CSS eyenziwe ngokwezifiso sisithako esiyimfihlo esikuvumela ukuba ukhululeke kwiitemplate eziqinileyo kunye neetheme ezimiselweyo ukuze unike nayiphi na iwebhusayithi, ivenkile okanye i-app ubuwena bayo obubonakalayo. Nokuba ulungisa iblogi yeWordPress, iphepha lokufikela leShopify elakhiwe ngeGemPages, ivenkile yaseTiendanube okanye iVirtual Lobby yeziganeko ezikwi-intanethi, ukwazi indlela yokongeza nokulawula iCSS eyenzelwe wena kuvula inqanaba elitsha lolawulo.
Endaweni yokubambeka kwinto ecingwe ngumyili wetimu yakho, i-CSS yakho yangokwezifiso ikuvumela ukuba ufihle izinto ongazidingiyo, utshintshe iifonti, imibala kunye nesithuba, ulungise amaqhosha kwaye ugqithise amacandelo onke oyilo ngaphandle kokuchukumisa i-HTML okanye ikhowudi yesicelo. Kule khokelo siza kujonga ukuba yintoni i-CSS, indlela yokongeza izitayile ezenziwe ngokwezifiso ngokukhuselekileyo kumaqonga ahlukeneyo, ingqokelela enkulu yeziqwenga ezilungele ukusetyenziswa, kunye nezinye iindlela ezilungileyo ukuze utshintsho lwakho lungaphazamisi ngohlaziyo lwexesha elizayo.
Yintoni kanye kanye iCSS yesiko kwaye kutheni ibalulekile
I-CSS (Cascading Style Sheets) lulwimi lwesitayile olulawula indlela umxholo we-HTML okanye we-XML obonakala ngayo kwisikhangeli: iifonti, imibala, izithuba, ulwakhiwo, imida, imvelaphi nokunye okuninzi. Nangona i-HTML ichaza ulwakhiwo kunye nentsingiselo yoxwebhu, i-CSS yiyo exelela isikhangeli indlela yokubonakalisa olo lwakhiwo kwisikrini, ushicilelo, intetho okanye ezinye iindlela.
Imigangatho yewebhu yanamhlanje yahlula umxholo kwintetho ngokugcina i-HTML yesakhiwo kunye ne-CSS yoyilo olubonakalayo, idla ngokugcinwa kwiifayile zesitayile sangaphandle okanye iibhloko zesitayile esisemgceni. Yonke iwebhusayithi oyibonayo engengombhalo omnyama kuphela kwiphepha elimhlophe ixhomekeke kwimithetho yeCSS engasemva kwemifanekiso ukulawula izihloko, imihlathi, ukuhambahamba, iifom, imifanekiso kunye neegridi zoyilo.
Kwabaninzi abakhi bewebhusayithi, imixholo kunye nabahleli bephepha, ufumana ujongano olunobuhlobo lokutshintsha useto olusisiseko olufana nemibala, iifonti okanye isithuba, kodwa kuya kuhlala kukho iinkcukacha ezithile ezingavezwanga zizixhobo zolawulo ezibonakalayo. Kulapho ke ikhowudi ye-CSS eyenzelwe wena ingena khona: ikuvumela ukuba utshintshe iindlela ezimiselweyo uze wongeze imithetho yakho phezulu, ngaphandle kokutshintsha iifayile zomxholo wokuqala.
Kubaphuhlisi, iiarhente kunye nabasebenzi abazimeleyo abakha amava alungiselelwe bona, i-CSS eyenzelwe wena ibalulekile ukuze ihambelane nezikhokelo zebhrendi, izame uyilo oluphambili, iphucule ukusebenzisana okuncinci kunye nokuqinisekisa ukuhambelana kuzo zonke iiphepha kunye nezixhobo. Idityaniswe neJavaScript yokunxibelelana kunye ne-HTML markup ecocekileyo, i-CSS igqibezela i-trio enika amandla uninzi lwewebhu evulekileyo kwaye ikuncede. yenza iwebhusayithi ukusuka ekuqaleni.
Ukongeza ngokukhuselekileyo i-CSS yangokwezifiso kwi-WordPress kunye namaqonga afanayo
Enye yezona ngozi zinkulu xa usebenza neCSS kumaqonga e-CMS afana neWordPress kukuhlela iifayile zetimu ngqo ukusuka kumhleli wekhowudi owakhelwe kwideshibhodi yomlawuli. Ukuba utshintsha amaphepha esitayile sokuqala sesihloko okanye iifayile ze-PHP ngaphandle kwembali yotshintsho ecacileyo, uhlaziyo lwexesha elizayo luba nzima okanye lungenzeki kwaye impazamo encinci inokwaphula isiphelo esingaphambili.
Kwiisetingi zeWordPress ezilawulwayo, abanye ababoneleli bakhubaza ukuhlela umxholo ngqo ngokukodwa ukuze baphephe iingxaki zokhuseleko kunye namaphupha amabi okugcinwa okubangelwa kukuguqulwa okungalawulwayo kweefayile eziphambili. Ukuba awukwazi ukufumanisa ukuba yintoni yokuqala kunye nento oyifakileyo, amaqela enkxaso awanakukwazi ukuhlaziya okanye ukulungisa ingxaki kwiwebhusayithi yakho ngokukhuselekileyo kamva.
Iindaba ezimnandi zezokuba iWordPress yanamhlanje ibandakanya indawo "eyongezelelweyo ye-CSS" kwi-Customizer (Inkangeleko> Yenza ngokwezifiso> i-CSS eyongezelelweyo) apho unokuncamathisela khona imithetho yakho ngaphandle kokuchukumisa iifayile zemixholo. Iisitayile ezibekwe apho zilayishwa emva kweCSS yonke, oko kuthetha ukuba imithetho yakho ihlala ithatha indawo yokuqala ngelixa igcina umxholo osisiseko ungaphazanyiswa.
Ukugcina yonke i-CSS yakho yangokwezifiso ngaphakathi kweli candelo lingaphezulu kukunika indawo enye, ephakathi yokujonga, ukukopa kwezinye iisayithi, ukucima okwethutyana okanye ukucima imithetho ukuba kukho into engahambanga kakuhle. Ukuba olunye lwezilingo zakho luyayonakalisa indlela ebhalwe ngayo, umane uphawula okanye ususe iqhekeza kwaye umxholo ubuyela kwinkangeleko yawo yokuqala.
Isici esongezelelweyo se-CSS kwi-WordPress sikwabandakanya ukuqinisekiswa okusisiseko kunye nokugqibezela ngokuzenzekelayo, okunceda ukubamba iimpazamo kwiipropati kunye nabakhethi kwaye kukhawulezise ukubhala ikhowudi ecocekileyo nesebenzayo. Ifilosofi efanayo iyavela kwamanye amaqonga: anikezela ngebhokisi ethi "ikhowudi yesiko" okanye "i-CSS yesiko" ezinikeleyo ngokuchanekileyo ukugcina ii-overrides zahlukile kwaye kulula ukuzilawula.
Ukuhlola iphepha ukuze wazi ukuba yintoni omawujolise kuyo ngeCSS
Ngaphambi kokuba ukwazi ukufaka isitayile okanye ukufihla naliphi na iphepha elithile, kufuneka uqale wazi ukuba zeziphi izinto ze-HTML kunye nabakhethi be-CSS abanoxanduva lwazo. Ngenxa yokuba i-CSS ayibonakali ngaphandle, kufuneka ujonge phantsi kwe-hood usebenzisa izixhobo zomphuhlisi wesikhangeli sakho.
Uninzi lweebrowser zanamhlanje zikuvumela ukuba ucofe ekunene kuyo nayiphi na into yephepha lewebhu uze ukhethe ukhetho olufana no-“Inspect” (Chrome) okanye “Inspect Element” (Firefox) ukuvula iDeveloper Tools. Le mbono ikubonisa ulwakhiwo lwe-HTML kwelinye icala, kwaye kwelinye icala, zonke iindlela ezisetyenziswa ngoku kwi-element ekhethiweyo.
Ngaphakathi kwiphaneli yeStyles ungabona ukuba yeyiphi imithetho yeCSS kunye neefayile ezichaphazela loo nto kwaye ude uzame ngokuguqula, ukutshintsha okanye ukongeza iipropathi ngexesha langempela ngaphandle kokuphazamisa isayithi. Wakuba ufumene indibaniselwano esebenzayo, ungakopa isikhethi sokugqibela kunye nemithetho kwindawo yakho ye-CSS (umzekelo i-WordPress Customizer okanye umhleli we-Shopify).
Olu hambo lomsebenzi lwe-inspect → experiment → paste kwi-CSS eyenzelwe wena yeyona ndlela ikhuselekileyo yokufunda nokuphucula utshintsho lwakho ngelixa uqonda indlela abakhethi abahlukeneyo, iiklasi kunye nee-ID ezisebenzisana ngayo kwisakhiwo esintsonkothileyo. Ekuhambeni kwexesha uya kuqonda neendlela eziqhelekileyo zokubiza amagama ezivela kwimixholo nakubakhi, nto leyo eyenza kube lula ukujolisa inxalenye efanelekileyo yephepha ngaphandle kwemiphumo emibi engafunekiyo.
Ukusebenzisa i-CSS yangokwezifiso kumaqonga emicimbi: Imizekelo ye-Virtual Lobby
Amaqonga eziganeko afana ne-InEvent akuvumela ukuba wenze ngokwezifiso inkangeleko kunye nemvakalelo ye-Virtual Lobby yabo ngaphaya komhleli obonakalayo ngokuncamathisela i-CSS yangokwezifiso kwibhokisi yeKhowudi yoMthombo ezinikeleyo. Oku kuphucuke kakhulu kunolungiselelo lokutsalwa nokulahlwa kwaye kudla ngokucetyiswa kubantu abasele bekhululekile nge-syntax ye-CSS.
Ngeendlela ezenziwe ngokwezifiso kwi-Virtual Lobby, ungangenisa kwaye usebenzise iifonti zebhrendi, ufihle amaqhosha angafanelekanga kubaphulaphuli bakho, ulungise imibala yencoko, utshintshe iinkcukacha zefom kwaye usete imifanekiso yangasemva eyahlukileyo okanye imibala kwiindawo ezahlukeneyo. Eli qonga lityhila ii-ID ezithile kunye namagama eeklasi ukuze abakhethi bakho bakwazi ukuchaneka.
Ukuze ulayishe ifonti yakho, uqala ngokuchaza ifonti @font-face umthetho okanye ukusebenzisa @import ukutsala ifayile yesibhengezo kwi-URL apho ifonti ibanjwe khona kwi-intanethi. Umzekelo, ungakhomba kwiGoogle Fonts okanye kwi-host yakho, ucacise igama losapho lwefonti, isitayile, ifomathi yefayile kunye noluhlu lwe-unicode.
Nje ukuba ifonti ibhengezwe, ungayisebenzisa kwihlabathi liphela ngokujolisa body okanye ngokukhetha ngakumbi ngokujolisa kwiingcambu ezisongayo ezifana #liveWrapper, #fileManagerWrapper, #myAgendaWrapper, #myFormsWrapper or #ticketManagerWrapper. Ungabeka iifonti ezininzi ngokungenisa iifonti ezahlukeneyo uze unike nganye nganye amaphepha ahlukeneyo kunye nee-wrappers.
Izicelo eziqhelekileyo zokwenza ngokwezifiso kwi-Virtual Lobby ziquka ukufihla okanye ukulungisa izinto ezisebenzisanayo: ukususa iqhosha elithi “Vula i-lobby” kwindawo yeakhawunti, ukufihla ukhetho lwe-“Troubleshoot” kwi-header, ukususa ulawulo lwe-“Phakamisa isandla” kwimisebenzi okanye ukufihla idilesi ye-imeyile yezithethi ukuze kubekho ubumfihlo. Zonke ezi zinto zisonjululwa ngemithetho yeCSS ebeka abakhethi abafanelekileyo kwi display: none or visibility: hidden kunye !important xa kufuneka kulungiswe izinto ezingafunekiyo.
Iziqwenga zeCSS ezisebenzayo zezinto ze-Virtual Lobby UI
Ukuze ufihle iqhosha elithi “Vula i-lobby” kwithebhu ethi My Account kuzo zombini ii-Neo kunye ne-Classic Virtual Lobby layouts, ungajolisa kwisikhongozeli esinoxanduva lweso senzo kwaye usisuse ngokupheleleyo kwindlela yoyilo. Umkhethi ofana #headerVue .eventCover-info-virtual-lobby kunye display: none yenza kanye oku, iqinisekisa ukuba abo babekhona abanakufikelela kuloo ndlela imfutshane.
Ukususa iqhosha elithi “Troubleshoot” kwibar yokuzulazula ephezulu kubandakanya ukujolisa kwisikhethi senketho ethile yokwehla uze uyifihle, rhoqo nge display: none !important ukuphumelela kwiindlela ezimiselweyo. Xa ibha isebenzisa into efana .v2-barTop .barContent .barDropdown.optionTroubleshoot, umane ugqithisa loo ndibaniselwano yeklasi kwindawo yakho yekhowudi yomthombo.
Ukuba ufuna ukukhubaza iqhosha elithi “Phakamisa isandla” ngexesha lemisebenzi ebukhoma, ungayifumana i-selector yayo ngaphakathi kwisikhongozeli solawulo lwevidiyo uze uyifihle ngendlela efanayo. Isakhiwo esiqhelekileyo sinokuba #liveContent .videos .videos-controls .toolRaiseHands kunye nokuseta kuyo display: none ngelixa ugcina ezinye iipropati ezifana position or z-index ukuba kuyafuneka.
Ukuze ufumane ubumfihlo besithethi kwi-Virtual Lobby, ungasusa amasimi e-imeyile kwiimodal zesithethi ngokujolisa kwiimpawu zedatha ezisetyenziselwa ukuzibonisa. Umzekelo, uyilo lweNeo lunokuveza #InEventDialog .speaker-modal ngelixa uyilo lweClassic lusebenzisa #liveWrapper .live-speakers .floating-info , kwaye zombini zinokufihlwa kunye display: none !important.
Ukuze utshintshe umbala wombhalo wencoko kwimisebenzi, ungawutshintsha umbala wefonti yezikhongozeli zemiyalezo ukuze uhambelane nephalethi yophawu lwakho. Isikhethi esifana #liveContent .chat-container .chat-unpinned .chat-body .chat ngesiko color ipropathi (ukusebenzisa amagama angundoqo ombala oqhelekileyo okanye iikhowudi ze-HEX) kwenza indawo yencoko ihambelane ngakumbi noyilo lwakho.
Ukulawula iindawo zexesha kunye neefom zeziganeko ngeCSS
I-CSS ayipheleli nje ekujongeni ubuhle; ungasebenzisa nezinto ezingachanekanga ezifana :after ukongeza iziqwenga ezincinci zombhalo ezifana neelebhile zexesha kwiindawo ezikhoyo kwi-ajenda yakho yesiganeko. Ngokuncamathisela content: "Your timezone here" Kwithebhu ye-ajenda okanye kwi-timeblock, abo babekhona babona ngoko nangoko ukuba ishedyuli ibhekisa kweyiphi indawo yexesha.
Enye indlela kukongeza umbhalo ochazayo emva kwe-tab wrapper yekhalenda usebenzisa i-selector efana #websiteContent .calendar .tabs:after kwaye uyihombise ngesixhobo esifundekayo font-size. Oku kwandisa ngokubonakalayo ujongano ngomxholo oluncedo ngaphandle kokutshintsha iitemplate ze-HTML.
Okanye, ungabeka amagama endawo yexesha ecaleni kwexesha lokuphela komsebenzi ngokujolisa into efana nale #websiteContent .time:after, kwakhona ichaza content umtya kunye nobukhulu befonti ukuze ihlale ingabonakali kodwa iyabonakala. Igama lokwenyani, elifana nelithi “iXesha laseMpuma” okanye naluphi na olunye uludwe, libhalwe ngaphakathi kwiingcaphuno ze content umthetho.
Xa ufuna ukususa ulwazi lomhla wesiganeko okanye lwendawo yexesha kwiifomu zobhaliso okanye zokuthenga, i-CSS ikunika indlela engonakalisiyo yokufihla ezo nkcukacha. Umzekelo, ukuseta visibility: hidden !important on #formContent .eventCover .eventDate or #purchaseContent .eventCover .eventDate igcina uyilo kodwa ifihla umbhalo kwabo babekhona.
Ukuba ufuna ukuthintela iqhosha elithi “Yiya kwisiganeko” ekubonakaleni kwisikrini sokuqinisekisa ifomu yokubhalisa, ungasifihla isikhongozeli esisiphetheyo. Umkhethi ofana #formContent section.form .formCard .formEnd isethelwe display: none !important isusa eso senzo ngelixa ishiya yonke enye ifomu ingaphazanyiswa.
Imvelaphi kunye nemibala eyahlukileyo yamaphepha athile e-Virtual Lobby
I-CSS eyenzelwe wena inokunika indawo nganye ye-Virtual Lobby ubuwena bayo ngokunika imifanekiso okanye imibala eyahlukileyo yangasemva kwiifayile ezifana ne-My Account, My Agenda, My Tickets, My Forms, My App okanye neefomu ezifakiweyo. Oku kuluncedo ngakumbi xa ufuna iindwendwe zibone ngokubonakalayo ukuba zikwicandelo lini.
Ukuze usete umfanekiso ongasemva owahlukileyo, uhlala ujolise kwiisongeli ezithile zephepha ezifana #myAccountWrapper #myAccountContent, #myAgendaWrapper #myAccountContent, #ticketManagerWrapper #myAccountContent or #myFormsWrapper #myAccountContent kwaye usebenzise background-image: url("your image URL") dibanisa a background-size ixabiso ezifana cover, contain, iipesenti okanye amaxabiso eephikseli. Ukugcina iikowuteshini zijikeleze i-URL kubalulekile ukuze kuthintelwe i-CSS engasebenziyo.
Imithetho efanayo ingasetyenziselwa umxholo we-app okanye iifom, umzekelo ukujolisa #appContent #myAccountContent, #formVue .formContent or #customFormVue #customFormContent ukuze indawo nganye ibonise imvelaphi eyahlukileyo yophawu oluhambelana nomcimbi wakho okanye ubuwena benkampani. Ukusebenzisa imifanekiso ehambelanayo kudibanisa lonke amava kunye.
Ukuba ukhetha imibala eqinileyo endaweni yemifanekiso engasemva, ungayisusa nje background-image kwaye background-size iipropati ezivela kwabo bakhethi kwaye uzibeke endaweni yazo nge background-color umthetho usebenzisa amaxabiso e-hex okanye imibala eqanjwe ngamagama. Olu khetho lugcina amaxesha okulayisha elula kwaye kulula ukululungisa kamva.
Ngenxa yokuba ezi zikhethi zichanekile, ungadibanisa amaqhinga omfanekiso nombala ngokusebenzisa imvelaphi kwezinye iindawo (umzekelo amatikiti kunye ne-ajenda) ngelixa ugcina uyilo oluncinci lombala kuphela kwiifom ukuze ugcine ukufundeka. Kwakhona, zonke ii-overovers zihlala kwicandelo elifanayo le-CSS, ngoko ke ungazilungisa njengoko uyilo lwakho lutshintsha.
Abakhi bephepha beCSS abakhethekileyo: IiGemPages kwiShopify
I-GemPages yinkqubo yokudala iphepha lokufika elitsalwa lize liwiswe kwiShopify esele iveza iindlela ezininzi zokulungisa izinto, kodwa ikwakuvumela ukuba unamathisele i-CSS, iJavaScript kunye ne-HTML ukuze ulungise indlela izinto eziziphatha ngayo nezibukeka ngayo. Oku kulungile xa kufuneka wenze okungaphaya koko iphaneli ebonakalayo ikuvumelayo.
Yonke into oyiphosayo kwisakhiwo seGemPages iza negama leklasi yeCSS esisiseko, nto leyo eyenza kube lula ukuyijolisa ngemithetho yakho. Ukuze ubone loo klasi, ukhetha into, ucofe ekunene kuyo uze ukhethe ukhetho lweKhowudi yesiko, oluvula iphaneli ezinikele kuloo bhloko.
Ngaphakathi kwiphaneli yeKhowudi yoKwenziwa ngokwezifiso uza kubona iithebhu ezahlukeneyo zeCSS kunye neJavaScript, ukuze ukwazi ukugqiba ukuba utshintsha isitayile kuphela okanye wongeza indlela yokuziphatha esebenzisana nayo. Ungazichwetheza ngqo kwiithebhu zeCSS okanye uncamathisele iziqwenga ezivela kwilayibrari yakho okanye kumaxwebhu.
Emva kokugcina ikhowudi yakho yesiko yento ethile, ungasebenzisa imo ye-GemPages' preview mode ukuze ubone indlela elijongeka ngayo iphepha kuzo zonke izixhobo (idesktop, ithebhulethi, iselfowuni) kwaye uqinisekise ukuba isitayile sakho sisasabela kakuhle kwiisayizi ezahlukeneyo zesikrini. Olu luhlu lwempendulo lubalulekile xa usebenza ngezithuba ezichanekileyo okanye iifonti ezenziwe ngokwezifiso.
Nangona iGemPages ikunika ukuguquguquka okuninzi, kububulumko ukugcina iCSS yakho kunye neJavaScript ihlelekile kwaye ingenamsebenzi, kuba izikripthi ezininzi ezinzima okanye imithetho enzima kakhulu inokucothisa ivenkile yakho kwaye yonakalise amava omsebenzisi kunye ne-SEO. Eli qonga likwanemida efana nesivalo sobukhulu beLiquid esidibeneyo kwiibhloko zolwandiso (umzekelo i-100 KB), ngoko ke ukuhlala usebenza kakuhle yinxalenye yendlela elungileyo yokusebenza.
Uhlengahlengiso oluqhelekileyo lweCSS lwezinto zeGemPages
Enye yezona ndlela ziqhelekileyo zokwenziwa ngokwezifiso kwiGemPages kukutshintsha umbala wombhalo ngaphaya koko kuvumela abakhethi bombala abasisiseko, rhoqo ukuze kuhambelane ngokuchanekileyo neekhowudi ze-hex zophawu okanye kugxininiswe izihloko ezithile okanye imiyalezo. Ngokujolisa iklasi yento ethile kwithebhu ye-CSS kunye nokuseta entsha color, ungalungisa kakuhle igama ngalinye elikwiphepha.
Ukulungisa ubungakanani befonti kunye nobunzima lolunye utshintsho oluqhelekileyo lokugcina ulungelelwaniso lwefonti kunye nokuphucula ukufundeka kwiindawo ezinde zekopi. Ungaphawula izihloko njengezinobukhulu nezinkulu, wenze umbhalo womzimba ube mkhulu kancinci ukuze ufikeleleke okanye unciphise ulwazi olungephi usebenzisa font-size kwaye font-weight mithetho.
Imvelaphi eyenzelwe wena ithandwa kakhulu ekudaleni umahluko phakathi kwamacandelo, ukugqamisa ukukhushulwa okanye ukutsala ingqalelo kwiikhwelo zokuthatha inyathelo. Nge-CSS ungabeka imibala eqinileyo, iigradients okanye imifanekiso yangasemva kwizikhongozeli ezigubungela umxholo obalulekileyo njengeebhloko zamaxabiso, uluhlu lwezinto okanye ubungqina.
Ukulungisa kakuhle izinto kunye nomgca ojikeleze izinto kukunceda ucoce iileyitimenti ezixineneyo kwaye wenze indawo yokuphefumla eyenza iphepha livakale licocekile ngakumbi. Ukubeka isithuba esifanelekileyo kuphucula uluhlu lwezinto ezibonakalayo, kuba abasebenzisi banokubona ngoko nangoko ukuba zeziphi izinto ezihambelanayo kwaye zeziphi ezahluliweyo.
Ukongeza imida kunye neekona ezijikelezileyo yindlela elula kodwa esebenzayo yokuguqula iibhokisi ezingenanto zibe zizinto ezifana nekhadi okanye iindawo zogxininiso lwesimbo sebheji. Oku kuluncedo ngakumbi kwiibhloko zezinto, ubungqina okanye iibhokisi ezibonisa ukukhanya apho umgca omncinci okanye irediyasi yekona iphakamisa uyilo ngoko nangoko.
Ukuhombisa amaqhosha kunye neziphumo ze-hover nge-CSS
Amaqhosha ayinxalenye ebalulekileyo yokuguqulwa kwewebhusayithi kuyo nayiphi na iphepha lokufikela okanye ivenkile, ngoko ke kuqhelekile ukuba atshintshe iindlela zawo ezizenzekelayo ukuze ahambelane ngcono nolwimi olubonakalayo lophawu. Usebenzisa i-CSS ungalungisa imibala yangasemva, iigradients, ubhalo, umda we-radius kunye nezithunzi ukuze wenze ii-CTA ezisisiseko nezesibini ezahlukileyo.
Ngaphaya kokubonakala okungaguqukiyo, iziphumo ze-hover ezibhalwe kwi-CSS zikuvumela ukuba wenze unxibelelwano oluhle oluncinci ngaphandle kweJavaScript enzima. Umzekelo, ungatshintsha umbala ongasemva, wongeze utshintsho oluncinci lwesikali, ulungise ubukhulu bomda okanye ulungise umbala wombhalo xa umsebenzisi ejikeleza phezu kweqhosha.
Xa usebenzisa ii-hover states ezenziwe ngokwezifiso, kubalulekile ukugcina umahluko owaneleyo kunye nokuphepha ii-animations ezirhabaxa kakhulu ezinokuphazamisa abasebenzisi kwisenzo esiphambili ofuna ukuba basithathe. Ukuqaqambisa kancinci xa ujikeleza kudla ngokuba luncedo ngakumbi kunokutshintsha okukhawulezayo.
Ngenxa yokuba amaqhosha avela kwiindawo ezininzi kwisiza, kunokuba luncedo ukuchaza iiklasi zamaqhosha abiweyo kwindawo enye uze uwasebenzise kwakhona endaweni yokwenza isitayile ngasinye ngokwahlukeneyo. Oku kugcina i-CSS yakho ilula kwaye kuqinisekisa ukuba zonke ii-CTA zivakala zihambelana kuzo zonke ii-funnels zakho.
Iimeko zokusetyenziswa kweCSS ngokwezifiso zeWordPress kunye nemizekelo
Kwiindawo zeWordPress zemfundo okanye zeziko, i-CSS eyenziwe ngokwezifiso idla ngokusetyenziswa ukufihla izihloko zeentloko ezizenzekelayo kunye nemigca yeethegi xa umxholo uzibeka kwindawo engaqhelekanga, ingakumbi kwizikrini ezincinci apho zinokungqubana neelogo. Ngokujolisa abakhethi abanjengo .site-title kwaye .site-description kunye nokumisela display: none, ucoca i-header ngaphandle kokuhlela iitemplate.
I-footers yenye into eqhelekileyo ekujoliswe kuyo: ungafuna ukuba yonke indawo esezantsi yabelane ngombala othile ongasemva kunye nombhalo omhlophe kunye namakhonkco ahambelana nophawu lwakho. Umthetho osebenzayo background-color kwaye color ukuba .site-footer kwaye .site-footer a kwanele ukufezekisa umqolo oqinileyo nodibeneyo.
Ukutshintsha imibala yezihloko kuyo yonke indawo kulula njengokuthatha izitayela njengokukhetha isiseko h1, kodwa unokuba neenkcukacha ezingaphezulu ngokujolisa kwizithuba ezithile okanye amaphepha aneeklasi ezisekelwe kwi-ID ezifana .postid-1 h1. Oku kukuvumela ukuba uqaqambise amaphepha athile anemibala ekhethekileyo yezihloko ngelixa ushiya izinto ezizenzekelayo zehlabathi zingasebenzi.
Ukuze utsale ingqalelo kwizithuba ezinamathelayo (amanqaku avelele) ungazinika umda okanye imvelaphi eyahlukileyo usebenzisa eyakhelwe ngaphakathi .sticky iklasi ezinye zezihloko ezibonelelayo. Umda oqinileyo ojikeleze izinto ezinamathelayo wenza kube lula ukubona ukuba zibaluleke ngaphezu kokubhalwa rhoqo.
Iindawo zeewijethi, ingakumbi kwi-footer okanye kwi-sidebar, zinokulungiswa ngokupheleleyo nge-CSS ukuya kwiintloko eziphakathi, zongeze imigca engaphantsi, zitshintshe ubunzima befonti, okanye zibeke phakathi ibhloko yomxholo wewijethi yonke. Abakhethi bathanda .footer-widgets .widget-title or .footer-widget-area ikuvumela ukuba uhlele kwakhona indlela ezi bhloko zincinci ezibukeka kwaye zivakala ngayo.
Iipateni zeCSS ezingaphezulu zeewijethi, iikhonkco kunye neebhokisi ezibonisa izinto ezibalulekileyo
Ukuba usebenzisa iiwijethi ezikhupha izithuba okanye imifanekiso ekwiphepha elithile, ungayithumela i-CSS yakho kwi-ID yelo phepha ukuze ulungise ulungelelwaniso okanye ulwakhiwo kuphela apho kufuneka khona. Umzekelo, ukudibanisa .page-id-62 Ngee-ID ezahlukeneyo zeewijethi kukuvumela ukuba ubeke iiwijethi ezininzi ezibalaseleyo kwiphepha elinye.
Uyilo lweekhonkco yenye indawo apho i-CSS eyenzelwe wena inefuthe elikhulu ekufundekeni nasekubukekeni kwayo: ungafuna ukuba iikhonkco zivele ngaphandle kwemigca engaphantsi ngokuzenzekelayo kodwa zibonise umgca ongaphantsi kwi-hover kuphela. Isiseko sokujolisa a kwaye a:hover selectors ikunika ulawulo olupheleleyo kule ndlela yokuziphatha.
Xa umbhalo ongqindilili ongagqibekanga ungomelelanga ngokwaneleyo, ungawunyusa font-weight kuba strong izinto ezithile zize zitshintshe umbala wazo, umzekelo zibe nombala oluhlaza okwesibhakabhaka otyebileyo ebusuku. Oku kunokuphucula kakhulu ukuskenwa komxholo omde wokufundisa.
"Iibhokisi zesilumkiso" okanye izikhongozeli ze-callout ezenziwe ngokwezifiso kulula ukuzenza usebenzisa iklasi ezinikeleyo kwi <div> i-element, uze uyihombise ngomda, i-padding, umbala wangasemva kunye nomda. Imvelaphi ebomvu enomda obomvu omnyama kancinci, umzekelo, ifanelekile kwizilumkiso ezibalulekileyo okanye izaziso.
Iiwijethi zomntu ngamnye ezinee-ID zazo (ezifana #text-18) zinokuguqulwa zibe ziibhloko ezibonakala ngokucacileyo ngokubanika imvelaphi enemibala, umbhalo omhlophe, i-padding eyongezelelweyo okanye izihloko ezikhulu ngokusebenzisa izikhethi ezifakwe kwiindlwana ezifana #text-18 .widget-title. Le ndlela iluncedo xa ufuna iwijethi enye ibonakale kwezinye.
Ukujolisa okuphambili kwe-CSS kuluhlu, ii-sidebars kunye nee-plugins
Ngamanye amaxesha ufuna ukuba i-sidebar okanye ikholamu ethile ibonakale yahlukile kuphela kwizithuba ezithile; usebenzisa izikhethi ezidibeneyo ezifana .postid-404 #genesis-sidebar-primary ikuvumela ukuba utshintshe imibala yangasemva, imida kunye nephedi kuloo cala lisecaleni kodwa kuphela xa ujonga inqaku elikhethiweyo. Oku kuluncedo kwizibhengezo ezikhethekileyo okanye kwiindlela ezizodwa zoyilo.
Iiplagin ezivelisa uluhlu lwezithuba okanye iindidi zihlala zineempawu zazo ezingahambelaniyo nomxholo wakho, kodwa i-CSS eyenzelwe wena ingazibeka emgceni. Umzekelo, ungajolisa kuluhlu olu-odolweyo oluvela kwi-plugin ye-shortcode kunye nabakhethi abafana .widget ol.display-posts-listing > li kwaye ulungise imida kunye ne-padding.
Ngokufanayo, uluhlu lwezigaba ezivela kwiiplagi zetaxonomy lunokutshintshwa ngokulungisa isitayile .widget li.cat-item ukongeza okanye ukuguqula isithuba, ukuze zihlangane kakuhle neesitayile zewijethi zemveli. Olu hlobo lokujonga oluhambelanayo luxhasa ukusetyenziswa lula kuba abasebenzisi babona iipateni eziqhelekileyo kuyo yonke indawo.
Xa uhlela i-CSS usebenzisa i-WordPress Customizer okanye izixhobo ezifanayo, kububulumko ukwazisa iindlela ezintsha kancinci kancinci, uvavanya imithetho embalwa ngexesha endaweni yokuncamathisela iibhloko ezinkulu ngaxeshanye. Ukusebenza ngamanyathelo amancinci, aguqukayo kwenza ukulungisa iingxaki kube lula kakhulu ukuba kukho into engakhange ibonakale ilungile.
Khumbula ukuba yonke imigca yeCSS kufuneka isebenzele injongo ecacileyo yokusebenza, ingabi kukuhombisa nje kuphela ngenxa yokuhombisa. Ukubeka isitayile esigqithisileyo kwindawo ethile kunokubangela ingxolo ebonakalayo kwaye kwenze ukulungiswa kube nzima ngakumbi, ingakumbi xa izinto ezahlukeneyo ezitshintshayo ziqala ukungqubana.
Iindlela ezilungileyo kunye nezixhobo zokufunda zeCSS eyenzelwe wena
Ukubhala phantsi utshintsho lwakho lweCSS ngezimvo ngumkhwa oza kukusindisa ixesha elininzi wena neqela lakho, ingakumbi kwiwebhusayithi ezihlala ixesha elide. Kwi-CSS, ungabhala izimvo ezifana /* This is a comment */ ngentla kweqela lemithetho ukuze uzikhumbuze ukuba kutheni kongezwe isitayile okanye ukuba leliphi iphepha elichaphazelayo.
Ngenxa yokuba i-CSS ilulwimi olutyebileyo, ukuqhubela phambili ukusuka kwiinguqu ezisisiseko ukuya kwiindlela eziphambili kufuna umdla, uvavanyo kunye nokuziqhelanisa rhoqo. Kukho izifundo ezingenakubalwa, iindawo zokugcina iziqwenga kunye neegalari zemizekelo kwi-intanethi ezibonisa yonke into ukusuka kumaqhosha alula ukuya kwiikiti ze-UI ezipheleleyo ezakhiwe ngokupheleleyo nge-CSS.
Iiwebhusayithi ezikhethekileyo ezigxile kwiziqwenga zojongano, uvavanyo lwekhowudi kunye neepateni ze-UI zikunika izitena zokwakha ezilungiselelwe wena onokuziqhelanisa neeprojekthi zakho. Uninzi lwazo luquka iimboniso-mbono ezibukhoma, ukuze ukwazi ukubona iziphumo ze-hover, amaqhinga oyilo kunye nee-animations ezisebenzayo ngaphambi kokungenisa izimvo ezifanayo kwi-CSS yakho.
Iiwebhusayithi zokubhekisa kunye namaxwebhu asemthethweni abaluleke kakhulu xa ufuna ukuqonda nzulu yonke impahla kunye nexabiso, ingakumbi iimpawu ezintsha okanye iinkqubo zoyilo ezifana neFlexbox kunye neGrid. Ukuqonda kakuhle iziseko kwenza kube lula ukufunda nokuguqula ikhowudi ebhalwe ngabanye abantu.
Imiboniso yoyilo etshintsha kuphela amaphepha esitayile ngelixa igcina ulwakhiwo olufanayo lwe-HTML ibonisa indlela i-CSS enamandla ngayo ekuguquleni ngokupheleleyo iphepha ngaphandle kokuchukumisa umxholo. Ukukhangela loo mizekelo yindlela entle yokuvuselela izimvo nokuphakamisa imigangatho yakho yokwenza izinto.
Ukuzisa i-CSS yangokwezifiso kwimisebenzi yakho yeWordPress, iGemPages, iVirtual Lobbies kunye namanye amaqonga kukunika ulawulo oluchanekileyo kuzo zonke iinkcukacha ezibonakalayo, ukusuka kwiifonti kunye namaqhosha ukuya kwimibala yokuncokola kunye nemifanekiso yangasemva, ngelixa iindawo zekhowudi yangokwezifiso ezinikezelweyo zigcina olu tshintsho lukhuselekile, lulandeleka kwaye kulula ukulucombulula ngokuhamba kwexesha. Ngokuziqhelanisa kancinci usebenzisa izixhobo zokuhlola isikhangeli, ukucwangcisa iziqwenga zakho kunye nokuxhomekeka kwizixhobo zokufunda ezisemgangathweni, unokuyila amava acwebezelayo, ahambelanayo nophawu ngaphandle kokuhlela umxholo oyintloko okanye iifayile zenkqubo.
