CSS : letter-spacing, text-align, text-decoration

Mettre en forme un texte en CSS

En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style.

• color: Gestion de la couleur du texte
• letter-spacing: Espace entre les lettres
• text-align: Alignement d'un texte
• text-decoration: Habiblement d'un texte

A savoir

Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien)

Couleur

Vous pouvez fixer la couleur d'un texte comme suivant : Les différentes valeurs sont :

• Nom de la couleur - exemple:(red, black...)
• Nombre hexadecimal - exemple:(#ff0000, #000000)
• Code RGB - exemple:(rgb(255, 0, 0), rgb(0, 0, 0))

Voir un exemple

Voici un texte en bleu

Voir le code CSS

.bleutext{ color: #336699; }

Voir le code dans l'élément

<span class="bleutext">Voici un texte en bleu</span>

Vous pouvez ajuster les espaces entre les lettres dans un texte.
Vous pouvez mettre une valeur négative. Les valeurs possibles sont :

• normal
• une valeur en px

Voir un exemple

Voici des lettres espacées de 5px

Voir le code CSS

.espace5px{ letter-spacing: 5px; }

Voir le code dans l'élément

<span class="espace5px">Voici des lettres espacées de 5px</span>

Vous pouvez ajuster la position d'un texte Les valeurs possibles sont :

• Gauche
• droite
• centre
• justifié

Voir un exemple

Voir le code CSS

.align_left{ text-align: left; }
.align_right{ text-align: right; }
.align_center{ text-align: center; }
.align_justify{ text-align: justify; }

Voir le code dans l'élément

<span class="align_left">Ce texte est aligner à gauche.</span>
<span class="align_center">Ce texte est aligner centre.</span>
<span class="align_right">Ce texte est aligner à droite.</span>
<span class="align_justify">Ce texte est aligner justifier.</span>

Vous pouvez habiller (barré, souliger...) un texte comme suivant : Les valeurs possibles sont :

• none (rien)
• underline (souligner
• overline (ligne au dessus)
• line through (barrer)
• blink (clignoter)

Voir un exemple

Voir le code CSS

.underline { text-decoration:underline; }
.overline { text-decoration:overline; }
.line_through { text-decoration:line-through; }
.blink { text-decoration:blink; }

Voir le code dans l'élément

<div class="underline">ce texte est souligner.</div>
<div class="line_through">Texte barré</div>
<div class="blink">Ce texte cligniote (ne marche pas avec internet explorer).</div>
<div class="overline">Il ya une ligne au dessus de ce texte.</div>

Suite sur la gestion d'un texte en CSS >>>