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