CSS – Texte

Anne Coulombe2 weeks ago

3 minutes read

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 couleur 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 l’espacement des lettres La propriété est utilisée pour ajouter ou soustraire un espace entre les lettres qui composent un mot.
Le espacement des mots La propriété est utilisée pour ajouter ou soustraire un espace entre les mots d’une phrase.
Le retrait du texte La propriété est utilisée pour indenter le texte d’un paragraphe.
Le aligner le texte La propriété est utilisée pour aligner le texte d’un document.
Le texte-décoration La propriété est utilisée pour souligner, surligner et barrer du texte.
Le transformation de texte La propriété est utilisée pour mettre du texte en majuscule ou convertir du texte en lettres majuscules ou minuscules.
Le espace blanc La propriété est utilisée pour contrôler le flux et la mise en forme du texte.
Le ombre de texte 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>

Cela 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>

Cela 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 normal 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>

Cela 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 normal 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 d’indentation.

<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>

Cela produira le résultat suivant –

Définir l’alignement du texte

L’exemple suivant montre comment aligner un texte. Les valeurs possibles sont gauche, droite, centrer, justifier.

<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 aucun, souligner, surligner, barrer, clignoter.

<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 pour un texte. Les valeurs possibles sont aucun, 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, pré, 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>

Cela produira le résultat suivant –

#CSS #Texte

Tags

Anne Coulombe2 weeks ago

3 minutes read

Anne Coulombe