Hemm numru ta 'modi li tista' tapplika stili CSS għal paġna web, inklużi kemm stili ta 'stil esterni kif ukoll stili inline . Jekk qed tuża folja stil esterna, li huwa l-mod rakkomandat biex tiddetta d-dehra ta 'dokument HTML, approċċ wieħed hu li tuża @import.
Ir-regola @import tgħinlek il-folji ta 'stil esterni importanti fid-dokument tiegħek - jew f'pagna HTML jew anke f'dokumenti CSS oħra. Li jinqalgħu ħafna stili f'numru ta 'fajls iżgħar u ffukati (waħda għat-tqassim, waħda għal tipografija , waħda għal stampi, eċċ) xi drabi tista' tagħmilha aktar faċli biex timmaniġġja dawk il-fajls u l-istil differenti li fihom. Jekk trid tgawdi dak il-benefiċċju, imbagħad l-importazzjoni ta 'dawk il-fajls varji hija dak li ser ikollok bżonn tagħmel biex tiksebhom kollha jaħdmu għall-wiri tal-paġna tal-web tiegħek.
Importazzjoni fl-HTML
Biex tuża r-regola ta '@import fl-HTML tiegħek, żid dan li ġej fir-
tad-dokument::
@import url ("/ stili / default.css");
Dan il-kodiċi issa jimporta din il-folja tal-istil għall-użu fuq din il-paġna HTML u tista 'timmaniġġja l-istili kollha tiegħek f'dak il-fajl wieħed. L-iżvantaġġ għal stylesheets importanti b'dan il-mod huwa li dan il-metodu ma jippermettix downloads paralleli. Il-paġna trid tniżżel stili ta 'l-istil kollu qabel ma timxi fuq il-bqija tal-paġna, inkluż kwalunkwe fajl CSS ieħor li qed timporta billi tuża dan il-metodu. Dan ikollu effett negattiv fuq il-veloċità u l-prestazzjoni tat-tniżżil tal-paġna tiegħek. Meta wieħed iqis kemm hu importanti l-prestazzjoni tal-paġna għas-suċċess tal-websajt tal-lum, dan l-iżvantaġġ waħdu jista 'jkun raġuni għaliex inti tixtieq li tevita li tuża @import.
Metodu Alternattiv
Bħala alternattiva għall-użu ta '@import fl-HTML tiegħek, tista' tagħmel link għal dak il-fajl CSS bħal dan:
Dan jaħdem b'mod simili ħafna għall-@import peress li jippermettilek tmexxi s-CSS kollha tiegħek minn post / file ċentrali wieħed, iżda dan il-metodu huwa preferibbli minn perspettiva ta 'tniżżil. Jekk xorta trid tibdel tipi differenti ta 'stili f'fajls separati, tista' tkompli tagħmel hekk u tuża l-funzjonalità ta '@import ġewwa l-fajl CSS prinċipali tiegħek. Dan ifisser li l-fajls CSS esterni tiegħek għadhom jistgħu jiġu mmaniġġjati individwalment, iżda peress li kollha jimportaw f'kaptan CSS wieħed, il-prestazzjoni titjieb.
Importazzjoni fis-CSS
Uża l-eżempju tal-kodiċi hawn fuq iġġib il-fajl "default.css" biex tuża fuq il-paġna HTML tiegħek. Fi ħdan dak il-fajl CSS, inti jkollok diversi stili ta 'paġna tiegħek. Tista 'jkollok dawk l-istili kollha dettaljati fuq dik il-paġna waħda, jew tista' tuża @import biex teħodhom għal ġestjoni aktar faċli. Għal darb'oħra, ejja ngħidu li qegħdin nieħdu 4 fajls CSS separati - wieħed għat-tqassim, wieħed għal tipografija, u wieħed għal stampi. Ir-raba 'fajl huwa l-fajl "kaptan" tagħna li huwa dak il-paġna tagħna links għal (għal dan l-eżempju, dan huwa "default.css"). Fil-quċċata ta 'dak il-fajl CSS ewlieni nistgħu nżidu r-regoli murija hawn taħt:
@import url ('/ stili / layout.css');
@import url ('/ stili / tip.css');
@import url ('/ styles / images.css');
Innota li dawn ir-regoli għandhom ikunu qabel il-kontenut l-ieħor kollu fil-fajl tas-CSS biex dawn jaħdmu. Inti ma tistax ikollok xi stil CSS ieħor qabel dawn ir-regoli ta 'importazzjoni!
Taħt dawk ir-regoli ta 'importazzjoni, tista' żżid kwalunkwe stil CSS ieħor li tixtieq li jkollok fil-folja default tiegħek. Meta jitgħabba dak il-fajl CSS prinċipali, l-ewwel jimporta dawn il-fajls separati u jżid l-istili tiegħu mal-parti ta 'fuq tal-stylesheet. Imbagħad ikollha l-istili l-oħra kollha tiegħek taħt dawk importati, u toħloq il-fajl CSS sħiħ li l-web browser se juża biex juri s-sit tiegħek. Tikseb il-benefiċċju tal-ġestjoni ta 'fajls iżgħar u aktar iffokati filwaqt li jkollok stil ta' stili wieħed marbut ma 'dak l-HTML.
Uża l-importazzjoni għal mistoqsijiet tal-midja
Ħaġa waħda li tista 'tikkunsidra li tagħmlu tissepara l -mistoqsijiet tal-midja tal-websajt tiegħek għal stili ta' websajt responsiva f'fajl separat. Minħabba li dawn l-istili ta 'rispons jistgħu jkunu konfużi meta jidhru flimkien mar-regoli l-oħra ta' l-istil tas-sit tiegħek, li jkollhom waħedhom f'fajl differenti jistgħu jkunu attraenti. Tħassib wieħed ma 'dan l-approċċ hu li, peress li r-regoli ta' l-importazzjoni tiegħek għandhom ikunu l-ewwel, dan ifisser li l-mistoqsijiet tiegħek dwar il-midja jitgħabbew qabel il-bqija ta 'l-istili tas-sit tiegħek. Meta toħloq sit li jirreaġixxi l-ewwel mobbli li jqis il-prestazzjoni, dan x'aktarx ikun problema.Għal din ir-raġuni, huwa ssuġġerit li m'għandekx sezzjoni l-istili ta 'tweġiba tas-sit tiegħek separatament u uża @import biex iġġibhom fis-sit tiegħek. Iva, jista 'jidher li hemm benefiċċji li jagħmlu dan, iżda l-iżvantaġġi huma akbar minn dawk il-benefiċċji.
Għandi bżonn tuża?
Le, ma tagħmilx. Ħafna siti sempliċement juru l-istili prinċipali tagħhom f'fajl wieħed u, daqs dak il-fajl jista 'jkun, huwa ġestit b'dan il-mod (dan huwa kif nagħmilha fix-xogħol tiegħi stess). Jekk issib xi ħaġa importanti, allura tista 'tkun parti mill-fluss tax-xogħol tiegħek. Inkella, tista 'tibni b'xejn paġni tal-web li il-folja ta' l-istil tiegħek waħdieni tar-regoli CSS tiegħek kollha.
Appoġġ għall-Browser
Bosta browsers antiki ħafna għandhom problemi b'xi wħud minn dawn ir-regoli ta 'l-importazzjoni, iżda dawn il-brawżers x'aktarx ma jkunux problema għalik f'dawn il-jiem. Dan hu veru speċjalment issa li għadda l-iskadenza tat-tmiem tal-ħajja għal verżjonijiet antiki ta 'Internet Explorer. Fl-aħħarnett, jekk tiddeċiedi li tuża r-regoli ta 'l-importazzjoni @ fl-HTML jew CSS tiegħek, m'għandekx issolvi kwistjonijiet b'verżjonijiet antiki ta' web browsers sakemm ikollok xi ħtieġa stramba biex tappoġġja verżjonijiet oerhört qodma ta 'IE.
Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard.