b1001d accompagne vos mille et un projets web

Hexa PAGE - Classes - Texte

Hexa PAGE - Les classes

Alignement du texte

<p class="hx-center">Le texte de cette ligne est centré</p>

Le texte de cette ligne est centré

Le texte est aligné à gauche (par défaut) ou à droite. Il peut également être centré ou justifié.

  • hx-left
    Alignement à gauche du texte
  • hx-right
    Alignement à droite du texte
  • hx-center
    Centrage du texte
  • hx-justify
    Justification du texte

Taille du texte

<p class="hx-larger">Le texte de cette ligne est agrandi de 40%</p>

Le texte de cette ligne est agrandi de 40%

Le texte est agrandi ou réduit par rapport à la taille du texte de l'élément HTML parent.

  • hx-smaller
    Le texte est réduit de 20%
  • hx-xsmaller
    Le texte est réduit de 40%
  • hx-xxsmaller
    Le texte est réduit de 60%
  • hx-xxxsmaller
    Le texte est réduit de 80%
  • hx-xxxxsmaller
    Le texte est réduit de 100% (il devient invisible)
  • hx-larger
    Le texte est agrandi de 20%
  • hx-xlarger
    Le texte est agrandi de 40%
  • hx-xxlarger 
    Le texte est agrandi de 60%
  • hx-xxxlarger
    Le texte est agrandi de 80%
  • hx-xxxxlarger
    Le texte est agrandi de 100%

Mise en avant du texte

Classique

<p class="hx-bold hx-italic hx-underline">Le texte de cette ligne est en gras, italic et souligné</p>

Le texte de cette ligne est en gras, italic et souligné

Trois méthode classiques pour faire ressortir un texte : en gras, italique et souligné.

  • hx-bold 
    Le texte est mis en gras
  • hx-italic 
    Le texte est mis en italique
  • hx-underline 
    Le texte est souligné

Avec un surligneur

<p>Exemple de <span class="hx-highlight hx-blue">surlignage bleu</span> dans un paragraphe</p>

Exemple de surlignage bleu dans un paragraphe

Le texte est mis en avant à coup de surligneur rouge, bleu, vert ou jaune.

Le texte surligné ne peut être coupé sur deux lignes.

  • hx-highligth 
    Application du surligneur
    • hx-blue
      Tracé de couleur bleue
    • hx-red
      Tracé de couleur rouge
    • hx-green
      Tracé de couleur verte
    • hx-yellow
      Tracé de couleur jaune
    • hx-blue2
      2nd tracé de couleur bleue
    • hx-red2
      2nd tracé de couleur rouge
    • hx-green2
      2nd tracé de couleur verte
    • hx-yellow2
      2nd tracé de couleur jaune

Couleur du texte

Voir Hexa PAGE - Classes - Couleurs