Bonjour les gentils petites quiches ! :3

Vous étiez nombreux à m'applaudir pour mon premier spectacle, voici le deuxième intitulé, la span ! *s'y croit trooop !* ^^
(attention, ce chapitre est plus court ! ^^)

Bon, vous avez appris à faire de jolie petits carrés autour du texte, mais maintenant il faut faire beau le texte.
On se sert des span pour faire un formatage DANS une div. Attadez pas si vite, je vais vous expliquer...

je reprends l'exemple du précédant tuto :



Je veux mettre le "je sais plus" en cyan, pour bien le faire ressortir. Et bien on va caler une span dans le texte en utilisant "color" comme pour la div (certaines propriétés sont identiques.)

Code:

<div style="background:red;color:white;width:400px;height:50px;border:solid 5px green;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus</span>. Off' pis c'est pas grave ça ira très bien comme ça ! :D</div>

ce qui donne :

Pas mal non ?
Donc, maintenent je veux surligner le "pas grave" car, il faut le dire, c'est le plus important dans la phrase. Pour cela, on va utiliser comme pour la div, la propriété "background" suivit de la couleur en anglais.

Code:

<div style="background:red;color:white;width:400px;height:50px:border:gren 5px solid;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus.</span> Off' pis c'est<span style="background:yellow">pas grave</span> ça ira très bien comme ça.</div>

compris ?
On ne voit plus rien du coup... On va mettre le texte en bleu. Comme la div, on peux superposer les propriétés :

Code:

<div style="background:red;color:white;width:400px;height:50px:border:gren 5px solid;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus.</span> Off' pis c'est<span style="background:yellow;color:blue">pas grave</span> ça ira très bien comme ça.</div>

Aahh, on voit plus clair comme ça !!

Je voudrais la dernière pharse en tout petit, et dans une police différente. C'est simple, on utilise "font-size" pour la taille et "font-family" pour la forme. En règle général, "font" est pour la police d'écriture.

Code:

<div style="background:red;color:white;width:400px;height:50px:border:gren 5px solid;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus</span>. <span style="font-size:10px;font-family:Courier New">Off' pis c'est<span style="background:yellow;color:blue">pas grave</span> ça ira très bien comme ça.</span></div>

Voili voiluu !! ^^
N'hésitez pas à me demander quelque chose, si vous n'avez rien compris ou si vous voulez plus d'infos... :flower:

Encore un très bon tutoriel qui permet dans apprendre plus sur le codage. Merci !

Mais je n'ai pas terminé ! ^^

Rumas si ta pas terminé j'attend de voir tout moi ^^

J'avais pas eu le temps !! :p Mais ça y est, c'est fini !! :p

Oh, c'est bien!

je veux la suite ^^

Bonsoir,

Pas mal aussi cette explication Rumas je vois que tu apprends vite cependant pour bien préciser les choses  la balise span est inline, elle s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes.
On ne peut lui spécifier une hauteur ni une largeur ni l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans affecter en soi l'apparence du texte.

Cordialement
Idiscut