Maison > interface Web > tutoriel CSS > Explication détaillée de l'utilisation de @ en CSS

Explication détaillée de l'utilisation de @ en CSS

Guanhui
Libérer: 2020-07-21 12:54:00
avant
3773 Les gens l'ont consulté

Explication détaillée de l'utilisation de @ en CSS

at-rule est une instruction qui fournit des instructions permettant à CSS de s'exécuter ou de se comporter. Chaque déclaration commence par @, suivi d'un mot-clé disponible, qui fait office d'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 suivante :

Le code est le suivant :

@[KEYWORD] (RULE);
Copier après la connexion

@ 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-ASCII (ex : UTF-8). Notez que le jeu de caractères placé dans l'en-tête HTTP remplacera la règle @charset

par le code suivant :

@charset "UTF-8";
Copier après la connexion

@import
Cette règle indique la requête stylesheet , dans cette ligne, si le contenu est correct, un fichier CSS externe sera introduit.

Le code est le suivant :

@import 'global.css';
Copier après la connexion

Bien que les préprocesseurs CSS populaires prennent en charge @import, il convient de noter qu'ils fonctionnent différemment du CSS natif : le préprocesseur explorera les fichiers CSS et les traitera dans un Fichier CSS. Pour le CSS natif, chaque @import est une requête HTTP distincte.
@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 dans l'utilisation du CSS.

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);
Copier après la connexion

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 pour des conditions spécifiques. .

Le code est le suivant :

@[KEYWORD] {
/* Nested Statements */
}
Copier après la connexion

@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 :

@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; }
}
Copier après la connexion

@font-face
Cette règle permet de charger des polices personnalisées sur des pages Web, avec différents degrés de prise en charge des polices personnalisées , mais cette règle accepte les instructions pour créer et fournir ces polices.

Le code est le suivant :

 @font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
Copier après la connexion

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

Le code est le suivant :

 @keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}
Copier après la connexion

@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. la taille de l'écran, le cas échéant. Cela sera très utile dans le style d'écran

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%; }
}
Copier après la connexion

Ou n'utilisez le style

que lorsque le document est. imprimé Le code est le suivant :

@media print {
}
Copier après la connexion

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

Le code est le suivant :

@page :first {
margin: 1in;
}
Copier après la connexion

@supports
ces règles testent si le navigateur connaît une caractéristique/fonctionnalité et, si les conditions sont remplies, appliquent des styles spécifiques à ces éléments. Un peu comme Modernizr, mais vraiment des propriétés CSS.

Le code est le suivant :

/* Check one supported condition */
@supports (display: flex) {
.module { display: flex; }
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}
Copier après la connexion

Résumé

at-rule 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.

Tutoriel recommandé : "Tutoriel CSS"

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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal