Exemple 10 : Utilisation de la règle @import valide associée à la règle @charset dans un fichier CSS externe

Règles valides : le style s'applique.

Explications :

La règle @import peut être insérée soit directement dans tout fichier (X)HTML, entre les balises <style> </style>, soit dans tout fichier CSS. Dans les deux cas la règle @import doit être la première règle déclarée, seule la règle @charset ou une autre règle @import peut être déclarée avant.

Vous pouvez constater que dans cet exemple l'ensemble du style est appliqué : la règle se trouvant dans le second fichier CSS externe, appelé depuis le premier, s'applique malgré le fait que la règle @import ne soit pas la première règle dans le code CSS, en effet la règle @charset est la seule à pourvoir valablement se trouver avant la règle @import.

Code XHTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 10 : Utilisation de la règle @import valide associée à la règle @charset dans un 
fichier CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style1-ex10.css" type="text/css" rel="stylesheet" />
</head>

<body>

<h1>
Exemple 10 : Utilisation de la règle @import valide associée à la règle @charset dans un fichier 
CSS externe
</h1>

  <h2>
Règles valides : le style s'applique.
  </h2>
  <ul>
    <li>
Voici une liste non ordonnée : ses éléments sont gérés par deux règles différentes. La première est 
introduite par une règle se trouvant dans un fichier CSS externe ; la seconde est introduite par une 
règle @import déclarée  après une règle @charset mais avant la première règle dans ce fichier CSS externe.
    </li>
    <li>
La première règle attribut le type de puce 'square' (carré) et la couleur d'arrière plan gold.
    </li>
    <li>
La seconde règle attribut des marges de 50px entre chaque élément de liste ainsi qu'une couleur de police 
indigo. Le titre h2 se voit aussi attribuer le style souligné.
    </li>
  </ul>

</body>
</html>

Code CSS fichier 1 :


2
3
4
5
6
7
@charset "ISO-8859-15";
@import url("style2-ex10.css");

ul li {
        list-style-type :  square;
        background-color : #ffd700;/* gold */
}

Code CSS fichier 2 :


2
3
4
5
6
7
8
h2 {
        text-decoration :  underline;

}
ul li {
        margin :           50px 0;
        color :            #4b0082;/* indigo */
}

Valid XHTML 1.0 Strict CSS Valide !

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.