CSS > Les textes

Cliquez sur les exemples de code CSS pour voir le résultat appliqué à la colonne de droite ou l'un de ses éléments contenus.

color : couleur du texte

La couleur peux être :

  • Un nom de couleur : color: red;
     
  • Une couleur RGB où rouge, vert et bleu sont les couleurs primaires en synthèse additive et prennent chacune une valeur entre 0 et 255:
     
    • Notation hexadécimale : color: #0000FF;
       
    • Notation décimale : color: rgb(0,255,0);
       
    • Notation en pourcentage : color: rgb(50%,80%,20%);
       
  • La valeur transparent

Remarque :
white = rgb(255,255,255) = rgb(100%,100%,100%) = #FFF = #FFFFFF

Valeur héritée oui
Valeur par défaut -
Compatibilité navigateurs Voir www.quirksmode.org

En savoir plus :

Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet Graecis nominibus appellentur, quae isdem ad arbitrium inposita sunt conditoris, primigenia tamen nomina non amittunt, quae eis Assyria lingua institutores veteres indiderunt.

text-align : alignement horizontal du texte
  • Aligné à gauche : text-align: left;
  • Aligné à droite : text-align: right;
  • Centré : text-align: center;
  • Justifié (lignes de longueur égales) : text-align: justify;
Valeurs possibles left, right, center, justify, inherit
Valeur héritée oui
Valeur par défaut left ou right (dépend de la direction du texte)
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet Graecis nominibus appellentur, quae isdem ad arbitrium inposita sunt conditoris, primigenia tamen nomina non amittunt, quae eis Assyria lingua institutores veteres indiderunt.

text-decoration : ajoute ou supprime une décoration au texte
  • Souligné : text-decoration: underline;
  • Ligne au dessus : text-decoration: overline;
  • Barré : text-decoration: line-through;
  • Clignotant (mal supporté) : text-decoration: blink;
  • Normal : text-decoration: none;

Remarque : cette propriété est très souvent utilisée pour supprimer le soulignement automatique des liens.

Valeurs possibles none, underline, overline, line-through, blink, inherit
Valeur héritée non
Valeur par défaut none
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim multitudine hominum.

text-transform : transformer les lettres en majuscules ou minuscules
  • Majuscules : text-transform: uppercase;
  • Minuscules : text-transform: lowercase;
  • Premières lettres en majuscule : text-transform: capitalize;
  • Normal : text-transform: none;
Valeurs possibles none, uppercase, lowercase, capitalize, inherit
Valeur héritée oui
Valeur par défaut none
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim multitudine hominum.

text-indent : retrait de la première ligne de texte
  • text-indent: 50px;
  • text-indent: 150px;
  • text-indent: -50px;
Valeurs possibles longueur en px, em, %, pt, cm, ...
inherit
Valeur héritée oui
Valeur par défaut 0
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet Graecis nominibus appellentur, quae isdem ad arbitrium inposita sunt conditoris, primigenia tamen nomina non amittunt, quae eis Assyria lingua institutores veteres indiderunt.

line-height : hauteur d'une ligne de texte
  • line-height: 80%;
  • line-height: 300%;
  • line-height: 5em;
  • line-height: normal;
Valeurs possibles hauteur en px, em, %, pt, cm, ...
nombre multipliant la taille courante
normal
inherit
Valeur héritée oui
Valeur par défaut normal
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet Graecis nominibus appellentur, quae isdem ad arbitrium inposita sunt conditoris, primigenia tamen nomina non amittunt, quae eis Assyria lingua institutores veteres indiderunt.

letter-spacing : espacement additionnel entre deux lettres
  • letter-spacing: 5px;
  • letter-spacing: -2px;
  • letter-spacing: 5pt;
  • letter-spacing: normal;
Valeurs possibles espacement en px, em, pt, cm, ...
normal
inherit
Valeur héritée oui
Valeur par défaut normal
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim multitudine hominum.

word-spacing : espacement additionnel entre deux mots
  • word-spacing: 5px;
  • word-spacing: -3px;
  • word-spacing: 3cm;
  • word-spacing: normal;
Valeurs possibles espacement en px, em, pt, cm, ...
normal
inherit
Valeur héritée oui
Valeur par défaut normal
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim multitudine hominum.

white-space : spécifie comment sont traités les espaces dans le texte
  • white-space: pre; : le texte est préservé tel qu'il est rentré dans le code source.
  • white-space: nowrap; : les séquences d'espaces ne font qu'un et les retours à la ligne sont supprimés.
  • white-space: pre-line; : les séquences d'espaces ne font qu'un, les retours à la ligne sont conservés et se font également si nécessaire.
  • white-space: pre-wrap; : les séquences d'espaces sont conservées, les retours à la ligne sont conservés et se font également si nécessaire.
  • white-space: normal; : les séquences d'espaces ne font qu'un et les retours à la ligne se font seulement lorsque c'est nécessaire.
Valeurs possibles normal, nowrap, pre, pre-line, pre-wrap, inherit
Valeur héritée oui
Valeur par défaut normal
Compatibilité navigateurs Voir www.quirksmode.org

Abusus enim , diutius rexit, ex agrestibus .

Place à la pratique :

 
THIS CONTENT WILL BE REPLACED BY INTERPRETED HTML TAPED IN THE "code" TEXTAREA

2011 - Sylvain Boureliou - sylvain.boureliou@gmail.com - www.boureliou.com