Постојат неколку начини на кои можете да ги примените стиловите на CSS на веб-страница, вклучувајќи ги и надворешните стилски листови или дури и стиховите во стилот . Ако користите надворешен стилски лист, кој е препорачан начин за диктирање на изгледот и чувството на HTML документ, еден пристап е да користите @import.
Правилото @import ви овозможува да важни надворешни стилски листови во вашиот документ - или во HTML страница или дури и во други CSS документи. Прекинувањето многу стилови во бројни помали, фокусирани фајлови (еден за изглед, еден за типографија , еден за слики, итн.) Понекогаш може полесно да управуваат со тие датотеки и со различниот стил што го содржат. Ако сакате да уживате во таа корист, тогаш увозот на овие различни датотеки е она што ќе треба да направите за да ги направите сите работи за прикажување на вашата веб-страница.
Внесување во HTML
За да го користите правилото @import во вашиот HTML, ќе го додадете следново во
на документот::
<стил>
@import url ("/ styles / default.css");
Овој код сега ќе го увезе овој стилски лист за употреба на оваа HTML страница и може да управувате со сите ваши стилови во таа една датотека. Недостатоци на важни стилови на овој начин е дека овој метод не дозволува паралелни преземања. Страницата мора да ја преземе целата табела со стил пред да се пресели во остатокот на страницата, вклучувајќи ги и сите други CSS-датотеки што ги увезувате со користење на овој метод. Ова ќе има негативен ефект врз брзината на вашата страница и ефикасноста на преземањето. Со оглед на тоа колку е важна изведбата на страниците за успехот на веб-страницата денес, овој недостаток може да биде причина зошто сакате да избегнете користење на @import.
Алтернативен приод
Како алтернатива за користење на @import во вашиот HTML, може да се поврзете со таа CSS-датотека како оваа:
Ова функционира многу слично на @import со тоа што ви овозможува да управувате со сите ваши CSS од една централна локација / датотека, но овој метод е подобар од перспективата за преземање. Ако сеуште сакате да сегментирате различни видови стилови во одделни датотеки, можете да продолжите да го направите тоа и да ја користите функцијата @import во вашата говорна CSS-датотека. Ова значи дека вашите надворешни CSS-датотеки сеуште можат да се менаџираат поединечно, но бидејќи сите тие увезуваат во еден господар CSS, перформансите се подобрени.
Внесување во CSS
Користејќи го примерот погоре , ќе ја внесете датотеката "default.css" на вашата HTML страница. Во таа CSS-датотека, ќе имате различни стилови на страница. Можете да ги имате сите оние стилови детални на таа една страница, или можете да го користите @import за да ги разбиете за полесно управување. Уште еднаш, да речеме дека користиме 4 одделни CSS-датотеки - еден за изглед, еден за типографија и еден за слики. Четвртата датотека е нашата "господар" датотека со која нашата страница поврзува (за овој пример, ова е "default.css"). На самиот врв на таа господарна CSS-датотека можеме да ги додадеме правилата прикажани подолу:
@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');
Забележете дека овие правила мора да бидат пред сите други содржини во вашата CSS датотека за да работат. Пред овие правила за увоз не може да имате друг стил на CSS!
Под овие правила за увоз, можете да додадете какви било други CSS стилови што сакате да ги имате во вашиот стандарден лист. Кога таа главна CSS датотека е вчитана, прво ќе ги увезе овие одделни датотеки и ќе ги додаде нивните стилови до самиот врв на табелата со стилови. Потоа ќе ги имаат сите ваши други стилови под овие увезени, создавајќи ја целата CSS-датотека што веб-прелистувачот ќе ја користи за прикажување на вашиот сајт. Ќе добиете корист од управувањето со помали, повеќе фокусирани фајлови, додека сеуште имате само еден стилски лист поврзан со тој HTML.
Употреба на & увоз за медиумски пребарувања
Едно нешто што може да го разгледате го прави одвојувајќи ги медиумските пребарувања на вашиот веб- сајт за одзивните стилови на веб-страници во посебна датотека. Бидејќи овие одзив стилови можат да бидат збунувачки кога се гледаат заедно со други правила за стил на вашиот сајт, нивното работење во друга датотека може да биде привлечно. Една загриженост со овој пристап е тоа што, бидејќи твоите правила на @import мора да бидат први, тоа значи дека вашите медиумски пребарувања ќе бидат вчитани пред останатите стилови на вашиот сајт. Кога креираш прво одговорачко место за мобилни уреди, кое ќе ги земе предвид перформансите, ова е веројатно да биде проблем.За оваа причина, се препорачува одделно да не ги разделувате одговорите стилови на вашиот сајт и да го користите @import за да ги внесете на вашиот сајт. Да, може да се чини дека има корист од тоа, но недостатоците ги надминуваат тие придобивки.
Дали треба да користам "увоз"?
Не, не. Многу сајтови едноставно ги прикажуваат сите нивни главни стилови внатре во една датотека и, колку и големината на таа датотека, се управува на тој начин (ова е како го правам тоа во мојата работа). Ако најдете @import корисни, тогаш тоа може да биде дел од вашиот работен тек. Инаку, можете безбедно да изградите веб-страници кои ја вашата единствена табела на сите ваши CSS правила.
Поддршка на прелистувачот
Многу, многу стари прелистувачи имаат проблеми со некои од овие @import правила, но овие прелистувачи најверојатно нема да бидат проблем за вас овие денови. Ова е особено точно сега кога крајот на крајниот рок за живот за постари верзии на Internet Explorer помина. На крајот, ако одлучите да ги користите правилата @import во HTML или CSS, не треба да се ставате во проблеми со наследни верзии на веб прелистувачи, освен ако имате некоја чудна потреба за поддршка на неверојатно старите верзии на IE.
Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар.