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.