id, class et <div>, <span>

[e101mk2]

Dans ce tuto, nous allons apprendre 2 arguments xhtml, id et class. Mais aussi de nouvelle balises:<div> et <span>.

Le css, on l'oublie déjà?
Mais non, juste que maintenant que vous connaissez le css, il faut que vous apprenez à mieux communiquer entre le xhtml et css.

id et class, des arguments universel
Id et class ne sont pas n'importe qu'elle argument, ce sont des arguments universelle! Elle fonctionne dans n'importe qu'elle balise.
(exemple 1)

Code: Tout sélectionner

<p id="paragrapheprincipal">Voici le paragraphe principal</p>

id: Mais que doit t-on mettre dans cette argument?
Vous devez donné un nom, un nom qui sera unique. Vous ne pouvez pas mettre 2 argument id avec 2 nom identique.

Plus tard, vous serez amenée à vouloir 2 nom identique
Pour pas vous embêtez on à créer class
(exemple 2)

Code: Tout sélectionner

<p class="news">Voici la premiere news</p>
<p class="news">Voici la seconde news</p>

Je ne comprend pas qu'elles sont leurs utilités!
Leur utilité est de les "localiser". En effet, imaginez que seul le paragraphe principal doit être écrit en rouge (exemple 1)
le code css sera celui ci

Code: Tout sélectionner

#paragrapheprincipal
{
color: red;
}

est dans l'exemple 2, où toutes les news doit être écrite en blanc

Code: Tout sélectionner

.news
{
color: red;
}

<div> et <span>

imaginez que vous voulez qu'une seul partit d'un texte doit être rouge? Comment faites vous!
Bah en utilise <span>!
<span> et <div> ne serve à rien en xhtml, mais en css, elle permet beaucoup de chose. Elle prend id ou class comme argument, celon ceux que vous voulez faire avec!
Voici un exemple

Code: Tout sélectionner

<p>les  3couleurs primaire <span class="rouge">rouge</span>, <span class="vert">vert</span> et <span class="bleu">bleu</span>.</p>

bon avec le petit code css qui va avec

Code: Tout sélectionner

.rouge
{
color: red;
}
.vert
{
color: #00ff00;
}
.bleu
{
color: blue;
}

Bon, maintenant le <div>, comment mettre, 2 paragraphe en rouge, et le 3eme en vert?

Code: Tout sélectionner

<div id="vert">
<p>mon 1er paragraphe</p><p>mon 2nd paragraphe</p></div><p>mon 3eme paragraphe</p>

Code: Tout sélectionner

p
{
color: green;
}
#vert
{
color: red;
}

je pense que vous avez compris le but, si ce n'est pas le cas, je vous propose de tout relire ce tuto. Et de faire vos propre exemple!

[Cclleemm]

Vraiment bien, mais je pense que tu pourrais l'améliorer en ajoutant à la fin du tuto, quelques exemple avec d'autre s cas (Marging-left, float, ...) à la place de seulement color pour que l'on puisse comprendre sa véritable utilité, sinon rien ne vaut de garder <font></font>.

Sinon, bravo, je n'ai même pas le temps de lire l'autre tuto qu'il y en a un nouveau ... Lol
Super, j'adore, c'est simple et propre.

Une petite astuce pour améliorer tes tutos, essaye tou_t de même en fin de tutos de montrer un petit exemple plus complet pour montrer l'utilité de ce que tu explique

[Gaara]

Merci pour ce nouveau tutoriel !

Par contre, on n'arrive pas vraiment à voir la différence entre les balises div et span.
Il faudrait préciser que div est une balise de type bloc et span une balise de type inline.

[_herman²]

Petite précision, un id doit être unique, c'est à dire qu'il doit n'y avoir qu'un seul id du même nom dans une page ; contrairement au class

Sinon très bon tutoriel !

a+