Exemple 01 : Utilisation de l'attribut (X)HTML style

Voici un conteneur div stylisé grâce à l'attribut XHTML style.

Cependant si vous voulez répéter cette présentation, il faut copier le style dans tous les éléments auxquels vous voulez appliquer ce style...

Un autre paragraphe sans attribut style ne se verra pas appliquer ce style.

Un autre exemple...

Explications :

Cette méthode intervient directement dans le document (X)HTML. On insère dans la balise (X)HTML souhaitée, via l'attribut style, les déclarations que l'on veut voir appliquer à cette balise. Cet attribut style ne prend donc comme valeur que des déclarations (c'est-à-dire le couple : propriété: valeur).

On aborde là des notions (X)HTML, l'attribut style étant une propriété (X)HTML et non CSS. En particulier, l'attribut style est séparé du contenu de sa valeur par le caractère égal (et non par le caractère deux-points comme en CSS). Par contre la valeur en elle-même de cet attribut, c'est-à-dire la ou les déclarations, répondent aux règles du vocabulaire CSS.

Cette méthode a l'avantage d'être rapide à mettre en oeuvre. Il faut cependant limiter son usage à des interventions ponctuelles, pour effectuer des tests par exemple. Cette méthode ne doit en effet, en aucun cas, être la syntaxe principale, car elle empêche de tirer avantage de tout le potentiel du CSS : en particulier l'utilisation de l'attribut (X)HTML style nécessite de déclarer les règle pour chaque élément auquel vous voulez voir le style appliqué.

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
<!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 01 : Utilisation de l'attribut (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" />
</head>

<body>

<h1>
Exemple 01 : Utilisation de l'attribut (X)HTML style
</h1>

  <p style="background-color:#add8e6;border:1px dashed red;padding:2px;">
Voici un conteneur div stylisé grâce à l'attribut XHTML style.
  </p>
  <p style="background-color:#add8e6;border:1px dashed red;padding:2px;">
Cependant si vous voulez répéter cette présentation, il faut copier le style dans tous les éléments 
auxquels vous voulez appliquer ce style...
  </p>
  <p>
Un autre paragraphe sans attribut style ne se verra pas appliquer ce style.
  </p>
  <div style="font-size:1.2em;width:70%;letter-spacing:1em;font-style:italic;">
Un autre exemple...
  </div>

</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.