le formatage du texte
Ce texte est de style avec certaines des propriétés de mise en forme de texte. Le titre utilise le text-align, text-transform et color propriétés. Le paragraphe est en retrait, alignés, et l'espace entre les caractères est spécifié. Le soulignement est supprimé de cette couleur "Essayez - le vous - même" lien.
Couleur de texte
La color propriété est utilisée pour définir la couleur du texte.
Avec CSS, une couleur est le plus souvent définie par:
- un nom de couleur - comme "red"
- une valeur HEX - comme "#ff0000"
- une valeur RGB - comme "rgb(255,0,0)"
Regardez couleur CSS valeurs pour une liste complète des valeurs de couleurs possibles.
La couleur du texte par défaut pour une page est définie dans le sélecteur de corps.
 | Remarque: Pour W3C CSS conforme: Si vous définissez la color propriété, vous devez également définir la background-color d' background-color propriété. |
|---|
Alignement du texte
Le text-align propriété est utilisée pour définir l'alignement horizontal d'un texte.
Un texte peut être aligné à gauche ou à droite, centré ou justifié.
L'exemple suivant montre le centre aligné, et à gauche et à droite du texte aligné (alignement à gauche est par défaut si la direction du texte est de gauche à droite, et l'alignement à droite est par défaut si la direction du texte est de droite à gauche):
Exemple
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
} Essayez - le vous - même » Lorsque le text-align propriété est définie à "justify" , chaque ligne est étiré de telle sorte que chaque ligne a une largeur égale, et les marges gauche et droite sont droites (comme dans les magazines et journaux):
Décoration texte
Le text-decoration propriété est utilisée pour définir ou supprimer des décorations de texte.
La valeur text-decoration: none; est souvent utilisé pour enlever soulignement à partir de liens:
Les autres text-decoration valeurs sont utilisées pour décorer le texte:
Exemple
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Essayez - le vous - même » | Note: Il est recommandé de ne pas souligner le texte qui ne soit pas un lien, car cela confond souvent le lecteur. |
|---|
Transformation du texte
Le text-transform propriété est utilisée pour spécifier des lettres majuscules et minuscules dans un texte.
Il peut être utilisé pour tout transformer en lettres majuscules ou minuscules, ou en majuscule la première lettre de chaque mot:
Exemple
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Essayez - le vous - même » Indentation de texte
Le text-indent propriété est utilisée pour spécifier l'indentation de la première ligne d'un texte:
L'espacement des lettres
La letter-spacing propriété est utilisée pour spécifier l'espace entre les caractères dans un texte.
L'exemple suivant montre comment augmenter ou diminuer l'espace entre les caractères:
Hauteur de la ligne
Le line-height propriété est utilisée pour spécifier l'espace entre les lignes:
Orientation du texte
La direction propriété est utilisée pour changer le sens du texte d'un élément:
Espacement des mots
L' word-spacing propriété est utilisée pour spécifier l'espace entre les mots dans un texte.
L'exemple suivant montre comment augmenter ou diminuer l'espace entre les mots:
Autres exemples
Désactiver l' habillage du texte à l' intérieur d' un élément
Cet exemple montre comment désactiver l'habillage du texte à l'intérieur d'un élément.
L' alignement vertical d'une image
Cet exemple montre comment définir l'alignement vertical d'une image dans un texte.
Ajouter une ombre au texte
Cet exemple montre comment ajouter ombre au texte.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
Toutes les propriétés CSS texte
| Propriété | La description |
|---|---|
| color | Définit la couleur du texte |
| direction | Indique le sens du texte / sens d'écriture |
| letter-spacing | Augmente ou diminue l'espace entre les caractères dans un texte |
| line-height | Définit la hauteur de la ligne |
| text-align | Indique l'alignement horizontal du texte |
| text-decoration | Indique la décoration ajouté au texte |
| text-indent | Indique l'indentation de la première ligne dans un texte-bloc |
| text-shadow | Indique l'effet ajouté au texte de l'ombre |
| text-transform | Contrôle la capitalisation du texte |
| unicode-bidi | Utilisé conjointement avec la direction propriété pour définir ou retourner si le texte doit être remplacé pour supporter plusieurs langues dans le même document |
| vertical-align | Définit l'alignement vertical d'un élément |
| white-space | Indique comment white-space intérieur d'un élément est traité |
| word-spacing | Augmente ou diminue l'espace entre les mots dans un texte |