Постоји неколико начина на које можете примијенити стилове ЦСС-а на веб страницу, укључујући и спољашње листе стилова или чак стилове у облику уноса . Ако користите спољашњи стилски стил, који је препоручен начин диктирања изгледа и осећаја ХТМЛ документа, један приступ је да користите @импорт.
Правило @импорт дозвољава вам важне вањске листе стилова у вашем документу - било у ХТМЛ страницу или чак иу друге ЦСС документе. Разбијање много стилова у неколико мањих, фокусираних фајлова (један за изглед, један за типографију , један за слике итд.) Понекад олакшава управљање тим датотекама и различитим стиловима који садрже. Ако желите да уживате у тој погодности, онда је увоз ових различитих датотека оно што ћете морати да урадите како бисте их све радили за приказ своје веб странице.
Увезивање у ХТМЛ
Да бисте користили правило @импорт у ХТМЛ-у, додали бисте сљедеће у <хеад> документа:
:
<стиле>
@импорт урл ("/ стилес / дефаулт.цсс");
Овај код би сада увозио овај стилски стил за кориштење на овој ХТМЛ страници и могли бисте управљати свим својим стиловима у тој једној датотеци. Недостатак важних стилова на овај начин је да овај метод не дозвољава паралелне преузимања. Ова страница мора да преузме читаву схему стилова пре него што се пресели на остатак странице, укључујући било које друге ЦСС датотеке које увезете користећи овај метод. Ово ће имати негативан ефекат на брзину и учинак преузимања. С обзиром на то колико су важне перформансе страница за данашњи успјех на интернету, ова грешка само може бити разлог зашто желите избјећи кориштење @импорта.
Алтернативни приступ
Као алтернативу коришћењу @импорт-а у вашем ХТМЛ-у, можете се повезати на ту ЦСС датотеку овако:
<линк хреф = "/ стилес / дефаулт.цсс" рел = "стилесхеет">
Ово функционише веома слично као и @импорт, јер вам омогућава да управљате свим ЦСС-ом из једне централне локације / датотеке, али овај метод је пожељнији из перспективе преузимања. Ако и даље желите да сегментирате различите врсте стилова у одвојене датотеке, можете то и учинити и користити функцију @импорт унутар своје главне ЦСС датотеке. То значи да се ваше спољне ЦСС датотеке и даље могу управљати појединачно, али пошто све оне увозе у један мастер ЦСС, перформансе су побољшане.
Увезивање у ЦСС
Коришћењем горњег примера кода <линк> би се омогућила употреба датотеке "дефаулт.цсс" на вашој ХТМЛ страници. Унутар тог ЦСС фајла, имали бисте различите стилове страница. Можете имати све те стилове детаљне на тој једној страници, или можете користити @импорт да их раздвојите ради лакшег управљања. Још једном, рецимо да користимо 4 одвојене ЦСС датотеке - једну за распоред, једну за типографију и једну за слике. Четврти фајл је наш "мастер" фајл са којом наша страница повезује (за овај примјер, то је "дефаулт.цсс"). На самом врху главне ЦСС датотеке можемо додати правила приказана доле:
@импорт урл ('/ стилес / лаиоут.цсс');
@импорт урл ('/ стилес / типе.цсс');
@импорт урл ('/ стилес / имагес.цсс');
Имајте на уму да ова правила морају бити пре свих осталих садржаја у ЦСС датотеки како би они могли да раде. Пре ових правила увоза не можете имати било који други ЦСС стил!
Испод ових правила увоза можете додати било који други ЦСС стил који желите да имате у подразумеваном листу. Када се та главна ЦСС датотека учита, прво ће увести ове одвојене датотеке и додати њихове стилове на сам врх стилесхеет-а. Он ће онда имати све своје друге стилове испод ових увезених, креираћи потпуну ЦСС датотеку коју ће веб претраживач користити за приказ своје веб странице. Добијате предност управљања мањим, више фокусираним датотекама док још увек имате појединачни стилски стил повезан у том ХТМЛ-у.
Коришћење & # 64; импорт за Медиа Куериес
Једна ствар коју можете размотрити јесте да одвојите медијске упите вашег веб сајта за одговарајуће стилове веб сајта у одвојену датотеку. Због тога што ови реагујући стили могу да буду збуњујући када се виде заједно са другим правилима стила вашег сајта, њихова сопствена у другом фајлу може бити привлачна. Једна забринутост због оваквог приступа је то што, пошто су ваша правила @импорта прва, ово значи да ће се ваши медијски упити учитати пре осталих стилова вашег сајта. Приликом креирања мобилног првог одзивног сајта који узима у обзир перформансе, то је вероватно проблем. Из тог разлога, препоручује се да не одвојите одзивне стилове вашег сајта одвојено и користите @импорт да их доведете на свој сајт. Да, изгледа да има користи од тога, али недостаци превазилазе те погодности.
Да ли треба да користим "увоз"?
Не ти не. Многи сајтови једноставно приказују све своје главне стилове унутар једне датотеке и, колико је то велика датотека, може се управљати на тај начин (овако како то радим у свом раду). Ако пронађете @импорт корисну, онда она може бити дио вашег тока посла. У супротном, можете безбедно да израдите веб странице које <линк> вашу појединачну листу стилова свих ЦСС правила.
Бровсер Суппорт
Веома старији претраживачи имају проблема са неким од ових правила @импорта, али ови претраживачи вероватно неће бити проблем за вас ових дана. Ово је посебно истинито сада када је прошао крај рока за старије верзије Интернет Екплорер-а. На крају, ако одлучите да користите правила @импорт у ХТМЛ-у или ЦСС-у, не би требало да се суочавате са проблемима са старијим верзијама веб прегледача, осим ако имате чудну потребу да подржите невероватно старе верзије ИЕ-а.
Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард.