Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Des id et des class

Des id et des class

 div, id et class

Une « div » est une « boite » ou plutôt un élément HTML composé de deux balises (ouvrantes et fermantes) englobant un contenu. Exemple simple : <div> un texte </div>.

La balise ouvrante est <div>, la balise fermante est </div>

On peut avoir envie de préciser les caractéristiques du texte : sa taille, sa couleur, sa position, etc. Dans ce cas on utilise ...id ... et ... class

Les id et les class servent à définir la présentation d’un texte. Par exemple on peut avoir une « boite » div comme ceci :

<div id="machin" class="toto"> un texte </div>

avec, dans la feuille css :

#machin{
text-align: center;
padding-top: 15px;
border : 1px solid #0033FF
}
et  
.toto {
color: #FF00FF;
}

alors le texte sera centré dans la boite, sa couleur sera FF00FF (c’est-à-dire violet) et il y aura une marge de 15 px en haut et un cadre de couleur bleue . Comme ceci

le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte le texte

C’est la même chose que si on écrivait ceci :

<div style="text-align: center; padding-top: 15px; border : 1px solid #0033FF; color: #FF00FF;"> le texte  le t....</div>

.

Alors pourquoi ? Parce qu’il est recommandé de séparer la mise en forme du contenu.

 Un seul id

Dans une page html, on doit trouver une seule fois id=« machin ».
Mais rien n’empêche d’inventer : id=« machin1 » ou autre chose par exemple id=« contenu-article » id=« contenu_breve » etc.

id joue aussi le rôle d’ancre, par exemple si on a id=« contenu » et id=« liste » dans l’article 15 :

-en faisant http://www.mon-site-a-moi.fr/spip.php?article15 ... on ouvre l'article 15
-en faisant http://www.mon-site-a-moi.fr/spip.php?article15#contenu ... on arrive directement au contenu.
-en faisant http://www.mon-site-a-moi.fr/spip.php?article15#liste
... on arrive directement à la liste

 Plusieurs class

On peut utiliser la même class plusieurs fois par exemple :

<div id="machin" class="toto"> un texte </div>
<div id="truc" class="toto"> un autre texte </div>
<div id="contenu" class="toto"> un troisième texte </div>

 Ecriture des id et des class

Les id sont écrits avec un diése. Exemple :
#contenu

Les css sont écrits avec un point. Exemple :
.contenu

Dans tous les cas, les éléments sont séparés par des points-virgules.

id et class sont des attributs, des caractéristiques attribuées au texte.
On les utilise avec d’autres balises comme ...p ... h1 ... a ... etc.

D’excellentes explications ici :
– http://www.pompage.net/pompe/cssdezero-8/

 span, block, inline

Pour compliquer les choses, parlons un peu d espan, bock, inline.

En CSS, il y a des éléments dits block qui sont constitués de boîtes rectangulaires, dotées soit d’id uniques, soit de class réutilisables. Et nous avons aussi des éléments dits inline, qui traitent le texte au caractère près.

D’excellentes explications ici :
– http://www.pompage.net/pompe/cssdezero-8/


NOTES:

id comme ... identité, identification.
C’est le nom donné à la balise div