Comment surligner un texte comme avec un stabilo ?
Dans ce petit tuto nous allons utiliser les balises <span> et </span> et les CSS en ligne, pour surligner un texte en couleur comme avec un stabilo.
Nous ferons d’une pierre deux coups : introduire la balise HTML <span> et découvrir les CSS.
Sous WordPress, il faudra travailler en mode texte(onglet en haut à gauche) pour ajouter ceci.
Les balises <span> et </span> permettent de délimiter une zone de texte sur laquelle on pourra appliquer des « effets », des styles CSS. Pour surligner, il suffit de colorer le fond du texte (background) avec la couleur souhaitée.
L’attribut CSS background-color, sera utilisé de la façon suivante : background-color: couleur;
la valeur couleur sera donnée en hexadecimal donc précédée par #. Pour en savoir plus sur le codage des couleurs en informatique, je vous invite à visiter cet article sur le codage des couleurs dans les images.
L’intégration du CSS peut se faire directement dans la balise <span> par le CSS en ligne, par le code suivant : style=attribut:valeur
Ce qui donnera : <span style=background-color: couleur;
>Mon texte </span>
Par exemple :
- Surligner en jaune
[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]
Mon texte jaune
[/pastacode]
Mon texte est surligné en jaune
Le nombre #ffff66 est le code hexadécimal de la couleur utilisée. dièse précise au navigateur que le code est en hexadécimal et non en base dix.
- Surligner en bleu :
[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]
Mon texte bleu[/pastacode]
Mon texte est surligné en bleu
- Surligner en orange :
[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]
Mon texte orange
[/pastacode]
Mon texte est surligné en orange
- Surligner en vert :
[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]
Mon texte vert
[/pastacode]
Mon texte est surligné en vert
Vous trouverez plusieurs sites donnant les codes hexadécimaux de couleurs. Color Picker est une palette de couleur en ligne simple et efficace.
Ce petit article est terminé. N’hésitez pas à le commenter ou à le partager.
Répondre à Alain Ternaute Annuler la réponse
Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.
Super astuce, elle m’aide vraiment.
Je suis en train de rédiger une page de vente et j’avais besoin de mettre en évidence les concepts importants ( Les GRAS finissent par envahir tout mes phrases 😉 ).
Y a t-il moyen de rajouter une commande au style.css et l’utiliser directement ?
on définirait une commande et puis on l’utilise texte
En tout cas merci,
Jamal.
Bonjour Jamal,
Merci pour le commentaire.
Pour que cela s’applique à toute une page, il faut mettre les CSS dans des balises
ou dans un fichier .css. J’ai fait un petit article : css dans html
J’espère que cela te sera peut-être utile.
A bientôt
Philippe
Avec HTML5, on a la balise <mark> qui est faite pour ça. Du coup, plus besoin de <span>. 😉
Traité d’une façon claire avec pédagogie !
Merci pour votre aide
Bien cordialement