Come importare fogli di stile con @import in CSS

Ci possono essere diversi fogli di stile in un progetto web. Per applicare tutte le loro proprietà agli elementi HTML, è necessario integrarle tutte in un foglio di stile. Per farlo, il CSS "@importare"La regola può essere utilizzata. Utilizzando la regola @import, un file CSS contiene tutti gli stili applicati all'intero progetto. Inoltre, questo file CSS può essere collegato all'HTML utilizzando l'elemento nella sezione Head HTML.

Questo articolo spiegherà il metodo per importare fogli di stile con @IMport in CSS.

Per una migliore comprensione, analizza l'esempio di seguito!

Come importare fogli di stile con @import in CSS?

Creeremo un file HTML e due file CSS con i nomi "stile.CSS" E "btnstyle.CSS":

• Il file HTML contiene un elemento div. All'interno di questo div, viene specificato l'elemento pulsante.
• Lo stile.CSS conterrà le proprietà di styling dell'elemento Div.
• The Btnstyle.CSS comprenderà le proprietà di styling dell'elemento pulsante.
• The Btnstyle.Il file CSS importerà nello stile.CSS, e quindi, il file HTML si collegherà allo stile.File CSS.

Passaggio 1: creare il file HTML

In HTML, prima, aggiungi un elemento div con il nome della classe "contenuto". All'interno di questo elemento, aggiungi un elemento pulsante:

Cliccami

Ecco l'output:

Il file HTML viene creato correttamente. Ora, andiamo allo stile.File CSS.

Passaggio 2: creare stile.File CSS

Di seguito sono riportate le proprietà CSS aggiunte al "stile.CSS" file.

Stile tutti gli elementi

*
Margine: 0;
imbottitura: 0;

L'asterisco "*"Il segno viene utilizzato per fare riferimento a tutti gli elementi HTML. Le seguenti proprietà vengono applicate a loro:

• "margine"La proprietà aggiunge spazio attorno all'elemento.
• "imbottitura"La proprietà aggiunge spazio attorno al contenuto dell'elemento o all'interno del bordo dell'elemento.

Stile "contenuto" di stile

.contenuto
larghezza: 350px;
Altezza: 150px;
Border: 1px Solid RGB (252, 198, 117);
Background-color: Blanchedalmond;
Margine: auto;
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;

Di seguito sono riportate le proprietà applicate all'elemento Div:

• "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento.
• "altezza"La proprietà viene utilizzata per l'impostazione dell'altezza dell'elemento.
• "confine"La proprietà specifica il bordo dell'elemento specificando i valori per la larghezza del bordo, lo stile del bordo e il colore del bordo.
• "colore di sfondo"La proprietà aggiunge colore allo sfondo dell'elemento.
• "Schermo"Proprietà con il valore"flettere"Renderà il layout dell'elemento flessibile per i suoi articoli.
• "giustificare il contenuto"La proprietà imposta la posizione degli articoli flessibili in orizzontale.
• "allineare"La proprietà imposta la posizione degli articoli flessibili in verticale e"margine"La proprietà funziona come spiegato sopra.

Passaggio 3: collegare CSS al file HTML

Il prossimo passo è collegare lo stile.File CSS al file HTML utilizzando il ""Elemento associato agli attributi:

• Rel: Questo attributo viene utilizzato per specificare il tipo di documento.
• Href: Questo attributo viene utilizzato per aggiungere l'URL del file.

Questo elemento di collegamento è specificato nell'elemento principale del file HTML:

Quindi, ecco l'output dopo aver collegato lo stile.File CSS al file HTML:

Quindi, ora vai al "btnstyle.CSS"File che terrà le proprietà di styling dell'elemento pulsante.

Passaggio 4: crea btnstyle.File CSS

Questo file ha le proprietà CSS dell'elemento pulsante HTML.

Elemento "pulsante" di stile

pulsante
raggio di confine: 5px;
imbottitura: 10px;
larghezza: 200px;
Background-color: RGB (253, 207, 137);
bordo: 1px solido RGB (245, 156, 21);
box-shadow: 1px 1px 1px grigio;

L'elemento pulsante è specificato con le seguenti proprietà:

• "raggio di confine"La proprietà viene utilizzata per rendere i bordi dell'elemento.
• "Box-Shadow"È una proprietà stenorta che imposta un'ombra attorno a un elemento specificando i valori per X-offset, Y-offset, Blur-radius, Spread-Radius e Color of the Shadow.
• IL "imbottitura","larghezza","colore di sfondo", E "confine"Le proprietà funzionano come descritto sopra.

Passaggio 5: elemento "pulsante" di stile su Hover

Button: Hover
trasformazione: traduzione (2px);

In Hover, l'elemento pulsante è specificato con la seguente proprietà:

• "trasformare"La proprietà specifica la trasformazione dell'elemento in cui il"Translatey ()"La funzione riposiziona l'elemento sull'asse y.

Passaggio 6: usa la regola @import

Ora integreremo il btnstyle.file css nello stile.File CSS. Per questo, specificare lostyle BTN.File CSS utilizzando la regola @import nella parte superiore dello stile.File CSS come segue:

@import "btnstyle.CSS ";

Produzione

Hai imparato con successo come importare fogli di stile con @IMport in CSS.

Conclusione

Per applicare tutte le proprietà al file HTML del tuo progetto, è necessario integrarle. Per fare ciò, i fogli di stile CSS vengono importati nel foglio di stile utilizzando la regola @import. Quindi, questo file può essere collegato al file HTML utilizzando l'elemento di collegamento HTML. Questo articolo ha dimostrato come importare fogli di stile con @IMport in CSS.