eao.gif

MÉTHODE RAISONNÉE POUR ÉCRIRE AVEC UN ORDINATEUR

Site de l'auteur Plan Précédent Suivant



III Lier HTML et CSS

 

Les versions 4 et 4.1 du HTML acceptent au sein des balises des sélecteurs spécifiques pour les CSS. En voici un rapide aperçu.

 

L'attribut CLASS

Tout ce qui se trouve enfermé dans une paire de balises (<p></p>, <h1></h1>, <div></div>), ou est constitué par une seule (<img> image, <hr> trait horizontal) est appelé élément. Dans la feuille de style, nous attribuons à ces éléments des propriétés diverses. Il peut alors arriver que nous souhaitions donner des attributs supplémentaires à quelques occurrences seulement du même élément. Par exemple, nous voulons que les notes de bas de page soient affichées en caractères plus petits. Nous ferons alors une classe de paragraphe, c'est à dire que nous ajouterons à l'objet P la classe "note".

Nous l'écrirons ainsi dans la page HTML :

<p class="notes">... </p>

Et nous écrirons dans la feuille de style :

p.note {font-size: smaller}

Le texte qui se trouvera entre cette paire de balises aura tous les attributs des éléments p, avec seulement un corps plus petit.

 

Le sélecteur "class" peut être attribué à n'importe quel élément. Si nous voulons plutôt créer un bloc de navigation qui s'affiche dans la marge à gauche de notre texte, nous l'intégrerons dans la balise <div> :

Nous l'écrirons ainsi dans la page HTML :

<div class="navigation">... </div>

Et nous écrirons par exemple dans la feuille de style :

div.navigation {width: 100px; float: left}

 

Il peut même n'être attribué à aucun élément particulier. On écrira par exemple dans la feuille de style :

.important {text-color; red}

Et l'on écrira dans le fichier HTML :

<p class="important">... </p> <h4 class="important">... <h4>

etc.

 

Attention : Ne laisser aucun espace de part et d'autre du point dans la CSS.

 

Le sélecteur SPAN

Il peut arriver que nous souhaitions faire la même chose pour la seule partie d'un paragraphe, d'un titre, ou d'une liste. Nous pouvons alors utiliser la balise SPAN :

 

<p>Il peut arriver que nous souhaitions faire la m&egrav;me chose pour <span style="font-color: red"> une seule partie d'un paragraphe, d'un titres, ou d'un &ecute;l&ecute;ment de liste</span>. </p>

 

Utiliser plusieurs feuilles de style

De même qu'une feuille de style peut être utilisée pour plusieurs fichiers HTML, plusieurs CSS peuvent l'être aussi pour une seule page. L'une peut concerner le texte, une autre les liens, une troisième la mise en page.

Plusieurs feuilles de style peuvent être pratiques quand l'une s'applique à toutes les pages d'un site, par exemple, l'autre à quelques dossiers, une troisième à quelques pages seulement.



Site de l'auteur Plan Précédent Suivant



© Jean-Pierre Depétris, 2002