Tutorial HTML (styles)

Les styles:

La mode et la norme veulent que dorénavant, on tende à distinguer dans les pages HTML le fond de la forme. On regroupera tout ce qui est forme dans des feuilles de style, communes à toutes les pages d'un même site. Ceci évite donc des répétitions dans et entre les pages. Par exemple, si vous voulez que tous vos paragraphes soient justifiés et indentés, au lieu d'écrire à chaque paragraphe:
<P align="justify" indent="5%">
on définira un style par défaut pour P, qu'on écrira dans l'en-tête du fichier HTML, ou dans un fichier à part qu'on inclura dans l'en-tête. Par exemple:
<HEAD> <TITLE>Ma page HTML</TITLE> <style>  </style> </HEAD> Cette commande de style modifie la commande P pour toute la page.

Si on ne veut pas que le texte soit indenté mais qu'il reste justifié pour certains paragraphes, on surchargera le style P ainsi:
<style>  </style> Et on écrira à l'utilisation:
<P>paragraphe justifié et indenté<P> <P class="N">paragraphe justifié seulement<P>

Les styles sont dans un autre langage que HTML: le CSS, qui est un langage objet (on peut surcharger des styles, les faire hériter, écrire des méthodes...).
C'est pour ça qu'on encadre ces ordres par des commentaires, au cas (peu probable) où votre navigateur ne connaîtrait pas ce langage.

De nombreuses commandes HTML acceptent aussi l'attribut "style=". Par exemple, on aurait pu écrire:
<P style="text-align: justify; text-indent: 0">paragraphe justifié seulement<P>

Attention, lorsque vous définissez un style d'alignement, l'attribut ALIGN ne fonctionnera plus. Il faut employer un autre style pour annuler. Exemple:
<style>  </style> Pour annuler la justification d'un paragraphe particulier, il ne faut pas écrire, :
<P align="left">ce paragraphe ne voudra pas s'aligner à gauche<P> mais:
<P style="text-align: left">paragraphe aligné à gauche<P> ou bien, ici:
<P class="L">paragraphe aligné à gauche<P> La règle générale veut qu'un style prime sur l'attribut HTML correspondant.

Autre exemple sur l'utilité des styles: gestion de vos photos sur votre ordinateur, où votre page contient une série d'imagettes affichées toutes avec la même taille: l'utilisation d'un style permet de mettre en facteur cette taille:
<html> <head> <title>Trombinoscope</title> <style>  </style> <body> <img src="rimbaud.jpg" alt="Arthur RIMBAUD"> <img src="hugo.jpg" alt="Victor HUGO"> <img src="baudel.jpg" alt="Charles BAUDELAIRE"> etc... </body> </html>

