|
• |
Typographie, bien gérer ses textes en CSS |
• |
|
Les propriétés CSS typographiques permettent de modifier la police/le texte contenu dans un élément : changer sa couleur, sa forme, son alignement...
Nous allons modifier dans les différents exemples l'élément HTML suivant :
HTML
|
|
|
|
<div class="block"></div> |
|
|
|
|
CSS
|
|
|
|
div.block
{
width: 350px;
height: 30px;
padding: 10px;
border: 1px solid;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
font-family
Cette propriété permet de modifier la police du texte d'un élément. Elle prend pour valeur un ou plusieurs nom de police générique, séparés par des virgules, dont l'affichage se fait par ordre décroissant en fonction de leur disponibilité.
|
|
|
|
div.block
{
font-family: helvetica, "Trebuchet MS", arial;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
 | Pour les polices dont le nom est composé, il faut les entourer de guillemets. |
font-size
Cette propriété permet de définir la taille de la police de fond. Elle prend pour valeur une unité de taille (voir la liste des unités de taille).
|
|
|
|
div.block
{
font-size: 10px;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
font-style
Cette propriété permet de gérer la répétition horizontale et verticale d'une image de fond. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| italic | penché |
| oblique | similaire à la valeur italic |
| normal | non-penché |
|
|
|
|
div.block
{
font-style: oblique;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
font-variant
Cette propriété permet transformer le texte d'un élément en petites capitales ou non :
| Valeur | Description |
|---|
| small-caps | petites capitales |
| normal | forme par défaut |
|
|
|
|
div.block
{
font-variant: small-caps;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
font-weight
Cette propriété permet de mettre le texte d'un élément en gras. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| bold | gras |
| bolder | très gras |
| normal | pas de gras |
|
|
|
|
div.block
{
font-weight: bold;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
font
Cette propriété permet de définir en une seule ligne les propriétés font, en alignant les valeurs des propriétés dont on a besoin l'une derrière l'autre dans l'odre suivant :
font : font-style font-variant font-weight font-size font-family;
|
|
|
|
div.block
{
font: normal small-caps bolder 1.3em arial;
}
|
|
|
|
|
=
|
|
|
|
div.block
{
font-style: normal;
font-variant: small-caps;
font-weight: bolder;
font-size: 1.3em;
font-family: arial;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
color
Cette propriété permet de modifier la couleur du texte d'un élément. Elle prend pour valeur un code hexadécimal ou un nom de couleur (voir la liste des couleurs normalisées SVG 1.0). Elle peut également prendre pour valeur transparent afin de rendre le texte invisible.
|
|
|
|
div.block
{
color: MediumVioletRed;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
text-align
Cette propriété détermine l'alignement horizontal du texte d'un élément. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| left | alignement à gauche |
| right | alignement à droite |
| center | alignement au centre |
| justify | justifié |
|
|
|
|
div.block
{
text-align: center;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
text-decoration
Cette propriété détermine le soulignement ou surlignement du texte d'un élément. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| underline | souligner |
| overline | surligner |
| line-through | barrer |
| none | pas de soulignement/surlignement |
|
|
|
|
div.block
{
text-decoration: underline overline;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
| Il est possible de cumuler les effets en séparant les valeurs par un espace comme dans l'exemple ci-dessus. |
text-indent
Cette propriété permet de définir la longueur de l'alinéa (retrait) de la première ligne du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille).
|
|
|
|
div.block
{
text-indent: 30px;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
text-transform
Cette propriété permet de gérer l'affichage en minuscules ou majuscules du texte d'un élément. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| capitalize | premières lettres en majuscules |
| uppercase | tout en majuscules |
| lowercase | tout en minuscules |
| none | aucune modification |
|
|
|
|
div.block
{
text-transform: capitalize;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
line-height
Cette propriété permet de définir la hauteur de la ligne du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille).
|
|
|
|
div.block
{
line-height: 30px;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
letter-spacing
Cette propriété permet de modifier l'espèce entre chaque lettre du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille). Cette valeur peut être positives (lettres plus espacées) ou négatives (lettres plus serrées).
|
|
|
|
div.block
{
letter-spacing: 2px;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
word-spacing
Cette propriété permet de modifier l'espèce entre chaque mot du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille). Cette valeur peut être positives (mots plus espacées) ou négatives (mots plus serrées).
|
|
|
|
div.block
{
word-spacing: 10px;
}
|
|
|
|
|
|
Des mots, encore des mots, toujours des mots... |
