Exemple 02 : Utilisation de la balise (X)HTML style

Le style appliqué à cette citation est déclaré dans l'en-tête de ce document, comme l'ensemble des exemples de ce cours.

Un autre exemple avec un paragraphe.

Explications :

Avec l'utilisation des balises <style> on intervient directement dans le document (X)HTML. C'est une balise (X)HTML et non plus un attribut qui permet en la plaçant dans l'en-tête du document, c'est-à-dire entre les balises <head> </head>, d'insérer du code CSS dans le fichier (X)HTML.

La balise <style> nécessite l'ajout d'un attribut type ayant comme valeur 'text/css', comme vous pouvez le constater ci-dessous. Cet attribut permet d'indiquer au navigateur le type de syntaxe inclus entre les balises <style>. La valeur à y indiquer pour faire comprendre au navigateur que c'est du CSS est 'text/css'. Cet attribut est nécessaire si vous voulez avoir un code (X)HTML valide.

Vous pouvez aussi remarquer que le code CSS à l'intérieur des balises <style> </style> est entouré de commentaires (X)HTML. Ces commentaires sont optionnels, ils ne sont donc pas nécessaires. Leur but est de masquer les règles CSS aux navigateurs qui ne les supportent pas : ces navigateurs vont ignorer le texte entre les commentaires (X)HTML. Au contraire les navigateurs pouvant interpréter les feuilles de style savent que le texte entre les balises <style> correspond à du code CSS qu'il faut interpréter malgré les commentaires (X)HTML.

Ce système est rapide à mettre en place. L'avantage est que le code s'applique à toute la page, mais c'est aussi son principal inconvénient en ce que le code ne s'applique qu'à cette page et qu'il faut donc le copier sur les autres pages.

C'est cette méthode qui est mise en place dans la plupart des pages d'exemple de ce cours parce que les différents styles de chaque exemple sont uniques et ne sont pas repris sur d'autres exemples.

Code XHTML et CSS :

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
38
<!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 02 : Utilisation de la balise (X)HTML style</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
blockquote p {
        color :            #ff4500;/* orangered */
        font :             italic 1.2em "Times New Roman", serif;
}
p {
        color :            #6a5acd;/* slateblue */
        font :             bold 1em Arial, sans-serif;
}
-->
</style>
</head>

<body>

<h1>
Exemple 02 : Utilisation de la balise (X)HTML style
</h1>

  <blockquote>
    <p>
Le style appliqué à cette citation est déclaré dans l'en-tête de ce document, comme l'ensemble des 
exemples de ce cours.
    </p>
  </blockquote>
  <p>
Un autre exemple avec un paragraphe.
  </p>

</body>
</html>

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.