Les déclarations servant à styliser le texte peuvent être divisées en deux groupes : les propriétés relatives à la présentation du texte, traitées ici, et celles relatives à la police de caractères, qui font l'objet de la prochaine page.
Dans ce qui suit, la valeur inherit
pour une propriété indique que la valeur doit être héritée de l'élément parent. Si une valeur apparait en caractères gras dans un tableau,
c'est qu'il s'agit de la valeur par défaut.
Le tableau suivant donne les propriétés et les valeurs les plus courantes concernant le texte :
Propriété | Valeurs possibles |
---|---|
text-align | left | right | center | justify | inherit |
text-decoration | none | underline | overline | line-through | inherit |
text-indent | longueur | pourcentage | inherit |
text-transform | none | capitalize | uppercase | lowercase | inherit |
Le sens de ces déclarations est comme suit :
text-align
spécifie si le texte doit être aligné à gauche (left
), à droite (right
), au centre (center
) ou
justifié (justify
).
text-decoration
indique si on veut du texte normal, souligné (underline
), surligné (overline
) ou barré (line-through
).
text-indent
sert à indenter le début des paragraphes. On peut spécifier une longueur ou un pourcentage de la longueur des lignes. La valeur par défaut est 0.
text-transform
peut être utilisé pour mettre la première lettre de chaque mot en majuscule (capitalize
), mettre tout le texte en majuscules
(uppercase
) ou tout le texte en minuscules (lowercase
).
Parmi les autres propriétés, il y en a trois qui pourraient probablement vous être utile. La première est line-height
:
line-height | normal | longueur | nombre | pourcentage | inherit |
qui fixe la distance entre les lignes. Outre le défaut du navigateur (normal
), vous pouvez spécifier une longueur en pixels ou en cadratins, un
pourcentage de la taille de la police ou un facteur (par exemple, 1.5em
, 1.5
et 150%
correspondent tous les trois à une distance entre deux lignes
qui est une fois et demie la taille de la police). La propriété peut aussi être héritée de l'élément parent (inherit
).
La seconde propriété est word-spacing
:
word-spacing | normal | longueur | inherit |
qui permet d'augmenter (si la valeur est positive) ou de diminuer (si la valeur est négative) l'espacement entre les mots¹. La valeur par défaut est
normal
. Une valeur modeste comme
1px
ajouterait un pixel à l'espacement normal et pourrait contribuer à la lisibilité du texte (une valeur de -1px
soustrairait un pixel à l'espacement normal).
Finalement, la troisième propriété est vertical-align
:
vertical-align | baseline | longueur | sub | super | top | text-top | middle | bottom | text-bottom | inherit |
Sans entrer dans des détails trop techniques, mentionnons simplement que cette propriété peut être utile pour aligner le texte dans un tableau avec le haut (top
) ou le bas
(bottom
) de la cellule où il se trouve.
¹ Il existe aussi une propriétés pour fixer l'écart entre les lettres qui pourrait s'avérer utile dans certaines circonstances.