Quel est le rôle de @ en CSS ?

En CSS, "@" est une instruction qui fournit des instructions pour l'exécution du CSS ou comment se comporter. Chaque déclaration de règle commence par "@", suivi d'un mot-clé disponible, qui fait office d'identifiant pour indiquer ce que CSS doit faire. Par exemple, la règle "@charset" définit le jeu de caractères utilisé par le navigateur, le "@font-" ; La règle "face" permet de charger des polices personnalisées sur les pages Web.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3. Il existe depuis l'ère

@ 在 CSS1 中的 @import et s'appelle at-rules en CSS.

at-rule est une déclaration qui fournit des instructions permettant à CSS de s'exécuter ou de se comporter. Chaque déclaration de règle commence par @, suivi d'un mot-clé disponible, qui agit comme un identifiant pour indiquer ce que le CSS doit faire. Il s'agit d'une syntaxe générale, bien qu'il existe d'autres variantes syntaxiques pour chaque règle at.

Règles générales

Les règles générales suivent la syntaxe ci-dessous :

Le code est le suivant :

@[KEYWORD] (RULE);

@charset

Cette règle définit le jeu de caractères utilisé par le navigateur si la feuille de style contient des caractères non- Caractères ASCII (par exemple : UTF-8). Notez que le jeu de caractères placé dans l'en-tête HTTP remplacera la règle @charset. Le code est le suivant : Introduisez un fichier CSS externe.

Le code est le suivant :

@charset "UTF-8";

Bien que les préprocesseurs CSS populaires prennent tous en charge @import, il convient de noter qu'ils fonctionnent différemment du CSS natif : le préprocesseur récupère les fichiers CSS et les traite dans des fichiers CSS, pour le CSS natif, chaque @import est une requête HTTP indépendante.

@namespace

Cette règle est très utile pour appliquer du CSS au XML HTML (XHTML), car l'élément XHTML peut être utilisé comme sélecteur en CSS.

Le code est le suivant :

@import 'global.css';

Règles imbriquées

Les règles imbriquées contiennent des déclarations de sous-ensembles supplémentaires, dont certaines ne peuvent être utilisées que dans des situations spécifiques.

Le code est le suivant :

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

@document

Cette règle précise les conditions de la feuille de style : elle ne peut s'appliquer qu'à des pages spécifiques. Par exemple, nous fournissons une URL puis personnalisons les styles pour cette page spécifique. Dans les autres pages, ces styles seront ignorés.

Le code est le suivant :

@[KEYWORD] {
/* Nested Statements */
}

@font-face

Cette règle permet de charger des polices personnalisées sur les pages Web. Il existe différents degrés de prise en charge des polices personnalisées, mais cette règle accepte les instructions pour créer et servir ces polices. .

Le code est le suivant :

@document
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}

@keyframes

Parmi de nombreuses propriétés CSS, cette règle est à la base de l'animation par images clés et nous permet de marquer le début et la fin de l'animation.

Le code est le suivant :

 @font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}

@media

Cette règle contient des déclarations conditionnelles qui peuvent être utilisées pour spécifier des styles pour des écrans spécifiques. Ces déclarations peuvent inclure des tailles d'écran, ce qui sera utile dans les styles adaptatifs à l'écran.

Le code est le suivant :

 @keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}

Ou appliquez simplement le style lorsque le document est impriméLe code est le suivant :

 /* iPhone in Portrait and Landscape */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}

@page

Cette règle définit le style des pages individuelles qui seront imprimé. Il peut notamment définir des marges pour les pseudo-éléments de la page : :first, :left et :right

Le code est le suivant :

@media print {
}

@supports

Cette règle permet de tester si le navigateur sait s'il supporte un Certaines caractéristiques/fonctions, des styles spécifiques seront appliqués à ces éléments si les conditions sont remplies. Un peu comme Modernizr, mais vraiment des propriétés CSS.

Le code est le suivant :

@page :first {
margin: 1in;
}

Résumé

en règle générale, cela peut amener CSS à faire des choses folles et intéressantes. Bien que les exemples de l'article soient basiques, vous pouvez voir comment ils peuvent être utilisés dans des conditions spécifiques afin de créer des expériences utilisateur et des interactions adaptées à des scénarios spécifiques.

(Partage de vidéos d'apprentissage : web front-end)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!