Dans cette nouvelle leçon, nous allons présenter et étudier quelques-unes des propriétés CSS de type text-
les plus utiles et les plus intéressantes et notamment :
- La propriété
text-align
qui va nous permettre de gérer l’alignement du texte ; - La propriété
text-transform
qui va nous permettre de gérer la casse du texte (le fait que le texte soit en majuscules ou en minuscules) ; - La propriété
text-decoration
qui va nous permettre d’ajouter des éléments de décoration autour du texte comme un trait de soulignement par exemple ; - La propriété
text-indent
qui va nous permettre de définir l’indentation d’un texte ; - La propriété
text-shadow
qui va nous permettre d’ajouter des ombres autour d’un texte.
La propriété text-align
La propriété text-align
va nous permettre de définir l’alignement d’un texte par rapport à son élément conteneur.
Nous allons pouvoir choisir parmi les valeurs d’alignement suivantes :
left
: valeur par défaut. Le texte sera aligné contre le bord gauche de l’élément qui le contient ;center
: Le texte sera centré dans l’élément qui le contient ;right
: Le texte sera aligné contre le bord droite de l’élément qui le contient ;justify
: Le texte sera justifié (les écarts entre les mots vont être calculés de façon à ce que chaque ligne de texte occupe la même largeur).
Notez bien que la propriété text-align
va toujours aligner le texte dans / par rapport à l’élément qui le contient. Ainsi, appliquer cette propriété à un élément de type inline
comme un span
par exemple n’aurait aucun sens puisque ce type d’élément possède la même taille que son contenu.
See the Pen Cours HTML CSS 4.4.1 by Pierre (@pierregiraud) on CodePen.
La propriété text-transform
La propriété text-transform
va nous permettre de modifier la casse d’un texte ou de certaines parties d’un texte, c’est-à-dire de gérer le fait qu’un texte ou qu’une partie de texte s’affiche en majuscules ou en minuscules.
Cette propriété peut être utile dans le cas de textes générés automatiquement ou dans les cas où nous n’avons pas accès ou ne pouvons pas modifier le texte dans le code HTML directement.
Nous allons pouvoir passer l’une des valeurs suivantes à text-transform
:
none
: Valeur par défaut. Pas de transformation du texte. Utile pour annuler une transformation transmise par héritage par exemple ;lowercase
: Transforme tout le texte d’un élément en minuscules ;uppercase
: Transforme tout le texte d’un élément en majuscules ;capitalize
: Transforme la première lettre de chaque mot en majuscule ;
See the Pen Cours HTML CSS 4.4.2 by Pierre (@pierregiraud) on CodePen.
La propriété text-decoration
La propriété text-decoration
va nous permettre d’ajouter des décorations à un texte, comme un trait de soulignement ou de surlignement par exemple.
On va pouvoir lui passer jusqu’à trois valeurs qui vont correspondre au type de décoration (valeur obligatoire), à la couleur de la décoration (valeur facultative, couleur actuelle utilisée par défaut) et au style de la décoration (solide par défaut).
Concernant le type de décoration, nous allons pouvoir choisir parmi les valeurs :
underline
: ajoute un trait de soulignement au texte ;overline
: ajoute un trait de surlignement au texte ;line-through
: ajoute un trait qui va barrer le texte ;underline overline
: ajoute un trait de soulignement et un trait de surlignement au texte.
Concernant le style de la décoration, nous allons pouvoir choisir parmi les valeurs :
solid
: valeur par défaut ; le trait de décoration sera solide ;double
: le trait de décoration sera double ;dotted
: le trait de décoration sera en pointillés ;dashed
: le trait de décoration sera en tirets ;wavy
: le trait de décoration sera courbé.
See the Pen Cours HTML CSS 4.4.3 by Pierre (@pierregiraud) on CodePen.
Notez également qu’à l’heure actuelle la définition de la propriété text-decoration
est en train d’évoluer puisque de nouvelles sous propriétés CSS nous permettant de gérer un aspect de la décoration à la fois ont été dernièrement proposées. Si cette nouvelle définition est acceptée, alors la propriété text-decoration
deviendra la notation raccourcie des propriétés suivantes :
text-decoration-line
qui permet de définir une décoration autour du texte ;text-decoration-color
qui permet de choisir la couleur de la décoration (noire par défaut) ;text-decoration-style
qui permet de choisir le style de la décoration (solide par défaut).
La propriété text-decoration-line
va accepter les valeurs suivantes :
underline
: ajoute un trait de soulignement au texte ;overline
: ajoute un trait de surlignement au texte ;line-through
: ajoute un trait qui va barrer le texte ;underline overline
: ajoute un trait de soulignement et un trait de surlignement au texte.
La propriété text-decoration-style
va accepter les valeurs suivantes :
solid
: valeur par défaut ; le trait de décoration sera solide ;double
: le trait de décoration sera double ;dotted
: le trait de décoration sera en pointillés ;dashed
: le trait de décoration sera en tirets ;wavy
: le trait de décoration sera courbé.
A noter cependant que pour le moment ces propriétés ne sont pas encore officielles et vont pas encore forcément supportées par tous les navigateurs. Elles devraient cependant bientôt le devenir et c’est pourquoi je les mentionne dans ce cours.
See the Pen Cours HTML CSS 4.4.3.2 by Pierre (@pierregiraud) on CodePen.
La propriété text-indent
La propriété text-indent
va nous permettre de préciser l’indentation c’est-à-dire le retrait de la première ligne d’un texte par rapport au bord de l’élément parent.
Nous allons ici pouvoir passer une valeur en px
, em
, %
, etc. Les valeurs en %
vont être exprimées en fonction de la largeur de l’élément parent.
Notez que les valeurs négatives sont acceptées.
See the Pen Cours HTML CSS 4.4.4 by Pierre (@pierregiraud) on CodePen.
La propriété text-shadow
La propriété text-shadow
va nous permettre d’ajouter des ombres autour de nos textes. Cette propriété est relativement complexe à maitriser puisqu’elle va pouvoir utiliser jusqu’à 4 valeurs pour définir précisément une ombre et surtout puisqu’on va pouvoir appliquer plusieurs ombres différentes à un même texte grâce à elle.
Les 4 valeurs de text-shadow
vont correspondre :
- Au déplacement (ou « projection ») horizontal de l’ombre par rapport au texte. En passant une valeur positive, l’ombre est projeté à droite du texte. En passant une valeur négative, l’ombre est projetée à gauche de celui-ci. Cette valeur doit obligatoirement être renseignée ;
- Au déplacement vertical de l’ombre par rapport au texte. En passant une valeur positive, l’ombre est projeté sous le texte. En passant une valeur négative, l’ombre est projetée au-dessus de celui-ci. Cette valeur doit obligatoirement être renseignée ;
- Au rayon de flou de l’ombre. Un flou Gaussien est utilisé ici : plus la valeur est grande, plus l’ombre sera étendue et floue. Cette valeur est facultative ;
- A la couleur de l’ombre. On va ici pouvoir passer toutes les valeurs de couleurs (que nous étudierons plus tard) disponibles.
See the Pen Cours HTML CSS 4.4.5 by Pierre (@pierregiraud) on CodePen.
En plus de cela, nous allons pouvoir définir plusieurs ombres différentes pour un même texte. Pour faire cela, il suffit de séparer les différentes déclarations relatives à chaque ombre par une virgule dans la propriété text-shadow
.
See the Pen Cours HTML CSS 4.4.6 by Pierre (@pierregiraud) on CodePen.
Comme vous pouvez le voir ci-dessus, il faut faire bien attention avec cette propriété à ne pas rendre le texte illisible pour vos visiteurs ! Pour cela, nous allons pouvoir ajouter de la transparence à nos ombres en utilisant par exemple une notation RGBa
pour la couleur. Nous reviendrons sur ces notations dans le chapitre de ce cours dédié à la couleur.
See the Pen Cours HTML CSS 4.4.7 by Pierre (@pierregiraud) on CodePen.