Съществуват редица начини, по които можете да прилагате стилове на 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 код.
Използване на & # 64; внос за медийни заявки
Едно нещо, което може да обмислите, е да направите това разделяне на заявките за медийни съобщения в уебсайта Ви за отзивчиви стилове на уебсайтове в отделен файл. Тъй като тези чувствителни стилове могат да бъдат объркващи, когато се виждат заедно с другите правила за стил на сайта ви, може да са привлекателни и да ги държите сами в друг файл. Една тревога от този подход е, че тъй като вашите @import правила трябва да бъдат първи, това означава, че вашите медийни запитвания ще бъдат заредени преди останалите стилове на вашия сайт. Когато създавате сайт, отговарящ на условията за мобилни устройства, който взема под внимание ефективността, това вероятно ще е проблем. По тази причина се препоръчва да не разделяте поотделно стиловете на сайта си поотделно и да използвате @import, за да ги въведете в сайта си. Да, може да изглежда, че има ползи от това, но недостатъците превъзхождат тези ползи.
Трябва ли да използвам & # 64; внос?
Не, не. Много сайтове просто показват всичките си основни стилове в един файл и колкото по-голям е този файл, то се управлява по този начин (така правя аз в собствената си работа). Ако намирате @import полезно, то може да е част от работния ви поток. В противен случай, можете безопасно да създадете уеб страници, които ви един стилов лист на всичките си CSS правила.
Поддръжка на браузъра
Много, много стари браузъри имат проблеми с някои от тези правила @import, но тези браузъри едва ли ще бъдат проблем за вас в наши дни. Това е особено вярно, когато краят на срока на експлоатация за по-старите версии на Internet Explorer е изтекъл. В крайна сметка, ако решите да използвате правилата @import във вашия HTML или CSS, не трябва да се появявате проблеми със стари версии на уеб браузъри, освен ако имате странна нужда да поддържате невероятно стари версии на IE.
Оригинална статия на Дженифър Кринин. Редактиран от Джеръми Жирар.