Beste måten å inkludere CSS? Hvorfor bruke @import?

Beste Maten A Inkludere Css Hvorfor Bruke Import



Når du utvikler nettsteder og nettapper, kreves det ofte samme stil på hver nettside for å opprettholde konsistensen til nettappen. For eksempel, hvis fargene på hovedsiden til en nettapp er en kombinasjon av rosa og lilla, vil det se rart ut hvis neste side i nettappen har en annen farge som svart og oransje.

Men mens du koder, er det vanskelig å inkludere de samme CSS-egenskapene for hver nettside separat. Så det er nødvendig å bruke en løsning der et enkelt stilark kan opprettes og deretter enkelt åpnes av flere filer.

Hva er @import-regelen i CSS?

Den beste måten å inkludere CSS-stilegenskapene på er å bruke @import-regelen. @import brukes til å importere eller få tilgang til et CSS-stilark fra et annet stilark. Dette reduserer innsatsen til utvikleren ettersom alle egenskapene som er lagt til i det importerte stilarket implementeres direkte ved å bare skrive @import og deretter det nøyaktige navnet på stilarket.







Syntaks for @importregel

Syntaksen for å legge til @import-regelen for å få tilgang til et stilark fra et annet stilark er følgende:



@import 'stilarknavn.css' ;

@import-regelen kan også legges til på følgende måte:



@import url ( stilarknavn.css ) ;

Bare legg til navnet på CSS-stilarkfilen i enten inverterte kommaer eller i runde parenteser med ' url 'etter å ha skrevet' @import '.





Eksempel: Legger til @import-regel

For å forstå hvordan @import-regelen fungerer, skriver vi en enkel kodebit:

< h1 > Dette er en enkel tekst! < / h1 >

I kodebiten ovenfor er det en

-overskrift med en enkel setning på én linje lagt til i et HTML-dokument. Denne enkle koden vil generere følgende utgang:



La oss lage et stilark for å definere noen CSS-egenskaper som senere kan importeres fra filen som web-sidegrensesnittet ovenfor opprettes gjennom. Vi lager en annen fil og gir den navnet ' stilark ' med filtypen erklært som ' css ', og bare legg til noen egenskaper for

overskrift og brødtekst:

h1 {

farge : midnatt blå ;

bakgrunnsfarge : asurblått ;

tekstjustering : senter ;

}

kropp {

bakgrunnsfarge : lyse blå ;

}

For å få tilgang til stilarkfilen som inneholder stilegenskapene for

overskrift og brødtekst, må vi ganske enkelt legge til @import-regelen i en av CSS-filene der stilen er nødvendig.



Hvis du bare legger til en enkel @import-regel, implementeres alle stilegenskapene til nettsidegrensesnittet uten å måtte skrive egenskapene separat på hver nettside.

Så det er påkrevd å skrive @import-regelen som:

@import 'stylesheet.css' ;

Legger til @import-regelen ved å skrive ' url ' og navnet på CSS-filen i de runde parentesene vil også vise de samme resultatene:

@import url ( stilark.css ) ;

Egenskapene definert i ' stilark '-filen implementeres ved å bare legge til en enkel ' @import 'regel for det:

Dette er den enkleste måten å inkludere CSS-egenskapene i en fil uten ekstra innsats.

Fordeler med @import-regel i CSS

@import-regelen brukes ofte av følgende grunner:

  • Å bruke @import-regelen reduserer tiden og innsatsen til utvikleren ettersom den implementerer alle egenskapene til et bestemt stilark ved å bare skrive navnet på det arket etter @import.
  • I store og komplekse nettapper viser @import-regelen seg å være svært fordelaktig ettersom de samme stilegenskapene kan implementeres i flere filer bare ved å legge til navnet på stilarkfilen.
  • Stilarkelementer som topptekster, bunntekster, brødtekst osv. kan lagres i separate stilarkfiler, og ved å bruke @import-regelen kan alle nødvendige stiler importeres uten å måtte legge til, fjerne eller kommentere stilegenskaper fra en fil.

Dette oppsummerer bruken av @import-regelen og forklarer hvordan denne regelen anses som den beste metoden for å inkludere CSS.

Konklusjon

Et CSS-stilark kan importeres eller åpnes direkte fra et annet stilark, og alle egenskapene i det importerte stilarket implementeres direkte på nettsiden til filen der det er importert. Det er ikke nødvendig å skrive hver CSS-egenskap separat for hvert nettsidegrensesnitt. Alt som trengs er å legge til navnet på CSS-stilarkfilen med @import. Og dette regnes som den beste metoden for å legge til CSS.