W3Docs

Apparence

Français

Texte CSS ​

Ici, nous examinons les propriétés qui peuvent vous aider à styliser votre texte

Couleur du 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) ).

Exemple de la propriété color : ​

Exemple d’utilisation de la propriété CSS color :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>
Try it Yourself »

Résultat ​

Text Color

Alignement du texte ​

La propriété d’alignement 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 :

  • Gauche (text-align: left) - aligne le texte à gauche
  • Droite (text-align: right) - aligne le texte à droite
  • Centre (text-align: center) - place le texte au centre de la page
  • Justifié (text-align: justify) - étire la ligne de texte pour aligner les bords gauche et droit (comme dans les magazines et les journaux)

Par défaut, les navigateurs alignent le texte à gauche, et s’il faut aligner le texte à droite ou le placer au centre, nous devons utiliser la valeur correspondante.

Exemple de la propriété text-alignment : ​

Exemple d’utilisation de la propriété CSS text-alignment :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>
Try it Yourself »

Décoration du texte ​

La décoration du texte est utilisée pour définir la décoration du texte. En CSS3, c’est un raccourci pour les propriétés CSS text-decoration-line, CSS text-decoration-color et CSS text-decoration-style.

La propriété decoration est utilisée pour spécifier les décorations de ligne ajoutées au texte. Les valeurs suivantes sont valides pour la propriété text-decoration.

  • Sur-ligne (text-decoration:overline) - chaque ligne de texte a une ligne au-dessus
  • Souligné (text-decoration:underline) - chaque ligne de texte est soulignée
  • Barré (text-decoration:line-through) - chaque ligne de texte est barrée
  • Aucun (text-decoration:none) - aucune décoration de texte n’est appliquée

Exemple de la propriété text-decoration : ​

Exemple d’utilisation de la propriété CSS text-decoration :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>
Try it Yourself »

Résultat ​

Text Decoration

Transformation du texte ​

La propriété transform est utilisée pour contrôler la capitalisation du texte. Cela signifie que vous pouvez définir votre texte en majuscules, en minuscules ou en casse de titre.

La propriété transform a les valeurs suivantes :

  • Majuscules (text-transform: uppercase) - convertit tous les caractères en majuscules
  • Minuscules (text-transform: lowercase) - convertit tous les caractères en minuscules
  • Capitaliser (text-transform: capitalize) - convertit le premier caractère de chaque mot en majuscule

Exemple de la propriété text-transform : ​

Exemple d’utilisation de la propriété CSS text-transform :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>
Try it Yourself »

Résultat ​

Text Transform

Ombre du texte ​

Nous utilisons la propriété text-shadow lorsque nous voulons donner une ombre à notre texte.

La propriété shadow est utilisée pour appliquer divers effets d’ombre au texte. Elle accepte une liste de valeurs. Chaque élément de la liste peut comporter deux valeurs ou plus séparées par des virgules.

La syntaxe de la propriété text-shadow peut ressembler à ceci

Exemple de la propriété CSS text-shadow

css
text-shadow: h-shadow v-shadow blur color

Here vous pouvez voir des exemples d’ombre du texte.

Retrait du texte ​

La propriété text-indent est utilisée pour spécifier la longueur de l’espace vide de la première ligne dans un bloc de texte. Les valeurs ci-dessous sont valides pour cette propriété :

  • Longueur, qui spécifie le retrait en px, pt, cm, em, etc. La valeur par défaut est 0. Les valeurs négatives sont autorisées.
  • Pourcentage - qui spécifie le retrait en pourcentage de la largeur du bloc contenant.
  • Each-line, lorsque le retrait affecte la première ligne ainsi que chaque ligne après un saut de ligne forcé, mais n’affecte pas les lignes après un retour à la ligne automatique.
  • Hanging, qui inverse les lignes qui sont indentées. La première ligne n’est pas indentée.
  • Initial, qui fait utiliser à la propriété sa valeur par défaut.
  • Inherit, qui hérite de la propriété de l’élément parent.

Exemple de la propriété text-indent : ​

Exemple de la propriété text-indent

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Espacement des lettres ​

La propriété CSS letter-spacing permet de définir l’espace entre les lettres/caractères d’un texte. Les valeurs suivantes sont prises en charge par cette propriété :

  • Normal, ce qui signifie qu’il n’y aura pas d’espaces supplémentaires entre les caractères. C’est la valeur par défaut de cette propriété.
  • Longueur, qui définit un espace supplémentaire entre les caractères. Les valeurs négatives sont autorisées.
  • Initial, qui fait utiliser à la propriété sa valeur par défaut.
  • Inherit, qui hérite de la propriété de l’élément parent.

Exemple de la propriété letter-spacing : ​

Exemple de la propriété letter-spacing

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>
Try it Yourself »

Hauteur de ligne ​

La propriété line-height définit la hauteur de ligne. Elle est utilisée pour définir l’interligne des lignes d’un texte. Si la valeur de line-height est supérieure à la valeur de font-size d’un élément, la différence correspondra à l’interligne du texte. Voici les valeurs prises en charge par cette propriété :

  • Normal, qui définit une hauteur de ligne normale. C’est la valeur par défaut de cette propriété.
  • Longueur, qui définit une hauteur de ligne fixe en px, cm, etc.
  • Nombre, qui définit un nombre multiplié par la taille de police actuelle pour définir la hauteur de ligne.
  • %, qui définit une hauteur de ligne en pourcentage de la taille de police actuelle.
  • Initial, qui fait utiliser à la propriété sa valeur par défaut.
  • Inherit, qui hérite de la propriété de l’élément parent.

Exemple de la propriété line-height : ​

Exemple de la propriété line-height

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>
Try it Yourself »

Espacement des mots ​

Avec l’aide de la propriété CSS word-spacing, nous pouvons modifier l’espace entre les mots dans un texte, et non entre les caractères individuels. Elle prend en charge les valeurs ci-dessous :

  • Normal, qui spécifie un espacement normal entre les mots. C’est la valeur par défaut de cette propriété.
  • Longueur, qui spécifie un espacement supplémentaire entre les mots. Peut être spécifiée en px, pt, cm, em, etc. Les valeurs négatives sont valides.
  • Initial, qui fait utiliser à la propriété sa valeur par défaut.
  • Inherit, qui hérite de la propriété de l’élément parent.

Exemple de la propriété word-spacing : ​

Exemple de la propriété word-spacing

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>
Try it Yourself »

Practice ​

Which of the following properties can you use to control the appearance of text in CSS?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.