Durante lo sviluppo di siti Web e app Web, lo stesso stile in ogni pagina Web è spesso richiesto per mantenere la coerenza dell'app Web. Ad esempio, se i colori della pagina principale di un'app Web sono una combinazione di rosa e viola, sembrerà strano se la pagina successiva dell'app Web è di altro colore come il nero e l'arancione.

Ma durante la codifica, è difficile includere le stesse proprietà CSS per ogni pagina Web separatamente. Quindi, è necessario utilizzare una soluzione attraverso la quale è possibile creare un singolo foglio di stile e quindi accedere a più file facilmente.

Qual è la regola @import in CSS?

Il modo migliore per includere le proprietà in stile CSS è utilizzando la regola @import. @IMport viene utilizzato per importare o accedere a un foglio di stile CSS da un altro foglio di stile. Ciò riduce lo sforzo dello sviluppatore poiché tutte le proprietà aggiunte nel foglio di stile importato sono implementate direttamente scrivendo @import e quindi il nome esatto del foglio di stile.

Sintassi della regola @import

La sintassi per aggiungere la regola @import per accedere a un foglio di stile da un altro foglio di stile è la seguente:

@import "StylesheetName.CSS ";

La regola @import può anche essere aggiunta con il seguente metodo:

@import URL (StylesheetName.CSS);

Semplicemente, aggiungi il nome del file CSS Stylesheet in virgole invertite o tra parentesi rotonde con “URL"Dopo aver scritto"@importare".

Esempio: aggiunta di regola @import

Per capire come funziona la regola @import, scriviamo un semplice frammento di codice:

Questo è un semplice testo!

Nello snippet di codice sopra, c'è un

Intestazione con una semplice frase a una riga aggiunta in un documento HTML. Questo semplice codice genererà il seguente output:

Creiamo un foglio di stile per definire alcune proprietà CSS che possono successivamente essere importate dal file attraverso il quale viene creata l'interfaccia della pagina web sopra. Creiamo un altro file e lo chiamiamo "foglio di stile"Con il tipo di file dichiarato"CSS", E aggiungi semplicemente alcune proprietà per

Intestazione e corpo:

H1
Colore: MidnightBlue;
Background-color: Azure;
Testo-align: centro;

corpo
Background-color: LightBlue;

Per accedere al file del foglio di stile contenente le proprietà di stile per

Intestazione e corpo, dobbiamo semplicemente aggiungere la regola @import in uno qualsiasi dei file CSS in cui è necessario quello styling.

L'aggiunta solo di una semplice regola @import implementerà tutte le proprietà di stile all'interfaccia della pagina Web senza dover digitare le proprietà separatamente su ogni pagina Web.

Quindi, è necessario scrivere la regola @import come:

@IMport "Stylesheet.CSS ";

Aggiungendo la regola @import scrivendo "URL"E il nome del file CSS tra parentesi rotondi visualizzerà anche gli stessi risultati:

@import URL (Stylesheet.CSS);

Le proprietà definite nel "foglio di stile"Il file è implementato semplicemente aggiungendo un semplice"@importare"Regola per questo:

Questo è il modo più semplice per includere le proprietà CSS in un file senza ulteriori sforzi.

Vantaggi della regola @import in CSS

La regola @import è usata comunemente per i seguenti motivi:

• L'uso della regola @import riduce il tempo e lo sforzo dello sviluppatore in quanto implementa tutte le proprietà di un particolare foglio di stile semplicemente scrivendo il nome di quel foglio dopo @IMport.
• In app Web grandi e complesse, la regola @import si rivela molto vantaggiosa in quanto le stesse proprietà di stile possono essere implementate in più file semplicemente aggiungendo il nome del file del foglio di stile.
• Elementi di fogli di stile come intestazioni, piè di pagina, corpo, ecc. Possono essere archiviati in file di fogli di stile separati e quindi utilizzando la regola @import, qualsiasi stile richiesto può essere importato senza bisogno di aggiungere, rimuovere o commentare proprietà stile file.

Ciò riassume l'uso della regola @import e spiega come questa regola è considerata il metodo migliore per includere CSS.

Conclusione

Un foglio di stile CSS può essere importato o accessibile direttamente da un altro foglio di stile e tutte le proprietà nel foglio di stile importato sono direttamente implementate nella pagina web del file in cui è stato importato. Non è necessario scrivere ogni proprietà CSS separatamente per ogni interfaccia della pagina web. Tutto ciò che serve è aggiungere il nome del file del foglio di stile CSS con @IMport. E questo è considerato il metodo migliore per aggiungere CSS.