Text¶
Plusieurs propriétés CSS permettent de contrôler l'apparence d'un texte. Voici quelques-unes des propriétés les plus courantes.
text-align¶
La propriété text-align, comme son nom l'indique, sert à déterminer l'alignement horizontal du texte. Différentes options sont disponibles:
left(par défaut)rightcenterjustify
text-decoration¶
La propriété text-decoration est une propriété raccourcie permettant d'ajouter ou de retirer une ligne à un texte. Par exemple, les navigateurs utilisent cette propriété afin de différencier les liens des textes normaux en les soulignant.
Cette propriété accepte plusieurs arguments, tel que le type de ligne, sa couleur et son style.
text-transform¶
La propriété text-transform permet de modifier un texte. Cette propriété accepte diverses valeurs:
nonen'a aucun impact (par défaut).lowercasetransforme le texte en minuscules.uppercasetransforme le texte en majuscules.capitalizetransform en majuscule la première lettre de chaque mot.
text-stroke¶
La propriété -webkit-text-stroke bien que non standard, d'où sont préfix -webkit, est supportée par tous les navigateurs majeurs. Cette propriété accepte deux valeurs. L'épaisseur du trait entourant le le texte et la couleur du trait en question.
Danger
ERREUR FRÉQUENTE Lorsque le prefix -webkit est oublié, l’effet ne s’affiche pas.
text-shadow¶
La propriété text-shadow permet d'ajouter une ombre à un texte. Cette propriété nécessite un décalage sur les X ou Y afin d'être visible par défaut. Une 3e valeur peut être ajoutée afin de spécifier le niveau de flou souhaité pour l'ombre. Finalement, une 4e valeur permet d'indiquer la couleur de l'ombre qui par défaut est de la même couleur que le texte.
Il est possible d'ajouter plusieurs ombres à un même texte si désiré en séparant chaque ombre par une virgule.
Par exemple:
.element {
text-shadow: 2px 2px red, 4px 4px blue;
}
Exercices¶
Text - Focus
Pour cet exercice, vous devez manipuler les propriétés de texte en CSS afin de recréer un effet typographique.
Text - Focus