Það eru ýmsar leiðir sem þú getur sótt um CSS stíl á vefsíðu, þar með talið bæði ytri stílblöð eða jafnvel innlínustíl . Ef þú notar ytri stíll lak, sem er ráðlagður leið til að fyrirmæla útlit og tilfinningu fyrir HTML skjal, er ein aðferð að nota @import.
The @ Import regla gerir þér kleift að mikilvægu ytri stíl blöð í skjalinu þínu - annaðhvort í HTML síðu eða jafnvel í öðrum CSS skjölum. Brotið mikið af stílum í fjölda minni, áherslulegra skráa (einn fyrir skipulag, einn fyrir leturfræði , einn fyrir myndir osfrv.) Getur stundum auðveldað þér að stjórna þeim skrám og mismunandi stíl sem þeir innihalda. Ef þú vilt njóta þessarar ávinnings, þá er það að flytja þær ýmsar skrár sem þú þarft að gera til að fá þau öll að vinna fyrir birtingu vefsíðunnar.
Flytur inn í HTML
Til að nota @import regluna í HTML þínum, þá myndi þú bæta við eftirfarandi við
:
@import url ("/ stíll / default.css");
Þessi kóði myndi nú flytja inn þessa stílsíðu til notkunar á þessari HTML síðu og þú gætir stjórnað öllum stílum þínum í þeim eina skrá. Ókosturinn við mikilvægar strikamyndir á þennan hátt er að þessi aðferð leyfir ekki samhliða niðurhali. Síðan verður að hlaða niður heilt stílblað áður en það fer á aðra síðu, þar á meðal önnur CSS skrár sem þú ert að flytja inn með þessari aðferð. Þetta mun hafa neikvæð áhrif á hraða síðunnar og niðurhals. Miðað við hversu mikilvægt árangur á vefsíðunni er að ná árangri í dag, getur þessi galli einn verið ástæða þess að þú viljir forðast að nota @import.
Önnur nálgun
Til viðbótar við að nota @import í HTML þínum, getur þú tengt við þessi CSS skrá eins og þetta:
Þetta virkar mjög svipað og @import því að það gerir þér kleift að stjórna öllum CSS frá einum miðlægum stað / skrá, en þessi aðferð er æskileg frá niðurhalssýn. Ef þú vilt samtengja mismunandi gerðir af stílum í aðskildar skrár, getur þú haldið áfram að gera það og notaðu @import virkni inni í CSS skráarstjóranum þínum. Þetta þýðir að enn er hægt að stjórna ytri CSS skrámunum þínum, en þar sem þau flytja alla inn í eina CSS-meistara, er árangur bætt.
Flytja inn í CSS
Með því að nota kóða dæmi hér að ofan myndi koma "default.css" skráin til að nota á HTML síðunni þinni. Inni þessi CSS skrá, myndir þú hafa ýmsar síðu stílum þínum. Þú getur haft allar þær stíll ítarlegar á þeim eina síðu, eða þú getur notað @import til að brjóta þær í sundur til að auðvelda stjórnun. Enn og aftur, segjum að við notum 4 sérstaka CSS skrár - einn fyrir skipulag, einn fyrir leturfræði og einn fyrir myndir. Fjórða skráin er "húsbóndi" skrá okkar, sem er það sem tengist síðunni okkar (í þessu dæmi er þetta "default.css"). Efst á þessum meistara CSS skrá má bæta við reglunum sem sýndar eru hér að neðan:
@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');
Athugaðu að þessar reglur verða að vera fyrir allt annað efni í CSS skránum þínum til að þau geti unnið. Þú getur ekki haft neina aðra CSS stíl áður en þessar reglur um innflutning!
Undir þessum innflutningsreglum er hægt að bæta við öllum öðrum CSS stílum sem þú vilt hafa í sjálfgefnu blaðið. Þegar þessi aðal CSS-skrá er hlaðinn mun hún fyrst flytja þessar aðskildar skrár og bæta stílum sínum til allra toppa stílsins. Það mun þá hafa allar aðrar stíll þína undir þessum innfluttum, búa til alla CSS skrá sem vefskoðarinn notar til að birta síðuna þína. Þú færð þann ávinning að stjórna minni, nákvæmari skrám en samt sem áður hafa einn stíll sem tengist þeim HTML.
Notkun & # 64; innflutningur fyrir fjölmiðlafyrirspurnir
Eitt sem þú getur íhuga að gera það aðskilja fjölmiðlafyrirspurnir vefsvæðis þíns fyrir móttækilegum vefsíðum í sérstaka skrá. Vegna þess að þessi móttækilegu stíll getur verið ruglingslegt þegar það er séð við hlið annarra reglna um síðuna þína, getur það verið aðlaðandi að hafa þær á eigin spýtur í annarri skrá. Ein áhyggjuefni með þessa aðferð er sú að þar sem @import reglurnar þínar verða að vera fyrstir þýðir það að fjölmiðlafyrirspurnir þínar yrðu hlaðnir fyrir afganginn af stílum þínum. Þegar þú býrð til farsíma sem er fyrsti móttækilegur staður sem tekur tillit til frammistöðu er þetta líklegt að það sé vandamál. Af þessum sökum er mælt með því að þú deilir ekki svöruðu stílum þínum fyrir sig og notaðu @import til að koma þeim inn á síðuna þína. Já, það kann að virðast vera ávinningur af því að gera það, en gallarnir vega þyngra en þeim ávinningi.
Þarf ég að nota innflutning?
Nei það gerir þú ekki. Margir síður sýna einfaldlega allar helstu stílir sínar í einum skrá og, eins mikið og þessi skrá kann að vera, er það stjórnað með þessum hætti (þetta er hvernig ég geri það í eigin vinnu). Ef þú finnur @import gagnlegt þá getur það verið hluti af vinnuaflinu þínu. Annars getur þú örugglega byggt upp vefsíður sem stíllinn þinn á öllum CSS reglum þínum.
Stuðningur við vafra
Mjög, mjög gömul vafrar eiga í vandræðum með sum þessara @import reglna, en þessar vafrar eru ekki líklegar til að vera vandamál fyrir þig þessa dagana. Þetta á sérstaklega við núna þegar lokadagur frests fyrir eldri útgáfur af Internet Explorer er liðinn. Að lokum, ef þú ákveður að nota @import reglur í HTML eða CSS þínum, ættirðu ekki að komast inn í vandamál með eldri útgáfur af vefur flettitæki nema þú hafir einhverja undarlega þörf til að styðja ótrúlega gömlu útgáfur af IE.
Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard.