Mens du utvikler nettsteder og webapper, er den samme stylingen på hver webside ofte nødvendig for å opprettholde konsistensen på webappen. For eksempel, hvis fargene på hovedsiden på en webapp er en kombinasjon av rosa og lilla, vil det se rart ut hvis neste side i webappen er av annen farge som svart og oransje.

Men mens du koder, er det vanskelig å inkludere de samme CSS -egenskapene for hver eneste webside separat. Så det kreves å bruke en løsning som et enkelt stilark kan opprettes og deretter få tilgang til med flere filer enkelt.

Hva er @import -regelen i CSS?

Den beste måten å inkludere CSS -stilegenskapene er ved å bruke @import -regelen. @import brukes til å importere eller få tilgang til en CSS -stilark fra et annet stilark. Dette reduserer utviklerens innsats da 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 av @importregel

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

@import "StylesheetName.CSS ";

@Import -regelen kan også legges til ved følgende metode:

@Import URL (StylesheetName.CSS);

Bare legg til navnet på CSS -stilarkfilen i enten omvendt komma eller i runde parentes med "URL”Etter å ha skrevet“@import”.

Eksempel: Legge til @importregel

For å forstå hvordan @import -regelen fungerer, skriver vi et enkelt kodebit:

Dette er en enkel tekst!

I ovennevnte kodebit er det en

Overskrift med en enkel en-linjesetning lagt til i et HTML-dokument. Denne enkle koden vil generere følgende utgang:

La oss opprette et stilark for å definere noen CSS -egenskaper som senere kan importeres fra filen som ovennevnte webside -grensesnitt opprettes. Vi oppretter en annen fil og navngir den "stilark”Med filtypen erklært som“CSS”, Og bare legge til noen egenskaper for

overskrift og kropp:

H1
Farge: Midnightblue;
Bakgrunnsfarge: Azure;
tekst-align: sentrum;

kropp
bakgrunnsfarge: Lightblue;

For å få tilgang til stilarkfilen som inneholder stilegenskapene for

overskrift og kropp, vi må ganske enkelt legge til @import -regelen i noen av CSS -filer der den stylingen er nødvendig.

Å legge til bare en enkel @import -regel vil implementere alle stilegenskapene til grensesnittet til websiden uten å måtte skrive egenskapene separat på hver webside.

Så det kreves å skrive @import -regelen som:

@import "Stylesheet.CSS ";

Legge 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 som er definert i "stilark”Fil implementeres ved bare å legge til en enkel“@import”Regel for det:

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

Fordelene med @importregel i CSS

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

• Å bruke @import -regelen reduserer utviklerens tid og krefter, da 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 veldig fordelaktig, da de samme stilegenskapene kan implementeres i flere filer bare ved å legge til navnet på stilarkfilen.
• Stilarkelementer som overskrifter, bunntekst, kropp osv 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 få tilgang til direkte fra et annet stilark, og alle egenskapene i det importerte stilarket er direkte implementert på websiden til filen der den er importert. Det er ikke nødvendig å skrive hver eneste CSS -egenskap separat for hvert grensesnitt på websiden. Alt som trengs er å legge til navnet på CSS -stilarkfilen med @import. Og dette regnes som den beste metoden for å legge til CSS.