Il existe deux règles de syntaxe incluses dans CSS :
Règles ordinaires : composées de sélecteurs, d'attributs et de valeurs, nous avons principalement utilisé ce type de règles dans des études précédentes ;
@Rule : Elle commence par @ et est suivie d'un mot-clé. Elle est également appelée « règle AT ». Elle peut être divisée en « règle régulière » et « règle imbriquée » selon les différentes méthodes d'utilisation.
Introduisons principalement la règle @ en CSS.
1. Règles générales
Les règles dites « régulières » font référence à des règles dont la syntaxe est similaire à la suivante :
@[MOT CLÉ](RÈGLE);
(1) @charset
@charset est utilisé pour définir le codage des caractères utilisé dans les fichiers CSS. Le format de syntaxe est le suivant :
@charset<jeu de caractères> ;
Parmi eux, <charset> est le codage de caractères spécifique et la valeur par défaut est "utf-8".
Vous devez faire attention aux points suivants lors de son utilisation :
① Si @charset est défini, il doit apparaître au début du fichier CSS et aucun caractère ne peut apparaître avant @charset ;
②Le codage des caractères doit être placé entre guillemets doubles ;
③ Un espace doit être utilisé pour séparer le nom @rule (@charset) et l'encodage de caractères spécifique ;
④Le point-virgule après la règle ne peut pas être omis ;
⑤Si plusieurs @charsets sont définis, seule la première instruction est valide ;
⑥@charset ne peut pas être utilisé dans les éléments HTML ou les balises <style> ;
⑦Si plusieurs règles de codage de caractères sont définies de différentes manières, leur ordre de priorité est le suivant :
● Déclaration d'encodage des caractères au début du fichier HTML ;
●Déclaration de codage de caractères dans l'en-tête de la requête HTTP ;
●La déclaration d'encodage de caractères définie par @charset est utilisée dans le fichier CSS ;
●La déclaration de codage de caractères définie par l'attribut charset dans la balise <link> (obsolète en HTML5).
L'exemple suivant montre l'utilisation de @charset, ainsi que plusieurs exemples d'erreurs :
/*Définissez le format d'encodage CSS sur UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*Insensible à la casse*//*Démonstration d'erreur*/@charset'iso-8859-15';/*Invalide Oui, de mauvais guillemets ont été utilisés */@charset'UTF-8' ; /*Invalide, des guillemets incorrects sont utilisés*/@charsetUTF-8;/*Invalide, un espace supplémentaire est utilisé entre @charset et l'encodage des caractères*/@charsetUTF-8;/*Invalide, il y a trop de règles @ avant Un espace*/@charsetUTF-8;/*Invalide, l'encodage des caractères doit être placé entre guillemets doubles*/
(2) @importer
@import est utilisé pour importer d'autres fichiers de style dans le fichier de style CSS actuel. Tout le contenu, à l'exception de @charset, dans d'autres fichiers de feuille de style peut être introduit via @import. De plus, @import doit également être placé au début du fichier de style. Le format de syntaxe de @import est le suivant :
@import<url><media_query_list>
Parmi eux, <url> est le chemin du fichier de feuille de style externe à importer en utilisant un chemin absolu ou relatif. Vous pouvez également utiliser la fonction url() pour spécifier le chemin du fichier ; <media_query_list> est un paramètre facultatif, utilisé pour spécifier le chemin du fichier. conditions de la requête multimédia. Utilisez des virgules pour séparer plusieurs conditions.
Dans les projets réels, il n'est pas recommandé d'utiliser trop @import, car cela entraînerait beaucoup de requêtes supplémentaires et bloquerait le chargement d'autres fichiers.
Lorsque vous utilisez @import, vous devez également faire attention aux points suivants :
●@import doit être déclaré en premier au début du fichier de feuille de style et la déclaration doit se terminer par un point-virgule. Si le point-virgule final est omis, la feuille de style externe risque de ne pas être importée correctement ;
●L'utilisation de @import dans le navigateur IE ne peut introduire que jusqu'à 35 feuilles de style.
L'exemple suivant illustre l'utilisation de @import :
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bleuâtre.css)projection,tv;@import'cust om.css';@importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);Les méthodes de définition ci-dessus sont toutes valides lors de l'utilisation de url() pour définir le chemin du fichier de feuille de style, les guillemets du chemin d'habillage sont facultatifs lors de l'utilisation d'un chemin spécifique pour définir directement le chemin du fichier de feuille de style ; le chemin de retour à la ligne des guillemets doit être conservé.
(3)@espace de noms
@namespace est utilisé pour définir la règle @ de l'espace de noms XML dans la feuille de style CSS. Il peut définir l'espace de noms spécifié pour tous les sélecteurs dans le fichier de style actuel. @namespace est généralement utilisé pour gérer des documents contenant plusieurs espaces de noms, tels que SVG en ligne en HTML5, MathML ou XML mélangés à plusieurs vocabulaires.
@namespace doit être défini après tout @charset et @import, et avant toute autre déclaration de style dans la feuille de style. @namespace peut être utilisé pour définir un espace de noms par défaut lorsque l'espace de noms par défaut est spécifié, tous les sélecteurs universels et sélecteurs de classe (mais pas les sélecteurs d'attributs) ne seront appliqués qu'aux éléments de cet espace de noms. @namespace peut également être utilisé pour définir un préfixe d'espace de noms Lorsqu'un sélecteur général, de classe ou d'attribut est précédé d'un préfixe d'espace de noms, ce sélecteur correspondra uniquement aux éléments dont l'espace de noms correspond au nom ou à l'attribut de l'élément.
L'exemple suivant illustre l'utilisation de @namespace :
/*Espace de noms par défaut*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*Préfixe d'espace de noms*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. Règles imbriquées
Les "règles imbriquées" signifient que la règle @ doit être suivie d'une accolade { }, qui contient d'autres déclarations de règles, similaires à celles-ci :
@[KEYWORD]{/*Instructions imbriquées*/}(1)@médias
@media est utilisé pour appliquer une certaine partie de la feuille de style (informations de style entre accolades) en fonction des résultats d'une ou plusieurs requêtes multimédias. En utilisant @media, vous pouvez spécifier un ensemble de requêtes multimédias et un bloc de style CSS si et seulement. si le média Les styles CSS spécifiés ne sont appliqués au document que lorsque la requête correspond au périphérique utilisé.
La requête multimédia est un ensemble de conditions utilisées pour déterminer les informations sur le périphérique, telles que la valeur de largeur et de hauteur du périphérique, le rapport hauteur/largeur, la couleur, la résolution, etc. Lorsque les conditions correspondent, les informations de style imbriquées seront exécutées.
@media peut être placé n'importe où dans la feuille de style ou dans d'autres règles @. L'exemple de code est le suivant :
@mediaalland(min-width:1280px){/*largeur supérieure à 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){/*Écran Retina*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@page
@page est utilisé pour modifier certaines propriétés CSS lors de l'impression d'un document. Il convient de noter qu'en utilisant @page, vous ne pouvez modifier que certaines propriétés CSS, telles que la marge de propriété d'espacement externe, les orphelins liés à l'impression, les propriétés Windows et le saut de page. -* propriétés, les autres propriétés CSS seront ignorées.
/*Indique que les marges supérieure et gauche de la première page lors de l'impression sont toutes deux de 50 %*/@page:first{margin-left:50%;margin-top:50%;}(3)@prend en charge
@supports est utilisé pour vérifier si le navigateur prend en charge une certaine fonctionnalité CSS, également appelée « requête de fonctionnalité ». La structure syntaxique de cette règle est la suivante :
@supports(rule)[operator(rule)]*{sRules};Parmi eux, la règle est un style CSS spécifique et doit être placée entre parenthèses ; les valeurs facultatives de l'opérateur sont ou, et, et non. Plusieurs styles CSS peuvent être spécifiés via le paramètre opérateur.
@supports peut être défini en haut d'un fichier de style ou dans d'autres règles imbriquées. Cependant, @supports est encore au stade expérimental. Avant de l'utiliser, vous devez d'abord confirmer si le navigateur le prend en charge.
L'exemple suivant illustre l'utilisation de @supports :
/*Style CSS à utiliser lorsque le navigateur prend en charge l'attribut display:grid*/@supports(display:grid){div{display:grid;}}/*CSS à utiliser lorsque le navigateur ne prend pas en charge l'attribut display:grid style d'attribut*/@supportsnot (display:grid){div{float:right;}}/*Vérifier plusieurs conditions en même temps*/@supports(display:flex)et(-webkit-apparence:checkbox){.module{display:flex;} }(4) @font-face
@font-face est utilisé pour charger la police spécifiée depuis le serveur distant ou l'utilisateur localement. Le format de syntaxe est le suivant :
@font-face{font-family:<identifiant>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}La description des paramètres est la suivante :
●<identifiant> : nom de la police ;
●<url> : utilisez url() (police distante) ou local() (police locale) pour spécifier le chemin de stockage de la police, qui peut être un chemin relatif ou un chemin absolu ;
●<string> : utilisé pour spécifier le format des polices personnalisées, telles que les types suivants : truetype, opentype,embedded-opentype, svg, etc. ;
●<font> : définissez les styles associés à la police.
Astuce : @font-face peut être placé en haut d'une feuille de style CSS ou dans d'autres règles imbriquées. Si vous utilisez à la fois la fonction local() et la fonction url() pour charger des polices, la police locale définie dans la fonction local() sera chargée en premier. Si elle n'est pas trouvée, la police distante définie dans la fonction url() le sera. chargé.
L'exemple suivant illustre l'utilisation de @font-face :
/*Définir les règles @font-face*/@font-face{/*Spécifiez le nom de la police*/font-family:OpenSans;/*Spécifiez le chemin d'accès au fichier de police*/src:url(/fonts/OpenSans-Regular -webfont.woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*Application de polices*/p{font-family:OpenSans;}(5) @images clés
@keyframes est utilisé pour définir le style des images clés d'animation (ou waypoints) en CSS3 afin de contrôler les étapes intermédiaires de la séquence d'animation. Après avoir défini cette règle, vous devez l'utiliser via l'attribut animation-name. Les séquences d'images clés sont nommées par pourcentages, les états de début et de fin étant de et jusqu'à représentant respectivement 0 % et 100 %.
Le format de syntaxe de @keyframes est le suivant :
@keyframes<identifiant>{<keyframes-blocks>}Parmi eux, <identi fier> est utilisé pour définir le nom de l'animation ; <keyframes-blocks> est utilisé pour définir le style de l'animation à chaque étape, c'est-à-dire l'animation d'image.
L'utilisation de @keyframes est démontrée dans l'exemple suivant :
/*Déclaration*/@keyframessslidein{de{margin-left:100%;width:300%;}à{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50 %{en haut : 30px;}100 %{top:60px;}}/*Apply*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s;}(6)@document
@document est utilisé pour limiter la portée des styles dans le document en fonction de l'URL du document. Cet attribut peut être utilisé pour définir des styles exclusifs pour les utilisateurs spécifiés. Actuellement, @document est encore au stade expérimental et les normes spécifiques seront déterminées dans CSS4.
Les fonctions disponibles dans @document sont les suivantes :
●url() : correspond à l'URL entière ;
●url-prefix() : indique si l'URL du document correspondant commence par la valeur spécifiée par le paramètre ;
●domain() : indique si le nom de domaine du document correspondant est le nom de domaine spécifié dans le paramètre ou son nom de sous-domaine ;
●regexp() : indique si l'URL du document correspondant correspond à l'expression régulière spécifiée dans le paramètre. L'expression doit correspondre à l'intégralité de l'URL.
Astuce : Les paramètres fournis aux fonctions url(), url-prefix() et domain() peuvent être placés sans guillemets, mais les paramètres fournis à la fonction regexp() doivent être placés entre guillemets.
L'exemple suivant illustre l'utilisation de @document :
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/* Cette règle CSS sera appliquée à la page web suivante :+L'URL est http:/ La page de /www.weixueyuan.net/. + Toute page Web dont l'URL commence par http://www.weixueyuan.net/Style/ + Toutes les pages Web sous le nom de domaine weixueyuan.net + Toute page Web dont l'URL commence par https :* // *Définir le style*/body{color:violet;background:jaune;}