Lors du développement de sites Web et d'applications Web, le même style dans chaque page Web est souvent nécessaire pour maintenir la cohérence de l'application Web. Par exemple, si les couleurs de la page principale d'une application Web sont une combinaison de rose et de violet, il aura l'air bizarre si la page suivante de l'application Web est de toute autre couleur comme le noir et l'orange.

Mais bien que le codage, il est difficile d'inclure séparément les mêmes propriétés CSS pour chaque page Web. Ainsi, il est nécessaire d'utiliser une solution à travers laquelle une feuille de style unique peut être créée puis accéder facilement par plusieurs fichiers.

Quelle est la règle @Import dans 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 à partir d'une autre feuille de style est la suivante:

@Import "StylesheetName.CSS ";

La règle @Import peut également être ajoutée par la méthode suivante:

@Import URL (StylesheetName.css);

Ajoutez simplement le nom du fichier de feuille de style CSS dans des virgules inversées ou entre parenthèses avec "URL"Après avoir écrit"@importer".

Exemple: ajout de la règle @Import

Pour comprendre comment fonctionne la règle @Import, nous écrivons un extrait de code simple:

Ceci est un texte simple!

Dans l'extrait de code ci-dessus, il y a un

En tête avec une simple phrase en une ligne ajoutée dans un document HTML. Ce code simple générera la sortie suivante:

Permet de créer une feuille de style pour définir certaines propriétés CSS qui peuvent ensuite être importées à partir du fichier par lequel l'interface de page Web ci-dessus est créée. Nous créons un autre fichier et le nommez "feuille de style"Avec le type de fichier déclaré"CSS», Et ajoutez simplement quelques propriétés pour

Heure et corps:

H1
Couleur: MidnightBlue;
Color d'arrière-plan: Azure;
Texte-aligne: Centre;

corps
Color d'arrière-plan: LightBlue;

Pour accéder au fichier de feuille de style contenant les propriétés de style pour

En-tête et corps, nous devons simplement ajouter la règle @Import dans l'un des 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 à l'interface de la page Web sans avoir à taper les propriétés séparément sur chaque page Web.

Ainsi, il est nécessaire d'écrire la règle @Import comme:

@Import "Stylesheet.CSS ";

Ajout de la règle @Import en écrivant "URL»Et le nom du fichier CSS dans les supports ronds affichera également les mêmes résultats:

URL @Import (feuille de style.css);

Les propriétés définies dans le «feuille de style"Les fichiers sont implémentés en ajoutant simplement un simple"@importer«Règle pour cela:

C'est la façon la plus simple d'inclure les propriétés CSS dans un fichier sans aucun effort supplémentaire.

Avantages de la règle @import dans 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 il 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 grandes 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.
• Des éléments de feuille de style comme les en-têtes, les pieds de page, le corps, et déposer.

Cela 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ù il a été importé. 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 c'est considéré comme la meilleure méthode pour ajouter CSS.