Texte CSS
Ici, nous examinons les propriétés qui peuvent aider à styler votre texte.
Couleur de texte
La propriété color est utilisée pour définir la couleur du texte. Pour spécifier la couleur, vous pouvez utiliser un nom de couleur (red), une valeur HEX (#ff0000) ou une valeur RGB (rgb (255,0,0) ).
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p style="color:#ff0000">Quelque paragraphe rouge.</p>
</body>
</html>Alignement de texte
La propriété alignment est utilisée pour aligner le texte à l'intérieur d'un élément à gauche, à droite, au centre, etc.
L'alignement du texte a quatre valeurs:
- Left (text-align: left) - aligne le texte à gauche
- Right (text-align: right) - aligne le texte à droite
- Center (text-align: center) - met le texte au centre de la page
- Justify (text-align: justify) - étire la ligne de texte pour aligner les extrémités gauche et droite (comme dans les magazines et les journaux)
Les navigateurs alignent par défaut le texte à gauche, et s’il est nécessaire d’aligner le texte à droite ou le placer au centre, nous devrions utiliser la valeur correspondante.
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p>Quelque paragraphe</p>
<p style="text-align:center">Quelque paragraphe avec la valeur center.</p>
<p style="text-align:right">Quelque paragraphe avec la valeur right.</p>
<p style="text-align:justify">Quelque paragraphe avec la valeur justify.</p>
</body>
</html>Décoration de texte
La propriété decoration est utilisée pour spécifier les décorations de lignes ajoutées au texte. Les valeurs suivantes sont valides pour la propriété de décoration de texte.
- Overline (text-decoration:overline) - chaque ligne de texte est surmontée d'une ligne
- Underline (text-decoration:underline) - chaque ligne de texte est soulignée
- Line-through (text-decoration:line-through) - chaque ligne de texte est traversée par une ligne
- None (text-decoration:none) - aucune décoration de texte n'est appliquée
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<a style="text-decoration:none">Ceci est un lien sans soulignement</a>
<h1 style="text-decoration:overline">Titre avec la valeur overline.</h1>
<p style="text-decoration:line-through">Quelque paragraphe avec la valeur line-through.</p>
<a style="text-decoration:underline">Quelque hyperlien avec la valeur underline.</a>
</body>
</html>Transformation de texte
La propriété transform est utilisé pour contrôler la capitalisation du texte. Cela signifie que vous pouvez définir votre texte en majuscule, minuscule ou en majuscule (cas du titre).
La propriété Transform a les valeurs suivantes:
- Uppercase (text-transform: uppercase) - convertit tous les caractères en majuscules
- Lowercase (text-transform: lowercase) - convertit tous les caractères en minuscule
- Capitalize (text-transform: capitalize) - convertit le premier caractère de chaque mot en majuscule
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p style="text-transform:uppercase">Paragraphe avec uppercase.</p>
<p style="text-transform:lowercase">Paragraphe avec lowercase.</p>
<p style="text-transform:capitalize">Paragraphe avec capitalize.</p>
</body>
</html>Ombre de texte
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p style="text-transform:uppercase">Paragraphe avec uppercase.</p>
<p style="text-transform:lowercase">Paragraphe avec lowercase.</p>
<p style="text-transform:capitalize">Paragraphe avec capitalize.</p>
</body>
</html>On utilise la propriété text-shadow lorsqu'on veut donner de l'ombre à notre texte.
La propriété shadow est utilisée pour appliquer divers effets d’ombre au texte. Il accepte une liste de valeurs. Chaque élément de la liste peut avoir deux ou plusieurs valeurs séparées par des virgules.
La syntaxe de la propriété text-shadow peut ressembler à
text-shadow: h-shadow v-shadow blur colorIci vous pouvez voir des exemples de l'ombre du texte.
Pratiquez vos connaissances
