Det finnes flere måter du kan bruke CSS-stiler på en nettside, inkludert både eksterne stilark eller til og med inline-stiler. Hvis du bruker et eksternt stilark, som er den anbefalte måten å diktere utseendet på et HTML-dokument, er det en tilnærming å bruke
@importere.
De
@importere regelen lar deg viktige eksterne stilark i dokumentet ditt - enten i en HTML-side eller til og med andre CSS-dokumenter. Å bryte mange stiler i en rekke mindre, fokuserte filer (en for layout, en for typografi, en for bilder, etc.) kan noen ganger gjøre det enklere å administrere disse filene og den forskjellige stilen de inneholder. Hvis du vil ha den fordelen, er det å importere de forskjellige filene det du trenger å gjøre for å få dem alle til å jobbe for websiden din.
Importerer til HTML
For å bruke
@importere Regel i HTML-koden din, du vil legge til følgende i
av dokumentet:
:
Denne koden vil nå importere dette stilarket for bruk på denne HTML-siden, og du kan administrere alle stilene dine i den ene filen. Ulempen med viktige stilark på denne måten er at denne metoden ikke tillater parallelle nedlastinger. Siden må laste ned et helt stilark før det går videre til resten av siden, inkludert andre CSS-filer du importerer ved hjelp av denne metoden. Dette vil ha en negativ effekt på sidens hastighet og nedlastingsytelse. Tatt i betraktning hvor viktig sideytelsen er for websitetssuksessen, kan denne ulempen alene være en grunn til at du vil unngå å bruke @import.
Alternativ tilnærming
Som et alternativ til bruk
@importere i HTML-en din, kan du koble til den CSS-filen slik:
Dette fungerer veldig på samme måte som
@importere ved at den lar deg administrere alle dine CSS fra en sentral plassering / fil, men denne metoden er å foretrekke fra et nedlastingsperspektiv. Hvis du fortsatt vil segmentere forskjellige typer stiler i separate filer, kan du fortsette å gjøre det, og bruk @import-funksjonaliteten inne i master-CSS-filen. Dette betyr at dine eksterne CSS-filer fortsatt kan administreres enkeltvis, men siden de alle importeres til en master CSS, forbedres ytelsen.
Importerer til CSS
Bruker
kodeeksempel ovenfor ville bringe "default.css" -filen til bruk på HTML-siden din. Innenfor CSS-filen vil du ha forskjellige sidestiler. Du kan ha alle de stilene som er detaljerte på den ene siden, eller du kan bruke @import for å bryte dem fra hverandre for enklere håndtering. Igjen, la oss si at vi bruker 4 separate CSS-filer - en for layout, en for typografi og en for bilder. Den fjerde filen er vår "master" -fil som er hva vår side lenker til (for dette eksempelet er dette "default.css"). Øverst på den aktuelle CSS-filen kan vi legge til reglene som er vist nedenfor:
@import url ('/ styles / layout.css'); @ import url ('/ styles / type.css'); @ import url ('/ styles / images.css');
Merk at disse reglene må vær før alt annet innhold i CSS-filen for at de skal kunne jobbe. Du kan ikke ha noen annen CSS-stil før disse importreglene.
Under disse importreglene kan du legge til hvilke andre CSS-stiler du vil ha i standardarket. Når den viktigste CSS-filen er lastet, vil den først importere disse separate filene og legge til stilene deres helt til toppen av stilarket. Det vil da ha alle dine andre stiler under disse importerte, og opprett den fulle CSS-filen som nettleseren vil bruke til å vise nettstedet ditt. Du får fordelen av å administrere mindre, mer fokuserte filer, mens du fortsatt har et enkelt stilark koblet til i HTML-koden.
Bruker @import for medieforespørsler
En ting kan du vurdere å gjøre det å skille nettsidens medieforespørsler for responsive nettstedstiler i en egen fil. Fordi disse responsive stilene kan være forvirrende når de ses sammen med sidens andre stilregler, kan det være attraktivt å ha dem på egen hånd i en annen fil. En bekymring med denne tilnærmingen er at siden din
@importere Regler må være først, dette betyr at medieforespørsmålene dine vil bli lastet inn for resten av nettstedets stiler. Når du lager et mobilt første responsivt nettsted som tar hensyn til ytelse, er dette sannsynligvis et problem. Av denne grunn foreslås det at du ikke deler nettstedets responsive stiler separat og bruk
@importere å bringe dem inn på nettstedet ditt. Ja, det kan synes å være fordeler med å gjøre det, men ulempene oppveier de fordelene.
Trenger jeg å bruke @import?
Nei det gjør du ikke. Mange nettsteder viser ganske enkelt alle sine hovedtyper i en fil, og så stort som den filen kan være, blir den klargjort slik (slik gjør jeg det i mitt eget arbeid). Hvis du finner
@importere nyttig, så kan det være en del av arbeidsflyten din. Ellers kan du sikkert bygge nettsider som ditt enkle stilark av alle dine CSS-regler.
Nettleserstøtte
Veldig, veldig gamle nettlesere har problemer med noen av disse @import-reglene, men disse nettleserne er usannsynlig å være et problem for deg i disse dager. Dette gjelder spesielt nå når slutten av levetid for eldre versjoner av Internet Explorer har passert. Til slutt, hvis du bestemmer deg for å bruke
@importere regler i HTML eller CSS, bør du ikke løse problemer med eldre versjoner av nettlesere, med mindre du har noe merkelig behov for å støtte utrolige gamle versjoner av IE.
Redigert av Jeremy Girard
