Mais lors du codage, il est difficile d'inclure les mêmes propriétés CSS pour chaque page Web séparément. Il est donc nécessaire d'utiliser une solution permettant de créer une seule feuille de style, puis d'y accéder facilement par plusieurs fichiers.
Qu'est-ce que la règle @import en CSS ?
La meilleure façon d'inclure les propriétés de style CSS est d'utiliser la règle @import. @import est utilisé pour importer ou accéder à une feuille de style CSS à partir d'une autre feuille de style. Cela réduit l'effort du développeur car toutes les propriétés ajoutées dans la feuille de style importée sont implémentées directement en écrivant simplement @import puis le nom exact de la feuille de style.
Syntaxe de la règle @import
La syntaxe pour ajouter la règle @import pour accéder à une feuille de style depuis une autre feuille de style est la suivante :
@importer 'nomfeuilledestyle.css' ;
La règle @import peut également être ajoutée par la méthode suivante :
@importer URL ( nomfeuilledestyle.css ) ;
Ajoutez simplement le nom du fichier de feuille de style CSS entre guillemets ou entre parenthèses avec ' URL « après avoir écrit » @importer ”.
Exemple : Ajout d'une règle @import
Pour comprendre le fonctionnement de la règle @import, nous écrivons un simple extrait de code :
< h1 > Ceci est un texte simple ! < / h1 >Dans l'extrait de code ci-dessus, il y a un en-tête
avec une simple phrase d'une ligne ajoutée dans un document HTML. Ce code simple générera la sortie suivante :
Créons une feuille de style pour définir certaines propriétés CSS qui peuvent ensuite être importées à partir du fichier à travers lequel l'interface de page Web ci-dessus est créée. Nous créons un autre fichier et le nommons ' feuille de style ' avec le type de fichier déclaré comme ' CSS ”, et ajoutez simplement quelques propriétés pour le titre et le corps
: h1 {
couleur : bleu nuit ;
Couleur de l'arrière plan : Azur ;
aligner le texte : centre ;
}
corps {
Couleur de l'arrière plan : bleu clair ;
}
Pour accéder au fichier de feuille de style contenant les propriétés de style pour le titre et le corps
, nous devons simplement ajouter la règle @import dans tous les fichiers CSS où ce style est nécessaire.
L'ajout d'une simple règle @import implémentera toutes les propriétés de style dans l'interface de la page Web sans avoir à saisir les propriétés séparément sur chaque page Web.
Ainsi, il est nécessaire d'écrire la règle @import comme suit :
@importer 'feuille de style.css' ;Ajout de la règle @import en écrivant ' URL ” et le nom du fichier CSS entre parenthèses afficheront également les mêmes résultats :
@importer URL ( feuille de style.css ) ;Les propriétés définies dans le ' feuille de style ' fichier sont implémentés en ajoutant simplement un simple ' @importer ” règle pour cela:
C'est le moyen le plus simple d'inclure les propriétés CSS dans un fichier sans aucun effort supplémentaire.
Avantages de la règle @import en CSS
La règle @import est couramment utilisée pour les raisons suivantes :
- L'utilisation de la règle @import réduit le temps et les efforts du développeur car elle implémente toutes les propriétés d'une feuille de style particulière en écrivant simplement le nom de cette feuille après @import.
- Dans les applications Web volumineuses et complexes, la règle @import s'avère très avantageuse car les mêmes propriétés de style peuvent être implémentées dans plusieurs fichiers simplement en ajoutant le nom du fichier de feuille de style.
- Les éléments de feuille de style tels que les en-têtes, les pieds de page, le corps, etc. peuvent être stockés dans des fichiers de feuille de style séparés, puis en utilisant la règle @import, tout style requis peut être importé sans avoir à ajouter, supprimer ou commenter les propriétés de style d'un déposer.
Ceci résume l'utilisation de la règle @import et explique comment cette règle est considérée comme la meilleure méthode pour inclure CSS.
Conclusion
Une feuille de style CSS peut être importée ou accessible directement à partir d'une autre feuille de style et toutes les propriétés de la feuille de style importée sont directement implémentées sur la page Web du fichier où elle a été importée. Il n'est pas nécessaire d'écrire chaque propriété CSS séparément pour chaque interface de page Web. Il suffit d'ajouter le nom du fichier de feuille de style CSS avec @import. Et, ceci est considéré comme la meilleure méthode pour ajouter du CSS.