Les règles CSS - @ Rules
La règle @import:
La règle @import vous permet d'importer des styles à partir d'une autre feuille de style. Il devrait apparaître juste au début de la feuille de style avant l'une des règles, et sa valeur est une URL.
Il peut être écrit de l'une des deux façons suivantes -
<style tyle="text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......Autres règles de style .....
-->
</style>
L'importance
de la règle @import, c'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 partout 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 caractère la feuille de style est écrite.
La
règle @charset doit être écrite au début de la feuille de style sans même un
espace avant. La valeur est maintenue entre guillemets et doit être l'un des
jeux de caractères standard. Par exemple –
<style tyle="text/css">
<!--
@charset "iso-8859-1"
....... Autres règles CSS.....
-->
</style>
La règle @
font-face :
La
règle @ font-face est utilisée pour décrire de façon exhaustive un visage de
police à utiliser dans un document. @ Font-face peut également être utilisé
pour définir l'emplacement d'une police pour le téléchargement, bien que cela
peut se produire dans des limites spécifiques à la mise en œuvre.
En
général, @ font-face est extrêmement compliqué, et son utilisation n'est recommandée
pour aucun, sauf ceux qui sont experts en métriques de police.
Voici un exemple –
<style tyle="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 : !important
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 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 de paragraphe sera noir,
même si la première propriété de style appliquée est rouge:
<style tyle="text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>
Donc,
si vous voulez vous assurer qu'une propriété est toujours appliquée, vous devez
ajouter la propriété! Important à la balise. Donc, pour rendre le texte du
paragraphe toujours rouge, vous devriez l'écrire comme suit –
<html>
<head>
<style tyle="text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Monsite.com</>
</body>
</html>
Ici
vous avez fait p {color: # ff0000! Important; } Obligatoire, 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 –
Monsite.com
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment