5.6 Propriétés du texte CSS

aligner le texte – text-align

La propriété text-align doit être appliquée sur un élément de niveau bloc et définit comment son texte et ses éléments intégrés sont alignés horizontalement.

body { text-align: left;}

Les valeurs les plus utilisées sont :

• gauche – left
• droit – right
• centrer – center
• justifier – justify

Ces valeurs correspondent aux mêmes boutons d’alignement que vous trouvez dans Microsoft Word ou Photohop :

La valeur justify n’est pas recommandée. Bien que cela puisse paraître attrayant parce qu’il forme un rectangle de texte, il est très difficile à lire.

La valeur par défaut de text-align est start. Fondamentalement, start peut être left ou right, en fonction de la direction définie sur le document HTML.

direction est une propriété CSS qui peut être ltr (de gauche à droite – left to right) ou rtl (de droite à gauche – right to left) :

• si ltr est choisi, start est égal à left
• si rtl est choisi, start est égal à right

décoration de texte – text-decoration

La propriété text-decoration est utilisée pour ajouter une ligne de soulignement à votre texte.

Valeur par défaut : aucune – none

.deleted { text-decoration: line-through;}

Valeurs possibles :

• surligner – overline
• souligner – underline
• rayer – line-through (ligne en travers)

Par défaut, les liens HTML (<a>) ont une décoration de texte définie : text-decoration: underline;. Une des premières choses que font habituellement les codeurs est de supprimer ce style par défaut :

a{ text-decoration: none;}

retrait du texte – text-indent

La propriété text-indent permet d’ajouter de l’espace avant la première lettre de la première ligne d’un élément de niveau bloc.

Valeur par défaut : 0 (zéro)

blockquote { text-indent: 30px;}

Comme pour la propriété font-size, vous pouvez utiliser des valeurs exprimées en px, em, et même %.

ombre de texte – text-shadow

Si vous avez déjà utilisé Photoshop, vous avez probablement utilisé l’outil Ombre portée. En CSS, vous pouvez ajouter une ombre à un texte pour le rendre plus lisible ou plus sophistiqué.

Vous définissez :

• x le décalage horizontal
• y le décalage vertical
• le flou – blur
• la couleur – color

h1 { text-shadow:0 2px 5px rgba(0, 0, 0, 0.5);}

Seules les valeurs x et y sont requises. Le flou – blur par défaut est 0 (zéro), tandis que la couleur – color par défaut est celle du texte.

Cette propriété est délicate, alors utilisez-la avec parcimonie et ne devenez pas fou !