Comment surligner un texte comme avec un stabilo ?

Dans ce petit tuto nous allons utiliser les balises <span> et </span> et le CSS en ligne de code, pour surligner un texte ** comme avec un stabilo**.



Nous ferons d'une pierre deux coups :

introduire la balise HTML <span> et découvrir les CSS en ligne de code.

Sous WordPress, il faudra travailler en mode “html”.

Pour obtenir un effet de surlignement, il faut utiliser les balises <span> et </span>
Ces balises permettront de délimiter une zone de texte sur laquelle on pourra appliquer un effet “stabilo”, grâce au CSS.

Pour surligner un texte, il suffit de colorer le fond (background) du texte entre les balises <span> avec la couleur souhaitée.
L’attribut CSS s’utilisera ainsi :  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> grâce au CSS en ligne de code.

Par exemple :

  • Surligner en jaune

    Le code :

    1
    <span style="background-color: #ffff66;">Mon texte surligné en jaune</span>

    Le résultat :

    Mon texte 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 :

    Le code :

    1
    <span style="background-color: #40c0ff;">Mon texte surligné en bleu</span>

    Le résultat :
    Mon texte surligné en bleu

  • Surligner en orange :

    Le code :

    1
    <span style="background-color: #ffa000;">Mon texte surligné en orange</span>

    Le résultat :
    Mon texte surligné en orange

  • Surligner en vert :

    1
    <span style="background-color: #a0ff20;">Mon texte surligné en vert</span>

    Le résultat :
    Mon texte surligné en vert

  • Le choix des couleurs :

Vous trouverez plusieurs sites donnant les codes hexadécimaux de couleurs. En voici un parmi de très nombreux : Image-Color-Picker (Remonter en haut de page pour avoir la palette de couleurs).

Voilà, vous n’avez plus de secret avec les fonds colorés en css. Il ne vous reste plus qu’à les appliquer à vos créations.

Cet article vous a aidé, n’hésitez pas à le partager.

Partager