Ёсць некалькі спосабаў , якія вы можаце ўжыць стылі CSS на вэб - старонку, уключаючы як знешнія табліцы стыляў або нават убудаваныя стылі . Калі вы выкарыстоўваеце знешнюю табліцу стыляў, якая з'яўляецца рэкамендаваным спосабам дыктаваць знешні выгляд HTML-дакумент, адзін падыход заключаецца ў выкарыстанні @import.
Правіла @import дазваляе важныя знешнія табліцах стыляў у дакуменце - альбо ў HTML-старонку або нават у іншыя CSS дакументаў. Пераадольваючы мноства стыляў у некалькі менш, арыентаваных файлы (адзін для макета, адзін для друкарні , адзін для малюнкаў і г.д.) можа часам зрабіць прасцей кіраваць гэтымі файламі і розным стылем , які яны ўтрымліваюць. Калі вы хочаце карыстацца гэтым выгады, а затым імпартаваць гэтыя розныя файлы, што вам трэба зрабіць, каб атрымаць іх усё працуе для адлюстравання вашага вэб-старонкі.
Імпарт у HTML
Для таго, каб выкарыстоўваць правіла @import ў вашым HTML, можна дадаць наступнае ў
дакумента::
<Стыль>
@import URL ( "/ стылі / default.css");
Гэты код цяпер будзе імпартаваць табліцы стыляў для выкарыстання на гэтай старонцы HTML, і вы можаце кіраваць усімі стылямі ў гэтым адным файле. Недахоп важных табліц стыляў такім чынам, што гэты метад не дазваляе паралельныя загрузкі. Старонка павінна загрузіць ўсю табліцу стыляў, перш чым ён рухаецца да астатняй частцы старонкі, у тым ліку любых іншых CSS файлаў, якія вы імпартуеце, выкарыстоўваючы гэты method.This будзе мець негатыўны ўплыў на хуткасць і хуткасць загрузкі вашай старонкі. Улічваючы, наколькі важная прадукцыйнасць старонкі для сённяшняга сайта поспеху, толькі гэты недахоп можа быць прычынай, чаму вы хочаце, каб пазбегнуць выкарыстання @import.
альтэрнатыўны падыход
У якасці альтэрнатывы выкарыстанні @import ў вашым HTML, вы можаце спасылацца на гэты CSS файл, як гэта:
<Спасылка HREF = "/ стылі / default.css" отн = "Табліца стыляў">
Гэта функцыя вельмі падобна на @import у тым, што яна дазваляе кіраваць усімі вашымі CSS ад аднаго цэнтральнага месцазнаходжаньня / файла, але гэты метад з'яўляецца пераважнай з пункту гледжання загрузкі. Калі вы ўсё яшчэ хочаце сегментаваць розныя стылі ў асобныя файлы, вы можаце працягваць рабіць гэта і выкарыстоўваць функцыянальныя магчымасці @import ўнутры галоўнага файла CSS. Гэта азначае, што вашыя знешнія CSS файлы па-ранейшаму можна кіраваць паасобку, але так як усе яны імпартуюць у адзін майстар CSS, палепшаная прадукцыйнасць.
Імпарт у CSS
Выкарыстанне <спасылка> прыкладу коды вышэй давядзе файл «default.css» для выкарыстання на вашай HTML старонцы. Унутры гэтага CSS файл, вы б вашыя розныя стылі старонкі. Вы можаце мець усе гэтыя стылі, апісаныя на гэтай адной старонцы, ці вы можаце выкарыстоўваць @import, каб разарваць іх на часткі для больш лёгкага кіравання. Зноў жа, давайце скажам, што мы выкарыстоўваем 4 асобных CSS файлаў - адзін для макета, адзін для кнігадрукавання, і адзін для малюнкаў. Чацвёрты файл наш файл «майстар», які з'яўляецца тое, што наша старонка спасылаецца на (у дадзеным прыкладзе гэта «default.css»). На самым версе гэтага майстар CSS файл можна дадаць правілы, адзначаныя ніжэй:
@import URL ( '/ стылі / layout.css');
@import URL ( '/ стылі / type.css');
@import URL ( '/ стылі / images.css');
Звярніце ўвагу , што гэтыя правілы павінны быць перад усімі іншымі зместам ў файле CSS , каб яны працавалі. Вы не можаце мець любы іншы стыль CSS да гэтых правілаў імпарту!
Пад гэтымі правіламі імпарту, вы можаце дадаць любыя іншыя стылі CSS вы хочаце, каб у вашым лісце па змаўчанні. Пры тым, што асноўны файл CSS загружаны, ён будзе першым імпартаваць гэтыя асобныя файлы і дадаваць свае стылі ў самым версе табліцы стыляў. Затым ён будзе мець усе іншыя стылі пад гэтым імпартнымі, ствараючы поўны файл CSS, што вэб-браўзэр, які будзе выкарыстоўвацца для адлюстравання вашага сайта. Вы атрымліваеце выгаду ад кіравання меншыя, больш канкрэтных файламі, усё яшчэ маючы адзін табліцу стыляў, звязаных з тым, што HTML.
Выкарыстанне & # 64; імпарт медыя запытаў
Адна рэч , вы можаце разгледзець магчымасць зрабіць гэты падзел вашага медиазапросы сайта для рэагуюць стыляў вэб - сайта ў асобны файл. Паколькі гэтыя спагадныя стылі могуць быць заблытанымі, калі бачыў разам з іншымі правіламі стылю вашага сайта, маючы іх самастойна ў іншым файле можа быць прывабнымі. Адна з праблем гэтага падыходу складаецца ў тым, што, так як вашы правілы @import павінны быць першымі, гэта азначае, што вашы медыя-запыты будуць загружаныя да астатніх стыляў вашага сайта. Пры стварэнні мабільных прылад першы спагадны сайт, які прымае пад увагу прадукцыйнасць, гэта, верагодна, будзе problem.For гэтай прычыне, мяркуецца, што вы гэтага не зробіце раздзел рэагуюць стылі вашага сайта асобна і выкарыстоўваць @import, каб прывесці іх у свой сайт. Так, можа здацца, што выгады ад гэтага, але недахопы пераважваюць гэтыя выгады.
Ці трэба мне выкарыстоўваць & # 64; імпарт?
Не, вы не ведаеце. Многія сайты проста паказаць усе свае асноўныя стылі ў адным файле і, як вялікі, як гэты файл можа быць, ён кіруецца такім чынам (гэта, як я раблю гэта ў сваёй працы). Калі вы знайшлі @import карысным, то ён можа быць часткай вашага працоўнага працэсу. У адваротным выпадку, вы можаце спакойна ствараць вэб-старонку, вашых адзіныя табліцы стыляў ўсе вашы правілаў CSS.
падтрымка браўзэраў
Вельмі, вельмі старыя браўзэры маюць праблемы з некаторымі з гэтых правілаў @import, але гэтыя браўзэры наўрад ці будзе праблемай для вас у гэтыя дні. Гэта асабліва актуальна цяпер, што да канца жыцця тэрміну для больш старых версій Internet Explorer прайшло. У рэшце рэшт, калі вы вырашыце выкарыстоўваць правілы @import ў вашым HTML або CSS, вы не павінны сутыкнуцца з праблемамі з састарэлымі версіямі вэб-браўзэраў, калі ў вас ёсць нейкая дзіўная неабходнасць падтрымкі неверагодна старыя версіі IE.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard.