Tel: 06 71 50 20 17 Email: info@cmbp.info

Tutoriel

Accueil / Tutoriels / Web / Client

C.S.S.

Cascading Style Sheets

Par

Tutoriel CSS Accéléré - 4 ème partie

Dans cette leçon vous apprendrez...
  1. à comprendre la différence entre un div et un span.
  2. à associer des styles aux divs et aux spans.
  3. à utiliser judicieusement le div ou le span selon le contexte.

<div> et <span>

Les balises div et span sont utilisées en conjonction avec les feuilles de style CSS .

Quand utiliser un div ou un span ?

Les balises div et span font très peu de choses par elles-mêmes: <span> n'a aucune conséquence visuelle, tandis que <div> crèe un bloc de contenu (comme un <p>).

Comme la plupart des balises, <div> et <span> peuvent prendre les attributs class, id ou style.

C'est au travers de ces attributs que les styles seront appliqués au contenu de ces balises.
On peut naturellement imbriquer les div et les span, comme toute autre balise html.

Exemple de Code: /Demos/Div_Span_01.html

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div et Span</title>
</head>
<body>
<div style="position:absolute; left:0px; top:0px; 
 font-family:Verdana; font-size:10pt;
 border-style:groove; border-width:30px; border-color:blue; padding:4px">
Ce texte est affiché dans le coin  
 <span style="font-style:italic; color:red">supérieur gauche</span>
 de la page.<br /> Et possède une bordure d'un goût discutable.
</div>
</body>
</html>
Explication du Code

Cette page sera affichée comme suit :

  • div permet de définir un bloc (taille et position)
  • span délimite un texte en ligne

Exo: Divs et Spans

Durée: 10 à 20 minutes.

L'exercice consiste à reproduire l'écran ci-après, en utilisant les div et les span :

note : vous pouvez utiliser les codes couleurs black, yellow, red, green et orange.