Kunezindlela eziningi ongazisebenzisa izitayela ze-CSS ekhasini lewebhu, kufaka kokubili amashidi wangaphandle noma ngisho nezitayela ezifakiwe . Uma usebenzisa ishidi lesitayela sangaphandle, iyiphi indlela ekhuthazwayo yokuqamba ukubukeka nokuzizwa kwedokhumenti ye-HTML, indlela eyodwa yokusebenzisa @import.
Umthetho we-@import uvumela ukuthi ubheke amashidi abalulekile angaphandle kwidokhumenti yakho - kungene ekhasini le-HTML noma ngisho nakwamanye amadokhumenti e-CSS. Ukuqeda izitayela eziningi zibe yizinombolo ezincane, ezigxilwe (enye yokuhlelwa, enye ye- typography , enye yezithombe, njll.) Ngezinye izikhathi kungenza kube lula ukuphatha lawo mafayela nesitayela esihlukahlukene abaqukethe. Uma ufuna ukujabulela leyo nzuzo, ukungenisa lezo fayili ezihlukahlukene yilokho okuzodingeka ukwenze ukuze uthole bonke abasebenza ekubonisweni kwekhasi lakho lewebhu.
Ukungenisa ku-HTML
Ukuze usebenzise umthetho we-@import ku-HTML yakho, ungangezela lokhu okulandelayo ku-
yedokhumenti::
@import url ("/ izitayela / default.css");
Le khodi manje ingangenisa leli shidi lesitayela ukuze lisetshenziswe kuleli khasi le-HTML futhi ungaphatha zonke izitayela zakho kufayela elilodwa. Ukuphazamiseka kwamathempulethi abalulekile ngale ndlela ukuthi le ndlela ayivumeli ukulandwa okufanayo. Ikhasi kumele lilande yonke i-style sheets ngaphambi kokuba idlulisele kulo lonke ikhasi, kuhlanganise nanoma yimaphi amanye amafayela we-CSS oyifaka usebenzisa le ndlela.Lokhu kuzoba nomthelela omubi ekuvinjeni kwekhasi lakho nokulanda ukusebenza. Uma ucabanga ukuthi kubaluleke kangakanani ukusebenza kwekhasi ekuphumeleleni kwewebhusayithi yanamuhla, lokhu kuwukuphela kokungaba isizathu sokuthi ungafuna ukugwema ukusebenzisa @import.
Indlela Ehlukile
Njengenye indlela yokusebenzisa @import ku-HTML yakho, ungaxhuma kulelo fayela le-CSS njengale:
Le misebenzi ifana kakhulu ne @import ngoba ikuvumela ukuthi uphathe yonke i-CSS yakho kusuka endaweni eyodwa / ifayela, kodwa le ndlela ingcono kusuka kumbono wokulanda. Uma wenza namanje ufuna ukuhlukanisa izinhlobo ezahlukene zezitayela zibe amafayela ahlukene, ungaqhubeka ukwenza kanjalo futhi usebenzise @import ukusebenza ngaphakathi ifayela lakho Master CSS. Lokhu kusho ukuthi amafayela akho e-CSS angaphandle angakwazi ukulawulwa ngokwawo, kodwa njengoba bonke bangena ku-Master CSS eyodwa, ukusebenza kuthuthukiswa.
Ukungenisa ku-CSS
Ukusebenzisa isibonelo ikhodi ngenhla kungaletha ifayela elithi "default.css" elizolisebenzisa ekhasini lakho le-HTML. Ngaphakathi kwefayela le-CSS, uzoba nezitayela zakho ezahlukene zekhasi. Ungaba nazo zonke lezo zitayela ngokuningiliziwe ekhasini elilodwa, noma ungasebenzisa @import ukuze uzihlukanise ukuze kube lula ukuphathwa. Phinda futhi sithi, sisebenzisa amafayela amane ahlukene e-CSS - enye yesakhiwo, enye ye-typography, kanye neyodwa yezithombe. Ifayela lesine yifayela lethu "master" eliyilokho ikhasi lethu elixhumanisa nalo (kulolu sibonelo, lokhu "okuzenzakalelayo.css"). Esikhathini esiphezulu kakhulu saleli fayela le-CSS yenkosi singakwazi ukwengeza imithetho eboniswe ngezansi:
@import url ('/ izitayela / layout.css');
@import url ('/ izitayela / uhlobo.css');
@import url ('/ izitayela / images.css');
Qaphela ukuthi le mithetho kufanele ibe ngaphambi kwayo yonke enye into efayela lakho le-CSS ukuze lisebenze. Awukwazi ukuba nesinye isitayela se-CSS ngaphambi kwale mithetho yokungenisa!
Ngaphansi kwalezo zindinganiso zokungenisa, ungangeza noma yiziphi ezinye izitayela ze-CSS ofuna ukuzifaka eshidi lakho elizenzakalelayo. Uma lelo fayela eliyinhloko le-CSS lilayishiwe, lizoqala ukungenisa lawa mafayela ahlukile bese engeza izitayela zabo phezulu kakhulu kwethebhu yezitayela. Khona-ke kuzoba nazo zonke ezinye izitayela zakho ngaphansi kwalezi zingeniso, ukudala ifayela eliphelele le-CSS elizosetshenziswa isiphequluli sewebhu ukubonisa isayithi lakho. Uthola inzuzo yokuphatha amafayela amancane, agxile nakakhulu ngenkathi enesheya elilodwa lezitayela ezixhunywe kuleyo HTML.
Ukusebenzisa & # 64; ukungenisa kwe-Media Queries
Into eyodwa ongayicabangela ukwenza lokhu ukuhlukanisa imibuzo yakho yezindaba yemidiya yezintandokazi zewebhusayithi eziphendule zibe ifayela elihlukile. Ngenxa yokuthi lezi zitayela zokuphendula zingadideka uma zibonwa eceleni kwesinye isitayela sesitayela sakho, ukuzodwa kufayela elihlukile kungase kukhange. Ukukhathazeka okunye ngale ndlela ukuthi, njengoba imithetho yakho ye-@import kumele ibe ngowokuqala, lokhu kusho ukuthi imibuzo yakho yemidiya izolayishwa ngaphambi kwezitayela zakho zonke zezayithi. Uma udala indawo yeselula ephendulayo ethatha ukusebenza, kubonakala ukuthi kuyinkinga.Ngalesi sizathu, kunconywa ukuthi ungabeki izitayela ezithandayo zesayithi ngokuzenzekelayo futhi usebenzise @import ukuba uzilethe kusayithi lakho. Yebo, kungase kubonakale kunenzuzo yokwenza kanjalo, kodwa izinselelo zingaphezu kwalezi zinzuzo.
Ingabe Ngidinga Ukusebenzisa & # 64; ukungenisa?
Cha, awukho. Izingosi eziningi zibonisa zonke izitayela zabo eziyinhloko ngaphakathi kwefayela elilodwa futhi, njengoba likhulu lelo fayela, lilawulwa ngaleyo ndlela (yilokho engikukwenza ngomsebenzi wami). Uma uthola @import ewusizo, khona-ke kungaba yingxenye yokuhamba komsebenzi wakho. Uma kungenjalo, ungakha ngokuphepha ngokuphepha kwamakhasi wewebhu okuyi ishidi lakho elilodwa lokushicilela kuzo zonke imithetho yakho ye-CSS.
Ukusekelwa kwesiphequluli
Iziphequluli ezindala kakhulu zinenkinga ngezinye zalezi @import imithetho, kodwa lezi ziphequluli cishe akunenkinga kuwe kulezi zinsuku. Lokhu kuyiqiniso ikakhulukazi manje ukuthi ukuphela kokuphela kwesikhathi sokuphila kwezinguqulo ezindala ze-Internet Explorer kudlulile. Ekugcineni, uma unquma ukusebenzisa @import imithetho HTML yakho noma CSS, akufanele ugijimele nezindaba nge legacy izinguqulo iziphequluli web ngaphandle kokuba une isidingo esinqaba ukusekela izinguqulo ezindala ze-IE.
Isihloko sokuqala sikaJennifer Krynin. Ihlelwe nguJeremy Girard.