Come includere un file CSS in un altro?

Durante lo sviluppo di progetti ampi, è meglio creare file separati per HTML e CSS. Come siamo ben consapevoli, CSS fornisce numerose proprietà che gli sviluppatori possono utilizzare per rendere più estetiche le pagine Web e i documenti HTML. Pertanto, l'approccio ideale è creare più file CSS per diversi componenti del progetto. Questo aiuta gli sviluppatori a cercare il codice specifico per la modifica.

Questo post spiegherà come aggiungere un file CSS a un altro.

Come incorporare un file CSS in un altro?

Il CSS "@import regola"Viene utilizzato per incorporare un file CSS in un altro. Dai un'occhiata all'esempio per una chiara comprensione.

Esempio: incluso un file CSS in un altro

Innanzitutto, crea tre file, un HTML e due file CSS.

Passaggio 1: creare il file HTML

Crea un file HTML, "indice.html", Quindi aggiungi il""Elemento nel""Sezione come indicato di seguito. Qui "Rel"L'attributo viene utilizzato per definire la relazione tra HTML e il file collegato e"Href"Viene utilizzato per specificare l'origine del file:

Nel ""Sezione, eseguire i seguenti passaggi:

• Aggiungere un ""Elemento e assegnarlo due classi"Content-Div" E "libro".
• Aggiungere "

  "Elemento per l'intestazione e"

  "Elemento per creare un elenco.
  • Per elencare gli elementi, aggiungi "
  • "Tag:
  
  

  Libri

  
  
  
  
  • Alchimista
  
  
  • Il cacciatore di aquiloni
  
  
  
  

  Passaggio 2: creare il file CSS

  Dopodiché crea il "principale.CSS"File e aggiungere il seguente codice:

  .content-div
  larghezza: 400px;
  Altezza: 300px;
  Margine: auto;
  Background-color: RGB (245, 230, 212);
  

  IL ".Content-Div"È utilizzato per accedere al""Elemento che ha una classe chiamata come"Content-Div"E le seguenti proprietà sono applicate ad esso:

  • "larghezza"Determina la larghezza dell'elemento.
  • "altezza"Regola l'altezza dell'elemento.
  • "margine"Genera lo spazio attorno all'elemento HTML.
  • "colore di sfondo"Cambia il colore di sfondo dell'elemento HTML.

  Produzione

  Passaggio 3: crea un secondo file CSS

  Quindi, crea un secondo file CSS, "libro.CSS". Quindi, accedi al nome della seconda classe ".libro"E assegnalo le seguenti proprietà CSS:

  .libro
  Immagina di sfondo: URL (/immagini/foglie-.jpg);
  Size di sfondo: copertina;
  imbottitura: 15px;
  Font-size: 40px;
  Font-weight: audace;
  Colore: RGB (243, 243, 243);
  

  Qui:

  • "immagine di sfondo"Viene utilizzato per impostare l'immagine di sfondo definendo l'URL dell'immagine.
  • "Size di sfondo"Specifica la dimensione dell'immagine di sfondo dell'elemento.
  • "imbottitura"Applica lo spazio all'interno del bordo dell'elemento.
  • "dimensione del font"Imposta la dimensione del carattere.
  • "Font-peso"Designa lo spessore del carattere.
  • "colore"Determina il colore del carattere.

  Aggiungi il "@importare"Regola in cima al"principale.CSS" file:

  @import URL (libri.CSS);

  IL "@importare"La regola importa il file CSS in un altro file CSS. Ad esempio, il “libri.CSS"È incluso in"principale.CSS" file.

  L'output verifica che le proprietà CSS di entrambi i file siano state applicate correttamente:

  Abbiamo incluso con successo un file CSS in un altro.

  Conclusione

  Per includere un file CSS in un altro, utilizzare il CSS "@importare" regola. La regola "@import" deve essere specificata nella parte superiore del file CSS in cui si desidera includere un altro file CSS. Per collegare i file CSS in HTML, il "Tag, insieme al "Href"Attributo, viene utilizzato. Questo post ha spiegato come incorporare un file CSS in un altro.