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.

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

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 :
<span style="background-color:#40c0ff;" >Mon texte bleu</span>

Mon texte est surligné en bleu

  • Surligner en orange :

Mon texte est surligné en orange

  • Surligner en vert :

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.

Les recherches qui vous ont mené ici

  • Comment Surligner un Texte (3)
  • surligner html (2)
  • partie surlignée (2)
Ces articles pourraient vous intéresser :
3 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
jetpack WordPress
JetPack : le super plugins WordPress.

JetPack mériterait plus qu'un article, tant cette extension WordPress est complexe. En réalité JetPack est un ensemble d'extensions que l'on...

qr-code.fr
11 générateurs de QR Codes en ligne.

Qu'est-ce qu'un QR code ? Les QR codes sont ces figures carrées énigmatiques qui fleurissent sur tous les produits de...

lien vers ancre dans page
Un générateur de texte 3D.

Un texte 3D, c'est joli et cela peut-être utilisé pour de nombreuses applications, comme des bannières, des headers etc. Proposer...

Fermer