Comment inclure un fichier CSS dans un autre?

Tout en développant de nombreux projets, il est préférable de créer des fichiers séparés pour HTML et CSS. Comme nous le savons bien, CSS fournit de nombreuses propriétés que les développeurs peuvent utiliser pour rendre les pages Web et les documents HTML plus esthétiques. Par conséquent, l'approche idéale consiste à créer plusieurs fichiers CSS pour différents composants de projet. Cela aide les développeurs à rechercher le code spécifique pour la modification.

Ce message expliquera comment ajouter un fichier CSS à un autre.

Comment intégrer un fichier CSS dans un autre?

Le CSS "Règle @Import"Est utilisé pour incorporer un fichier CSS dans un autre. Consultez l'exemple pour une compréhension claire.

Exemple: y compris un fichier CSS dans un autre

Tout d'abord, créez trois fichiers, un HTML et deux fichiers CSS.

Étape 1: Créer un fichier HTML

Créer un fichier html, "indice.html", Puis ajoutez le"”Élément dans le"»Section comme indiqué ci-dessous. Ici "rel«L'attribut est utilisé pour définir la relation entre HTML et le fichier lié, et«href»Est utilisé pour spécifier la source de fichier:

Dans le "»Section, effectuez les étapes suivantes:

• Ajouter un ""Element et attribuez-le deux classes"contenu-div" et "livre".
• Ajouter "

  «Élément pour le cap et«

  »Élément pour créer une liste.
  • Pour répertorier les éléments, ajoutez "
  • " Mots clés:
  
  

  Livres

  
  
  
  
  • Alchimiste
  
  
  • Le Kite Runner
  
  
  
  

  Étape 2: Créer un fichier CSS

  Après cela, créez le «principal.CSS”Fichier et ajouter le code suivant:

  .Content-div
  Largeur: 400px;
  hauteur: 300px;
  marge: auto;
  Color en arrière-plan: RVB (245, 230, 212);
  

  Le ".contenu-div«Est utilisé pour accéder au««Élément ayant une classe nommée comme«contenu-div»Et les propriétés suivantes y sont appliquées:

  • "largeur»Détermine la largeur de l'élément.
  • "hauteur"Ajuste la hauteur de l'élément.
  • "marge»Génére l'espace autour de l'élément HTML.
  • "Couleur de l'arrière plan»Modifie la couleur d'arrière-plan de l'élément HTML.

  Sortir

  Étape 3: Créez le deuxième fichier CSS

  Ensuite, créez un deuxième fichier CSS, "livre.CSS". Ensuite, accédez au nom de deuxième classe ".livre»Et attribuez-le les propriétés CSS suivantes:

  .livre
  Image d'arrière-plan: URL (/ images / feuilles-.jpg);
  taille arrière: couverture;
  rembourrage: 15px;
  taille de police: 40px;
  Police-poids: Bold;
  Couleur: RVB (243, 243, 243);
  

  Ici:

  • "image de fond”Est ​​utilisé pour définir l'image d'arrière-plan en définissant l'URL de l'image.
  • "taille de l'arrière-plan»Spécifie la taille de l'image d'arrière-plan de l'élément.
  • "rembourrage"Applique de l'espace à l'intérieur de la bordure de l'élément.
  • "taille de police»Définit la taille de la police.
  • "poids de police»Désigne l'épaisseur de la police.
  • "couleur»Détermine la couleur de la police.

  Ajouter le "@importer"Règle en haut du"principal.CSS" déposer:

  @Import URL (livres.css);

  Le "@importer"La règle importe le fichier CSS dans un autre fichier CSS. Par exemple, le «livres.CSS"Est inclus dans le"principal.CSS" déposer.

  La sortie vérifie que les propriétés CSS des deux fichiers ont été appliquées avec succès:

  Nous avons réussi à inclure un fichier CSS dans un autre.

  Conclusion

  Pour inclure un fichier CSS dans un autre, utilisez le CSS "@importer" règle. La règle «@Import» doit être spécifiée en haut du fichier CSS où vous souhaitez inclure un autre fichier CSS. Afin de lier les fichiers CSS dans HTML, le «”Tag, avec le"href»Attribut, est utilisé. Ce message a expliqué comment incorporer un fichier CSS dans un autre.