CSS - @ Règles

Ce chapitre couvrira les règles @ importantes suivantes -

le @import: règle importe une autre feuille de style dans la feuille de style courante.
le @charset règle indique le jeu de caractères utilisé par la feuille de style.
le @font-face règle est utilisée pour décrire de manière exhaustive une police à utiliser dans un document.
le !important règle indique qu'une règle définie par l'utilisateur doit avoir la priorité sur les feuilles de style de l'auteur.

NOTE - Il existe d'autres règles @ que nous aborderons dans les chapitres suivants.

La règle @import

La règle @import vous permet d'importer des styles à partir d'une autre feuille de style. Il doit apparaître juste au début de la feuille de style avant toute règle et sa valeur est une URL.

Il peut être écrit de l'une des deux manières suivantes -

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

L'intérêt de la règle @import est qu'elle vous permet de développer vos feuilles de style avec une approche modulaire. Vous pouvez créer différentes feuilles de style et les inclure là où vous en avez besoin.

La règle @charset

Si vous écrivez votre document à l'aide d'un jeu de caractères autre que ASCII ou ISO-8859-1, vous pouvez définir la règle @charset en haut de votre feuille de style pour indiquer dans quel jeu de caractères la feuille de style est écrite.

La règle @charset doit être écrite juste au début de la feuille de style sans même un espace devant elle. La valeur est placée entre guillemets et doit être l'un des jeux de caractères standard. Par exemple -

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

La règle @ font-face

La règle @ font-face est utilisée pour décrire de manière exhaustive une police à utiliser dans un document. @ font-face peut également être utilisé pour définir l'emplacement d'une police à télécharger, bien que cela puisse rencontrer des limites spécifiques à l'implémentation.

En général, @ font-face est extrêmement compliqué et son utilisation n'est recommandée à personne, sauf à ceux qui sont experts en métriques de polices.

Voici un exemple -

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

La! Règle importante

Feuilles de style en cascade. Cela signifie que les styles sont appliqués dans le même ordre qu'ils sont lus par le navigateur. Le premier style est appliqué, puis le second et ainsi de suite.

La règle! Important fournit un moyen de rendre votre CSS en cascade. Il comprend également les règles qui doivent toujours être appliquées. Une règle ayant une propriété! Important sera toujours appliquée, peu importe où cette règle apparaît dans le document CSS.

Par exemple, dans la feuille de style suivante, le texte du paragraphe sera noir, même si la première propriété de style appliquée est rouge:

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

Donc, si vous vouliez vous assurer qu'une propriété s'applique toujours, vous ajouteriez la propriété! Important à la balise. Donc, pour que le texte du paragraphe soit toujours rouge, vous devez l'écrire comme suit -

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Ici vous avez rendu p {color: # ff0000! Important; } obligatoire, maintenant cette règle s'appliquera toujours même si vous avez défini une autre règle p {color: # 000000; }

Il produira le résultat suivant -