Feuilles de style : effets sur le texte
Noter ce cours : 
Liens sponsorisés :
Les feuilles de style nous proposent certains effets supplémentaires par rapport au HTML pour la mise en forme du texte.
Alinéas :
On utilise pour indenter la première ligne d'un paragraphe la propriété text-indent.
Exemple :
span{
text-indent:10px;
}
<span>un texte en verdana, arial, times new roman ou helvetica indenté de 10 pixels</span>
Majuscules et minuscules :
Pour la gestion des majuscules et minuscules, on utilise la propriété text-transform.
Les différentes valeurs possibles pour cette propriété sont :
- capitalize : Met en majuscule les premières lettres de chaque mot.
- lowercase : Met en minuscules tout le texte.
- uppercase : Met en majuscule tout le texte.
Exemple :
span{
text-transform:uppercase;
}
Espacement des mots et des lettres :
Pour l'espacement des lettres on utilise la propriété letter-spacing.
Exemple :
span{
letter-spacing:1px;
}
Pour l'espacement des mots on utilise la propriété word-spacing.
Exemple :
span{
word-spacing:1px;
}
Alignement horizontal et vertical du texte :
Pour aligner le texte horizontalement on utilise la propriété text-align.Elle peut prendre les valeurs suivantes :
- left : Aligne le texte à gauche.
- right : Aligne le texte à droite.
- center : Centre le texte.
- justify : Texte en mode justifié (les mots sont espacés dynamiquement pour former une colonne propre)
Exemple (le texte de la balise <span> sera centré) :
span{
text-align:center;
}
Pour aligner le texte verticalement on utilise la propriété vertical-align. Elle peut prendre les valeurs suivantes :
- baseline : Aligne le texte sur la base de la ligne.
- super : Aligne le texte au dessus de la ligne de base.
- sub : Aligne le texte en dessous de la ligne de base.
- middle : Aligne le texte au milieu de la ligne
- text-top : Aligne le texte en haut.
- text-bottom : Aligne le texte en bas.
- top : Aligne le texte en haut par rapport à la ligne située en haut.
- bottom : Aligne le texte en bas par rapport à la ligne située en bas.
- valeur : en fonction de la valeur (positive ou négative), aligne le texte au dessus ou en dessous de la ligne de base.
Exemple (le texte de la balise <span> sera aligné au milieu de la boîte) :
span{
vertical-align:middle;
}
Direction du texte :
La direction du texte est paramétrable via la propriété direction. Elle peut prendre les valeurs suivantes :
- ltr : Ecriture de la gauche vers la droite.
- rtl : Ecriture de la droite vers la gauche.
Exemple :
span{
direction:ltr;
}