Formater et ajouter du style au texte est primordial pour tout concepteur Web. Cette lecon vous introduira aux possibilites etonnantes offertes par CSS pour la presentation du texte. Les proprietes suivantes seront decrites :
La propriete text-indent permet d'ajouter une touche d'elegance aux paragraphes de texte en appliquant une indentation
a la premiere ligne du paragraphe. Dans l'exemple suivant, un alinea de 30px est applique a tous les paragraphes
balises par un element <p> :
p {
text-indent: 30px;
}
La propriete CSS text-align correspond a l'attribut align utilise dans les versions anciennes de HTML. Le texte
peut etre aligne a gauche (left), a droite (right) ou centre (center).
Outre cela, la valeur justify etirera chaque ligne de sorte que les marges a gauche et a droite soient droites
toutes les deux. Cette mise en page est courante, par exemple, dans les journaux et les magazines.
Dans l'exemple suivant, le texte des titres du tableau <th> est aligne a droite, tandis que les
donnees du tableau <td> sont centrees. Enfin, les paragraphes de texte normaux sont justifies :
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
La propriete text-decoration permet d'ajouter des decorations ou effets differents au texte. Par exemple,
on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc. Dans l'exemple suivant, les elements <h1>
sont des titres soulignes, les elements <h2> sont des titres avec un trait au-dessus et les elements <h3>
des titres barres.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
L'espacement entre les caracteres du texte peut etre defini avec la propriete letter-spacing. La valeur de la
propriete est simplement celle de l'espacement desire. Par exemple, si vous voulez un espacement de 3px entre
les lettres d'un paragraphe de texte <p>, et de 6px entre les lettres des titres <h1>,
voici le code a utiliser :
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
La propriete text-transform controle la capitalisation du texte. On peut choisir une capitalisation initiale,
une mise en majuscules ou une mise en minuscules, independamment de l'aspect du texte original
dans le code HTML.
Voici un exemple avec le mot titre que l'on peut presenter a l'utilisateur comme TITRE ou Titre .
La propriete text-transform admet quatre valeurs possibles :
Pour exemple, nous utiliserons une liste de noms, balises avec des elements <li> (list-item).
Disons que nous voulons que les noms soient capitalises et les titres soient en lettres majuscules.
Examinez le code HTML de cet exemple et vous constaterez que le texte est en fait en minuscules.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Avec les trois dernieres lecons, nous avons deja appris beaucoup de proprietes CSS, mais il y a plus encore. Dans la lecon suivante, nous aborderons les liens.