La propriété text- complète font- en permettant de donner plus de valeur à notre texte.
text-indent
La propriété text-indent permet d'ajouter un espace horizontal au début de la première ligne d'un paragraphe de texte.
Il est possible d'utiliser plusieurs unités :
- Le pixel,
- ems,
- Un pourcentage.
Par exemple, nous allons ajouter un retrait de 40 pixels à un paragraphe :
<p class="retrait">
Texte avec un retrait, un peu long pour avoir un retour à la ligne. Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium, ita amicitias appetere maxime; ex eo fieri ut mulierculae magis amicitiarum praesidia quaerant quam viri et inopes quam opulenti et calamitosi quam ii qui putentur beati.
</p><!-- .retrait -->
p.retrait{
text-indent: 40px;
}
Résultat :
Texte avec un retrait, un peu long pour avoir un retour à la ligne. Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium, ita amicitias appetere maxime; ex eo fieri ut mulierculae magis amicitiarum praesidia quaerant quam viri et inopes quam opulenti et calamitosi quam ii qui putentur beati.
text-align
La propriété text-align permet de contrôler l'alignement de notre texte :
<p class="gauche">
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
</p><!-- .gauche -->
<p class="centre">
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
</p><!-- .gauche -->
<p class="droit">
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
</p><!-- .droit -->
<p class="justification">
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
</p><!-- .justification -->
p.gauche{
text-align: left;
}
p.centre{
text-align: center;
}
p.droit{
text-align: right;
}
p.justification{
text-align: justify;
}
Résultat :
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
text-align: left;
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
text-align: center;
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
text-align: right;
Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.
text-align: justify;
text-decoration
La propriété text-decoration permet de décorer le texte avec une ligne placée sous, sur ou en travers le texte.
Nous pouvons agir sur 3 propriétés :
- Le type de ligne (sous, sur ou en travers),
- Le style de la ligne (pointillée, pleine, …),
- La couleur de la ligne.
Les trois positions
Nous allons commencer par voir quelles sont les trois positions possibles :
<p>
Un super test de texte avec du <span class="dessus">texte stylisé</span>.
</p>
<p>
Un super test de texte avec du <span class="centre">texte stylisé</span>.
</p>
<p>
Un super test de texte avec du <span class="dessous">texte stylisé</span>.
</p>
span.dessus{
text-decoration: overline;
}
span.centre{
text-decoration: line-through;
}
span.dessous{
text-decoration: underline;
}
Résultat :
Un super test de texte avec du texte stylisé.
text-decoration: overline;
Un super test de texte avec du texte stylisé.
text-decoration: line-through;
Un super test de texte avec du texte stylisé.
text-decoration: underline;
Les différents styles de ligne
Pour ajouter un style, nous allons l'ajouter à notre valeur :
<p>
Un super test de texte avec du <span class="solid">texte stylisé</span>.
</p>
<p>
Un super test de texte avec du <span class="double">texte stylisé</span>.
</p>
<p>
Un super test de texte avec du <span class="dotted">texte stylisé</span>.
</p>
<p>
Un super test de texte avec du <span class="dashed">texte stylisé</span>.
</p>
<p>
Un super test de texte avec du <span class="wavy">texte stylisé</span>.
</p>
span.solid{
text-decoration: underline solid;
}
span.double{
text-decoration: underline double;
}
span.dotted{
text-decoration: underline dotted;
}
span.dashed{
text-decoration: underline dashed;
}
span.wavy{
text-decoration: underline wavy;
}
Résultat :
Un super test de texte avec du texte stylisé.
text-decoration: underline solid;
Un super test de texte avec du texte stylisé.
text-decoration: underline double;
Un super test de texte avec du texte stylisé.
text-decoration: underline dotted;
Un super test de texte avec du texte stylisé.
text-decoration: underline dashed;
Un super test de texte avec du texte stylisé.
text-decoration: underline wavy;
Les couleurs
Si vous voulez changer la couleur de la ligne, c'est possible ! Il suffit pour cela de l'ajouter après les deux valeurs précédentes :
span{
text-decoration: underline solid red;
}
Résultat :
Un super test de texte avec du texte stylisé.
Nous verrons plus en détail les couleurs dans le chapitre : Les couleurs
text-transform
La propriété text-transform permet de modifier la façon dont les majuscules sont gérée. On pourra choisir d'afficher un texte en minuscules, en majuscules ou bien avec une majuscule en début de chaque mot :
<p class="capitalize">
Un super test de texte.
</p>
<p class="uppercase">
Un super test de texte.
</p>
<p class="lowercase">
Un super test de texte.
</p>
p.capitalize{
text-transform: capitalize;
}
p.uppercase{
text-transform: uppercase;
}
p.lowercase{
text-transform: lowercase;
}
Résultat :
Un super test de texte.
text-transform: capitalize;
Un super test de texte.
text-transform: uppercase;
Un super test de texte.
text-transform: lowercase;
text-shadow
La propriété text-shadow permet d'ajoute une ou plusieurs ombres à un texte.
Pour cela, nous allons utiliser plusieurs valeurs :
- Le décalage horizontal de l'ombre (offset-x)
- Le décalage vertical de l'ombre (offset-y)
- Le diamètre du flou de l'ombre (blur-radius)
- La couleur de l'ombre (offset-x)
/* offset-x | offset-y | blur-radius | color */
.shadow{
text-shadow: 3px 3px 2px red;
}
Résultat :
Un super texte ombré
Il est possible de cumuler les ombre en les séparant par une virgule :
.shadow{
text-shadow: 1px 1px 0 red, 2px 2px 0 orange, 3px 3px 0 yellow, 4px 4px 0 green, 5px 5px 0 blue, 6px 6px 0 indigo, 7px 7px 0 violet;
/* On agrandit le texte pour mieux y voir */
font-size: 40px;
font-weight: bold;
}
Résultat :
Un super texte ombré