Italique, gras, souligné…

Il existe en CSS une série de propriétés classiques de mise en forme du texte. Nous allons découvrir ici comment afficher le texte en gras, italique, souligné… et au passage nous verrons qu'il est même possible d'aller jusqu'à le faire clignoter !

Mettre en italique

Attends un peu là ! Je croyais que la balise permettait de mettre un texte en italique ?!

Je n'ai jamais dit cela.
Retournez voir les chapitres précédents si vous avez des doutes, mais je n'ai jamais dit que la balise était faite pour mettre le texte en italique (de même que je n'ai jamais dit que était faite pour mettre en gras).

, mettez-vous bien cela dans la tête, est faite pour insister sur des mots. Cela veut dire que les mots qu'elle entoure sont assez importants.
Pour représenter cette importance, la plupart des navigateurs choisissent d'afficher le texte en italique, mais ce n'est pas une obligation.

Le CSS lui, permet de dire réellement : « Je veux que ce texte soit en italique ». Rien ne vous empêche, par exemple, de décider que tous vos titres seront en italique.

Concrètement, en CSS, pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :

italic : le texte sera mis en italique.
oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de l'italique proprement dit).
normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre ne soient plus en italique, vous devrez écrire :

{

font-style: normal;

}

Ainsi, dans l'exemple suivant, je me sers de font-style pour mettre en italique tous mes titres<h2> :

{

font-style: italic;

}

Mettre en gras

Et si nous passions à la mise en gras ?
Alors, là encore, n'oubliez pas que ce n'est pas qui permet de mettre en gras (son rôle est d'indiquer que le texte est important, donc le navigateur l'affiche généralement en gras). La mise en gras en CSS peut par exemple s'appliquer aux titres, à certains paragraphes entiers, etc. C'est à vous de voir.

La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes :

bold : le texte sera en gras ;
normal : le texte sera écrit normalement (par défaut).

Voici par exemple comment écrire les titres en gras :

{

font-weight: bold;

}

Soulignement et autres décorations

La propriété CSS associée porte bien son nom : text-decoration. Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre :

underline : souligné.
line-through : barré.
overline : ligne au-dessus.
blink : clignotant. Ne fonctionne pas sur tous les navigateurs au moment où j'ai fais ce cours (Internet Explorer et Google Chrome, notamment).
none : normal (par défaut).

Ce CSS va vous permettre de tester les effets de text-decoration :

{

text-decoration: blink;

}

.souligne

{

text-decoration: underline;

}

.barre

{

text-decoration: line-through;

}

.ligne_dessus

{

text-decoration: overline;

}

Et le résultat est visible à la figure suivante.

Différentes mises en forme du texte

Créé avec HelpNDoc Personal Edition: Écrire des livres électroniques ePub pour l'iPad