Számos módon alkalmazhat CSS stílusokat egy weboldalra, ideértve a külső stíluslapokat vagy akár az inline stílusokat is. Ha külső stíluslapot használ, amely az ajánlott módja annak, hogy diktálja a HTML-dokumentum megjelenését és érzését, az egyik megközelítés az, hogy
@import.
A
@import szabály lehetővé teszi, hogy fontos külső stíluslapokat töltsön be a dokumentumba - akár HTML-oldalra, akár más CSS-dokumentumokba. Számos kisebb, koncentrált fájl (például az elrendezés, az egyik a tipográfia, az egyik a képekhez stb.) Számos stílus elolvasható, néha megkönnyíti a fájlok és a különböző stílusok kezelését. Ha élvezni szeretné ezt az előnyöket, akkor importálnia kell azokat a fájlokat, amelyekkel meg kell csinálnia, hogy mindegyikük működjön a weboldal megjelenítéséhez.
Importálás a HTML-be
A
@import szabályt a HTML-ben, akkor az alábbiakat hozzáadja a
a dokumentumban:
:
Ez a kód importálja ezt a stíluslapot a HTML oldalon történő felhasználásra, és az összes fájlját az adott fájlban kezelheti. A fontos stíluslapok hátránya, hogy ez a módszer nem teszi lehetővé a párhuzamos letöltéseket. Az oldalnak le kell töltenie egy teljes stíluslapot, mielőtt továbblépne az oldal többi részére, beleértve az egyéb módszerrel importált CSS-fájlokat is. Ez negatív hatást gyakorol az oldal sebességére és letöltési teljesítményére. Figyelembe véve, hogy mennyire fontos az oldal teljesítménye a webhely sikere szempontjából, ez a hátrány önmagában lehet az oka annak, hogy elkerülje a @import használatát.
Alternatív megközelítés
A használat alternatívájaként
@import a HTML-ben, ehhez a CSS-fájlhoz kapcsolódhat:
Ez nagyon hasonlít a
@import mivel lehetővé teszi, hogy az összes CSS-t egy központi helyről / fájlról kezelje, de ez a módszer a letöltési szempontból előnyösebb. Ha még mindig különféle típusú stílusokat szeretne szegmentálni külön fájlokká, folytathatja ezt, és használhatja a @import funkciót a master CSS fájlban. Ez azt jelenti, hogy a külső CSS-fájlokat még mindig kezelheti egyénileg, de mivel mindegyik importál egy master CSS-be, a teljesítmény javul.
Importálás a CSS-be
Használni a
A fenti kódpélda a "default.css" fájlt a HTML-oldalán használhatja. A CSS-fájl belsejében különböző oldalstílusokkal rendelkezik. Minden ilyen stílusban megadható az adott oldalon, vagy a @import használatával könnyedén kezelheti őket. Ismét azt mondjuk, hogy 4 különálló CSS-fájlt használunk - egy az elrendezéshez, egy a tipográfia, és egy a képekhez. A negyedik fájl a "mester" fájlunk, amelyhez az oldalunk kapcsolódik (ehhez a példához ez a "default.css"). A master CSS-fájl legmagasabb pontján az alábbi szabályok adhatók hozzá:
@ import URL ('/ stílusok / layout.css'); @ import url ('/ stílusok / type.css'); @ import url ('/ stílusok / images.css');
Ne feledje, hogy ezek a szabályok kell legyen a CSS-fájl összes többi tartalma előtt, hogy dolgozhassanak. A behozatali szabályok előtt nem rendelkezhet semmilyen más CSS-stílussal.
Ezen importszabályok alatt felvehet bármilyen más CSS-stílusot, amelyet az alapértelmezett lapban szeretne. Amikor a fő CSS-fájl betöltődik, először importálja ezeket a különálló fájlokat, és a stíluslapokat a stíluslap legfelső részévé teszi. Ezután lesz az összes többi stílus az importáltok alatt, létrehozva a teljes CSS-fájlt, amelyet a webböngésző használni fog a webhely megjelenítéséhez. A kisebb, célzottabb fájlok kezelése előnyös, miközben még mindig van egy stíluslap, amelyhez kapcsolódnak a HTML-ben.
A @import for Media Queries használatával
Az egyik dolog, amit fontolóra vehet, hogy elválasztja webhelye médiakérdéit a válaszadó webhelystílusoktól különálló fájlként. Mivel ezek a válaszadó stílusok zavaróak lehetnek, ha a webhely más stílusszabályai mellett láthatók, önmagukban is egy másik fájlban lehetnek vonzóak. Ennek a megközelítésnek az egyik aggodalma, hogy az Öné
@import a szabályoknak először kell lenniük, ez azt jelenti, hogy a média lekérdezései betöltésre kerülnek a webhely többi stílusa előtt. Amikor létrehoz egy mobil első válaszidős webhelyet, amely figyelembe veszi a teljesítményt, ez valószínűleg probléma. Emiatt javasoljuk, hogy ne különítse el és használja a webhely válaszkész stílusait
@import hogy eljusson a webhelybe. Igen, úgy tűnik, hogy előnyei vannak ennek, de a hátrányok meghaladják ezeket az előnyöket.
Szükségem van @import használatára?
Nem, te nem. Sok webhely egyszerűen megjeleníti az összes fő stílusát egy fájlon belül, és olyan nagy, mint az adott fájl, így kezelik (ez így van a saját munkámban). Ha megtalálja
@import hasznos, akkor része lehet a munkafolyamatnak. Ellenkező esetben biztonságosan építhet weboldalakat az összes CSS-szabályok egyetlen stíluslapja.
Böngésző támogatás
A nagyon, nagyon régi böngészőknek problémái vannak a @import szabályainak egy részével, de ezek a böngészők valószínűleg nem jelentenek problémát ezekben a napokban. Ez különösen igaz most, hogy az Internet Explorer régebbi verzióinak életciklusának vége lejárt. Végül, ha úgy döntesz, hogy használni
@import szabályokat a HTML vagy a CSS-ben, akkor ne forduljon elő a böngészők korábbi verzióival kapcsolatos problémákhoz, hacsak nem különös szükség van az IE hihetetlenül régi verzióinak támogatására.
Szerkesztette Jeremy Girard
