Articles
Introduction au CSS
Propriétés CSS liées au texte

Propriétés CSS liées au texte

Cet article explique les propriétés CSS liées au texte.

Vous pouvez apprendre à utiliser et à écrire les propriétés text-align, text-decoration et text-transform.

YouTube Video

Création de HTML pour aperçu

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Typographie (Liée au texte)

Propriété text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align est une propriété en CSS utilisée pour spécifier l'alignement horizontal du texte et des éléments en ligne. Elle est généralement utilisée pour aligner le texte des paragraphes ou des titres à gauche, à droite ou au centre. Elle joue un rôle important dans la mise en page des pages web et le formatage du texte.

Valeurs principales pour text-align

left (aligné à gauche) 
1p {
2    text-align: left;
3}
  • left aligne le texte à gauche (c'est la méthode d'alignement par défaut pour de nombreuses langues).
right (aligné à droite) 
1p {
2    text-align: right;
3}
  • right aligne le texte à droite. Elle est particulièrement efficace pour les langues écrites de droite à gauche, telles que l'arabe et l'hébreu.
center (aligné au centre) 
1p {
2    text-align: center;
3}
  • center aligne le texte au centre. Il est fréquemment utilisé pour les titres et en-têtes.
justify (justifié) 
1p {
2    text-align: justify;
3}
  • justify aligne les bords gauche et droit des lignes de manière égale, donnant une impression proprement alignée. Il est utilisé dans des mises en page comme les journaux et les magazines.
start (aligné au départ) 
1p {
2    text-align: start;
3}
  • start aligne le texte en fonction de la position de départ. Pour les langues écrites de gauche à droite, il fonctionne de la même manière que l'alignement à gauche.
end (aligné à la fin) 
1p {
2    text-align: end;
3}
  • end aligne le texte en fonction de la position de fin. Pour les langues écrites de gauche à droite, il fonctionne de la même manière que l'alignement à droite.

Utilisation et exemples de text-align

Titre utilisant un alignement au centre
  • L'alignement au centre est souvent utilisé pour les titres des pages web et des documents. Il est esthétique et conduit à un design visuellement équilibré.
Alignement à gauche ou à droite pour les paragraphes
  • Les paragraphes de texte sont généralement alignés à gauche par défaut, mais l'alignement à droite ou au centre peut être utilisé pour des designs spécifiques.
Justifier le texte uniformément
  • Lorsqu'il est justifié avec justify, chaque ligne de texte est uniformément alignée avec les bords gauche et droit. Il est utile pour des mises en page de style journal ou magazine.

Résumé

  • text-align est une propriété CSS utilisée pour aligner horizontalement le texte ou les éléments en ligne.
  • Elle peut gérer divers alignements tels que l'alignement à gauche, l'alignement à droite, l'alignement au centre et la justification.
  • Choisir l'alignement approprié en fonction de la mise en page et des objectifs de conception est essentiel pour obtenir un design lisible et esthétique.

Utilisons efficacement l'alignement du texte dans votre design avec text-align.

La propriété text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration est une propriété CSS utilisée pour appliquer des soulignements, des surlignements, des barrés ou des lignes stylisées personnalisées au texte. En utilisant cette propriété, vous pouvez rendre le style du texte plus décoratif ou visuellement plus accentué.

Explication :

  • La classe text-decoration-underline affiche un soulignement sur le texte.
  • La classe text-decoration-overline dessine une ligne au-dessus du texte.
  • La classe text-decoration-line-through applique un barré au texte.
  • La classe text-decoration-custom-underline est un exemple de personnalisation de la couleur, du style et de l'épaisseur du soulignement.

Valeurs clés de text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Spécifier none supprimera toutes les décorations du texte. Utilisé lorsque vous souhaitez supprimer le soulignement des liens, par exemple.
underline 
1p {
2    text-decoration: underline;
3}
  • Spécifier underline dessinera un soulignement sous le texte. Cela peut être utilisé pour les liens ou les parties que vous souhaitez mettre en valeur.
overline 
1p {
2    text-decoration: overline;
3}
  • Spécifier overline dessinera une ligne au-dessus du texte. Utilisé pour modifier l'apparence ou pour une décoration spéciale.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Spécifier line-through dessinera un barré à travers le texte. Il est utilisé pour indiquer des corrections.
blink（点滅）
  • blink est une valeur qui fait clignoter le texte, mais elle n'est plus réellement utilisée car la plupart des navigateurs ne la prennent plus en charge.

Paramètres avancés de text-decoration

text-decoration permet des réglages détaillés comme suit :

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • La propriété text-decoration-color vous permet de spécifier la couleur des soulignements ou des barrés. Par défaut, elle correspond à la couleur du texte, mais vous pouvez ajouter un accent visuel en choisissant une couleur différente.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • La propriété text-decoration-style vous permet de spécifier le style des lignes décoratives. Les valeurs incluent les suivantes :.
    • solid (Par défaut, ligne continue)
    • double (ligne double)
    • pointillé (ligne pointillée)
    • tireté (ligne en tirets)
    • ondulé (ligne ondulée)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • La propriété text-decoration-thickness vous permet de spécifier l'épaisseur des lignes décoratives. Vous pouvez l'ajuster en utilisant des unités comme 2px ou 0.1em, par exemple.

Résumé :

  • text-decoration est une propriété utilisée pour ajouter des lignes décoratives au texte, comme des soulignements ou des barrés.
  • Avec text-decoration-color, text-decoration-style et text-decoration-thickness, une personnalisation plus détaillée est possible.
  • Elle est fréquemment utilisée pour mettre en valeur des liens ou du texte important, ou comme élément de design.

En utilisant text-decoration, vous pouvez ajouter des accents subtils ou mettre l'accent sur le texte.

Propriété text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform est une propriété CSS permettant de transformer la casse du texte. Cette propriété vous permet de contrôler le format d'affichage du texte spécifié dans le HTML, en convertissant automatiquement la casse du texte saisi par l'utilisateur ou du texte existant.

Explication :

  • La classe text-transform-none affiche le texte sans le modifier par rapport à son état d'origine.
  • La classe text-transform-capitalize convertit la première lettre de chaque mot en majuscule.
  • La classe text-transform-uppercase convertit tout le texte en majuscules.
  • La classe text-transform-lowercase convertit tout le texte en minuscules.

Valeurs principales de text-transform

none 
1p {
2    text-transform: none;
3}
  • Spécifier none laisse le texte inchangé.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Spécifier capitalize convertit la première lettre de chaque mot en majuscule. Les limites des mots sont reconnues par les espaces ou la ponctuation.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Spécifier uppercase convertit tout le texte en majuscules.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Spécifier lowercase convertit tout le texte en minuscules.
full-width
  • Spécifier full-width convertit le texte en caractères en pleine largeur. Cela est généralement utilisé comme un style spécial pour traiter les Kanji ou les Kana, mais peu de navigateurs le prennent en charge.

Résumé :

  • text-transform est une propriété CSS pratique pour modifier la casse du texte.
  • Elle est souvent utilisée pour créer une cohérence visuelle dans les titres, les menus de navigation et les textes des formulaires.
  • Elle est utile lorsque vous souhaitez afficher un texte dans un style spécifique indépendamment des saisies des utilisateurs.

En utilisant cette propriété, vous pouvez facilement manipuler le texte tout en maintenant une cohérence visuelle.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées aux policesPropriétés CSS liées à l'espacement du texte