Autre exemple de style, concernant les listes:
ul.toto li {margin-top: .5em}
signifie que les rubriques <LI> seront plus espacées entre elles (d'une demi-ligne), si elles sont comprises (même indirectement) dans un bloc <UL class="toto">.

Autre exemple avec un tableau, ou une grille de sudoku (ou sa solution).

De manière générale, lorsqu'on a:
A B C {style xxx...}
ce style concerne la balise C lorsqu'elle est imbriquée dans B et que B est imbriquée dans A. Et si on a:
A,B,C {style xxx...}
ce style concerne les balises A, B et C. Et si on a:
A.toto {style xxx...}
ce style concerne la balise A avec l'attribut class="toto". Et si on a:
.toto {style xxx...}
ce style concerne n'importe quelle balise avec l'attribut class="toto". Et si on a:
#toto {style xxx...}
ce style concerne n'importe quelle balise avec l'attribut id="toto".
A:truc {style xxx...}
c'est un pseudo-style truc qui concerne la balise A.
A.toto:truc {style xxx...}
c'est un pseudo-style truc qui concerne la balise A avec class="toto".

Exemple de pseudo-style (pas reconnu partout, celui-ci est du CSS2):
a:hover {color: red}
tous les liens se colorent en rouge lorsqu'on les survole.
Peut être utile pour distinguer les liens externes et les liens internes dans un site, comme par exemple le mien (le but étant d'avertir discrètement qu'on va quitter le site):
a.extern:hover {background-color: white}
Ce qui donne:
Voici un <a href="html.htm">lien interne</a>, et un <a href="http://www.google.fr" class="extern">lien externe</a>.
Voici un lien interne, et un lien externe.

Comme je disais plus haut, on regroupe ces styles dans des fichiers, d'extension .css, et dans l'en-tête du HTML on écrit un lien vers ces fichiers de la façon suivante:
<link rel=stylesheet href="style/style.css"> (à regarder avec Wordpad)
ce qui permet de mettre en facteur les styles de toutes les pages de votre site dans un seul fichier.
Voyez l'effet de cette dernière feuille de style; copier-coller ci-dessous et sauvez-le dans un fichier toto.htm :
<HTML> <HEAD> <TITLE>Essai CSS1</TITLE> <link rel=stylesheet href="http://perso.libertysurf.fr/eric.hurtebis/style/style.css"> </HEAD> <BODY> <h1>Bonjour</h1> <P>Ceci est un <a href="http://www.sncf.fr">lien</a>, qu'il ne faut pas confondre avec <em>une ficelle</em>, et encore moins avec <strong>une corde</strong>. Mais oui, le texte est bien justifié, faites varier la taille de la fenêtre...</P> <P class="cadre">Quant à ce très grand paragraphe, il devrait être encadré en rouge, car la classe "cadre" a été définie ainsi pour la balise P.</P> <h3>Recette:</h3> <ul> <li>farine</li> <li>eau</li> <li>et au choix:</li> <ul>  <li>sucre en morceaux</li> <li>sucre en poudre</li> </ul> </ul> <SPAN id="urgent">The end.</SPAN> </BODY> </HTML>

Les styles permettent aussi de positionner du texte. On peut ainsi récrire du texte par-dessus un autre, par un mécanisme de "calques" (layers) introduit par une balise neutre comme DIV ou SPAN. Il faut tâtonner pour trouver les positions relatives et absolues des uns et des autres, et entre les 2 principaux différents navigateurs...

Le premier position:relative est nécessaire pour que les coordonnées des position:absolute imbriqués après soient absolues non pas par rapport à la page, mais au premier calque.

<div style="font-family: cursive; font-size: 3em; font-weight: 900; color: red; position:relative; top:8; left:8"> Marley <div style="color: yellow; position: absolute; top:-4; left:-4"> Marley <div style="color: green; position: absolute; top:-4; left:-4"> Marley </div></div></div>

Marley

La combinaison de DIV et STYLE permet de faire des belles choses, par exemple aussi une zone de texte ou une image dans votre page qu'on déroule avec des barres de défilement (overflow:auto ou overflow:scroll). Par exemple:

<div align=left
  style="width:200px;height:100px;overflow:auto;
         border:solid 1px gray;background-color:#fff;">
  texte bla bla bla texte bla bla bla 
  texte bla bla bla texte bla bla bla
  <img src="images/a09.jpg">
</div>

texte bla bla bla texte bla bla bla texte bla bla bla texte bla bla bla

Attention, DIV ne marche pas sur les vieux Netscape; il faut utiliser LAYER.

Pour les images, on peut utiliser le style "float", équivalent de ALIGN (voir page précédente), et le style "clear" pour que le texte arrête de s'enrouler autour de l'image et reprenne après. L'avantage est la possibilité de ne mettre (enfin!) une marge que du côté de l'image où il y a le texte (ce qui fait que l'autre bord de l'image est bien aligné avec le bord de la fenêtre). Toutefois, ces styles ne marchent pas bien avec tous les navigateurs (par exemple Netscape 4.5). Cliquez sur l'exemple qui utilise les styles et visualisez le source.

Si vous voulez, l'aide sur le langage CSS1 est disponible sur les sites d'aide HTML mentionnés à la page précédente, par exemple www.w3c.org/Style/CSS; vous pouvez aussi télédécharger l'aide Windows depuis mon site, ou avoir une traduction française...

Il y a aussi le style CSS2. Plus compliqué que CSS1 (et compatible), il permet de faire encore plus de choses. Par contre, il n'est reconnu que par les navigateurs récents (et donc finalement bigrement déconseillé). Vous pouvez tester le vôtre avec cette page.

Mais rassurez-vous, personne peut vous obliger à employer des styles. En effet, les navigateurs devant toujours rester compatibles au fil des versions, une bonne vieille page rédigée en pur HTML marchera toujours... Les menaces de Deprecated dans les docs HTML (au profit des styles) ne doivent pas vous faire peur.

Retour

Mise à jour: