Feuilles de style : effets sur le texte

Liens commerciaux :

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 :

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 :

Exemple :

span{
direction:ltr;
}