Texte

Alignement du texte

• La propriété text-align définit l'alignement du texte.
• Elle correspond à l'attribut "align" utilisé dans les versions anciennes de HTML.
• Le texte peut être aligné à gauche ("left"), à droite ("right"), centré ("center") ou justifié ("justify") de sorte que les marges à gauche et à droite soient droites toutes les deux.
• Exemple :

  th {
    text-align: center;
  }
  td {
    text-align: right;
  }
  p {
    text-align: justify;
  }

Décoration du texte

• La propriété text-decoration décrit les décorations qui sont ajoutées au texte d'un élément.
• Les significations des valeurs :
  • none : aucune décoration
  • underline : le texte est souligné
  • overline : le texte reçoit un trait au-dessus
  • line-through : le texte est rayé en son milieu
• Code :

  <p style="text-decoration: underline">texte souligné</p>
  <p style="text-decoration: overline">texte avec un trait au-dessus</p>
  <p style="text-decoration: line-through">texte rayé</p>

  Dans le navigateur :

  texte souligné

  texte avec un trait au-dessus

  texte rayé

Indentation du texte

• La propriété text-indent définit l'indentation pour la première ligne du texte dans un bloc.
• Code :
  <p style="text-indent: 30px">Cette propriété spécifie un alinéa pour la première ligne du texte dans un bloc. Plus précisément, celui de la première boîte de la première rangée dans la première boîte de ligne de ce bloc. Cette boîte est indentée à partir du bord gauche (ou droit, pour une mise en page de droite à gauche) de la boîte de ligne.</p>
  Dans le navigateur :

  Cette propriété spécifie un alinéa pour la première ligne du texte dans un bloc. Plus précisément, celui de la première boîte de la première rangée dans la première boîte de ligne de ce bloc. Cette boîte est indentée à partir du bord gauche (ou droit, pour une mise en page de droite à gauche) de la boîte de ligne.

L'espacement des lettres et des mots

• La propriété letter-spacing définit l'espace entre les caractères du texte.
• valeurs possibles : "normal" ou une valeur numérique
• Code :
  <span style="letter-spacing: 5px">"normal"</span>
  <span style="letter-spacing: normal">est l'espacement normal pour la police en question.</span>
  Dans le navigateur :
  "normal" est l'espacement normal pour la police en question.
• La propriété word-spacing définit l'espace entre les mots du texte.
• valeurs possibles : "normal" ou une valeur numérique
• Code :
  <span style="word-spacing: normal">"La valeur normal"</span>
  <span style="word-spacing: 0.8em">est l'espacement normal pour la police en question.</span>
  Dans le navigateur :
  La valeur "normal" est l'espace-mot normal, tel que défini par la police en question et/ou le navigateur.

Transformation du texte

• La propriété text-transform définit la casse du texte.
• Valeurs possibles :
  • uppercase : met les caractères en majuscules
  • lowercase : met les caractères en minuscules
  • capitalize : met le premier caractère en majuscule
  • none : aucune transformation
• Exemple :

  h1 {
    text-transform: uppercase;
  }
  li {
    text-transform: capitalize;
  }