"@”Le symbole est utilisé pour ajouter des règles dans CSS. Les règles ajoutées via le «@"Le symbole est appelé le"aux règles". Ces règles minimisent l'effort du développeur de différentes manières. Les opérations qui «aux règles«Effectif importe directement les propriétés CSS sans avoir à écrire ou à copier-coller toutes les propriétés CSS dans chaque fichier, à appliquer des propriétés sur certains supports, et à télécharger et à appliquer directement des polices au contenu de la page Web.

Voici le majeur «aux règles"Dans CSS:

• La règle @Import
• La règle @media
• La règle @ font-face

Discutons brièvement de chacun des trois "aux règles«Pour comprendre comment ils fonctionnent.

Quelle est la règle @Import dans CSS?

Le "@importer"La règle dans CSS est utilisée pour importer une feuille de style CSS à partir d'une autre feuille de style. S'il existe une feuille de style CSS qui contient des propriétés ou des instructions de style pour différents éléments d'une page Web et il est nécessaire d'ajouter le même style dans un autre fichier de page Web, en écrivant uniquement "@importer"Avec le nom de cette feuille de style (qui contient des propriétés CSS) sur le côté droit dans les deux crochets avec"URL»Ou dans les virgules inversées peut importer toutes les propriétés de cette feuille de style et les appliquer directement à la feuille de style où le«@importer"La règle a été ajoutée.

Syntaxe

Il devrait y avoir le nom du fichier de feuille de style formaté CSS écrit après «@importer". Donc, la syntaxe à ajouter "@importer«La règle dans une feuille de style est la suivante:

@Import "StylesheetName.CSS ";

La règle d'importation peut également être écrite comme ce qui suit dans le même but qu'elle générera également le même résultat:

@Import URL (StylesheetName.css);

Quelle est la règle @Media dans CSS?

Le "@médias"La règle est utilisée pour ajouter des instructions multimédias à la page Web. Cette règle fonctionne selon la condition appliquée lors de l'ajout de cette règle. La condition est ajoutée juste après l'ajout "@médias«Sur le côté droit, puis à l'intérieur de la règle dans les supports bouclés se trouvent les propriétés ou les instructions qui doivent être implémentées lorsque la condition est vraie.

Exemple: application de la règle @media

Pour comprendre un exemple, nous pouvons ajouter du contenu à la page Web:

Bienvenue sur le tutoriel LinuxHint!

Dans l'extrait de code ci-dessus, il y a une rubrique créée pour l'afficher en tant que contenu de la page Web.

Prenons un exemple d'ajout d'instructions médiatiques lorsque les dimensions ou la largeur de la page augmentent ou diminue. Tout d'abord, écrivez "@médias«Puis ajoutez la condition, puis dans les supports bouclés définissent les propriétés CSS qui doivent être implémentées si la condition avec«@médias"Devient vrai:

@media (max-largeur: 700px)
.Ma classe
la couleur noire;
Contexte: vert;


@Media (Min-Width: 700px) et (max-largeur: 900px)
.Ma classe
la couleur noire;
Contexte: jaune;


@Media (Min-Width: 900px)
.Ma classe
la couleur noire;
Contexte: Cyan;

Dans le code ci-dessus, il y a été mentionné différentes tailles de largeur comme condition pour que trois règles multimédias différentes pour exécuter en conséquence. Par exemple, conformément au code ci-dessus, lorsque la largeur minimale sera de 700px, la couleur d'arrière-plan du texte passera en jaune.

Ce qui suit sera le résultat généré via le code ci-dessus. La modification de la taille de l'écran modifiera les couleurs d'arrière-plan du texte:

Quelle est la règle de Font-Face dans CSS?

La règle FontFace est une méthode facile pour ajouter des styles de police directement à la page Web. Les polices sont directement téléchargées et appliquées au texte via cette règle.

Exemple: application de la règle de Font-Face

Comprenons la méthode pour ajouter le "@ Font-Face”Règle à travers un exemple simple:

Bienvenue sur le tutoriel LinuxHint!

L'extrait de code ci-dessus a le même titre de texte que celui décrit dans la section précédente de cet article.

Implémentez le «@ Font-Face«Règle pour le«

«Se diriger pour changer sa police:

@ FONT-FACE
Font-Family: "Dejavu Sans";
SRC: URL ("./ polices / dejavusans.ttf ") format (" ttf ");
Police-poids: 500;

H1
Font-Family: «Dejavu Sans»;
Police-poids: 500;

Dans l'extrait de code ci-dessus, il y a le nom de la famille des polices qui est requis, puis «URL”Lien d'où la police est censée être téléchargée, puis le poids de la police. Lorsque la face de la police est spécifiée via le «@ Font-Face«Règle, le nom de la face de la police peut être utilisé avec n'importe quel élément, comme dans ce code, il a été utilisé pour le«H1"En tête.

L'exécution de ce code modifiera la police en fonction des instructions mentionnées dans le «@ Font-Face" règle. Ce qui suit sera la sortie de l'extrait de code ci-dessus:

Cela résume le but du «@”Symbole dans CSS.

Conclusion

Le "@"Le symbole dans CSS est utilisé pour ajouter"aux règles"Dans CSS. Ces règles effectuent des tâches très utiles tout en utilisant CSS pour styliser les documents i.e. Ils importent des feuilles de style entières à partir d'un autre fichier CSS via le «@importer"Règle, appliquez les propriétés CSS sur les médias définis selon les conditions à travers"@médias"Règle et télécharge directement des polices à utiliser dans la page Web via"@ Font-Face" règle.