CSS - Texte

Ce chapitre vous apprend à manipuler du texte à l'aide des propriétés CSS. Vous pouvez définir les propriétés de texte suivantes d'un élément -

le color La propriété est utilisée pour définir la couleur d'un texte.
le direction La propriété est utilisée pour définir la direction du texte.
le letter-spacing propriété est utilisée pour ajouter ou soustraire un espace entre les lettres qui composent un mot.
le word-spacing propriété est utilisée pour ajouter ou soustraire un espace entre les mots d'une phrase.
le text-indent propriété est utilisée pour mettre en retrait le texte d'un paragraphe.
le text-align La propriété est utilisée pour aligner le texte d'un document.
le text-decoration La propriété est utilisée pour souligner, surligner et barrer du texte.
le text-transform La propriété est utilisée pour mettre du texte en majuscule ou le convertir en majuscules ou minuscules.
le white-space La propriété est utilisée pour contrôler le flux et la mise en forme du texte.
le text-shadow La propriété est utilisée pour définir l'ombre du texte autour d'un texte.

Définir la couleur du texte

L'exemple suivant montre comment définir la couleur du texte. La valeur possible peut être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

Il produira le résultat suivant -

Définir la direction du texte

L'exemple suivant montre comment définir la direction d'un texte. Les valeurs possibles sont ltr ou rtl .

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

Il produira le résultat suivant -

Définir l'espace entre les caractères

L'exemple suivant montre comment définir l'espace entre les caractères. Les valeurs possibles sont normales ou un nombre spécifiant l'espace. .

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

Il produira le résultat suivant -

Définir l'espace entre les mots

L'exemple suivant montre comment définir l'espace entre les mots. Les valeurs possibles sont normales ou un nombre spécifiant l'espace .

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir le retrait du texte

L'exemple suivant montre comment mettre en retrait la première ligne d'un paragraphe. Les valeurs possibles sont % ou un nombre spécifiant l'espace de retrait .

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

Il produira le résultat suivant -

Définir l'alignement du texte

L'exemple suivant montre comment aligner un texte. Les valeurs possibles sont left, right, center, justify .

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Décorer le texte

L'exemple suivant montre comment décorer un texte. Les valeurs possibles sont none, underline, overline, line-through, blink .

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir les cas de texte

L'exemple suivant montre comment définir les cas d'un texte. Les valeurs possibles sont aucune, majuscule, majuscule, minuscule .

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir l'espace blanc entre le texte

L'exemple suivant montre comment l'espace blanc à l'intérieur d'un élément est géré. Les valeurs possibles sont normal, pre, nowrap .

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir l'ombre du texte

L'exemple suivant montre comment définir l'ombre autour d'un texte. Cela peut ne pas être pris en charge par tous les navigateurs.

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

Il produira le résultat suivant -