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
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 listePlusieurs 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/cssdez...
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/cssdez...
Fil RSS 