Le formatage du texte

 

Alignement du texte, hauteur de ligne, soulignement, ... ce sont des propriétés très très simples !
Mais il y a une difficulté : à quel élément doit-on appliquer la propriété ? au conteneur ou au contenant ?

Par exemple pour aligner un texte horizontalement, la propriété doit cibler le paragraphe qui contient le texte

#monP { text-align: center; }

 

Entrons dans le vif du Sujet

s'hérite CSS1 iemzchromeoperasafari
I Habillage : text-decoration, text-transform,

text-decoration

Exemple

p#deco1 {text-decoration:overline; }

p#deco2 {text-decoration:line-through; }

p#deco3 {text-decoration:blink; }

text-transform

Exemple

p#deco4 {text-transform:uppercase; }

p#deco5 {text-transform:capitalize; }

s'hérite CSS1 iemzchromeoperasafari
II Espace entre les mots, les lettres, les lignes

line-height

Exemple

p#espace1 {"line-height:2em;" }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est. In mollis, nisl eu posuere scelerisque, ante tellus auctor dolor, sed luctus lacus orci vel lectus. Phasellus vel nulla lacus, vel laoreet massa. Fusce pretium sodales lorem. Mauris non nibh nec tortor laoreet hendrerit. 

p#espace2 {line-height:0.8em; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est. In mollis, nisl eu posuere scelerisque, ante tellus auctor dolor, sed luctus lacus orci vel lectus. Phasellus vel nulla lacus, vel laoreet massa. Fusce pretium sodales lorem. Mauris non nibh nec tortor laoreet hendrerit. 

word-spacing

Exemple

p#espace3 {word-spacing : 2em;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est. In mollis, nisl eu posuere scelerisque, ante tellus auctor dolor. 

p#espace4 {word-spacing:-0.5em;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est. In mollis, nisl eu posuere scelerisque, ante tellus auctor dolor, sed luctus lacus orci vel lectus. Phasellus vel nulla lacus, vel laoreet massa. Fusce pretium sodales lorem. Mauris non nibh nec tortor laoreet hendrerit. 

letter-spacing

Exemple

p#espace5 {letter-spacing:0.1em}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est.

p#espace6 {letter-spacing:-0.1em ;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est.

s'hérite CSS1 iemzchromeoperasafari
III Alignement du texte et des mots

text-align

 text-align s'applique sur un élément bloc (conteneur) et contrôle l'alignement

  1. gauche (par défaut),
  2. droite,
  3. centré,
  4. justifié

de tous les élements de type "en-ligne" contenus dans ce bloc conteneur.  (voir la section "bloc ou en-ligne")

Exemple

p#align1 {text-align:right;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est.

p#align2{text-align:justify;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est. In mollis, nisl eu posuere scelerisque, ante tellus auctor dolor, sed luctus lacus orci vel lectus. Phasellus vel nulla lacus, vel laoreet massa. Fusce pretium sodales lorem. Mauris non nibh nec tortor laoreet hendrerit. 

vertical-align

vertical-align  ne permet pas :

Il n'est pas fait pour ça, mais en général pour aligner deux éléments en-ligne l'un par rapport à l'autre. Il n'y a que dans les cellules de tableaux (ou les éléments structurés comme tels) que cette propriété aligne tout le contenu verticalement.

Exemple

p#align3 {font-size:24px;}vertical-align:super;

p#align4 {font-size:12px;}

text-indent

indentation (ou retrait de première ligne) appliquée à la première ligne d'un bloc.

Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tempus est. In mollis, nisl eu posuere scelerisque, ante tellus auctor dolor, sed luctus lacus orci vel lectus. Phasellus vel nulla lacus, vel laoreet massa.

s'hérite CSS1 iemzchromeoperasafari
IV Habillage des listes

Style de la puce ou le type de numérotation : list-style-type

Référence
list-style-type permet de spécifier le type de puce ou de numéro selon le type de liste

Pour une liste non ordonnée, les valeurs possibles sont  :

  • disc, 
  • circle, 
  • square 
  • et none.

Pour une liste ordonnée, les valeurs possibles sont 

  1. decimal (1, 2...), 
  2. lower roman (i, ii...), 
  3. upper-roman (I, II...), 
  4. lower-alpha (a, b...), 
  5. upper-alpha (A, B...)
  6. et none.

 

Exemple
  • Lorem ipsum
  • dolor sit amet,
  • consectetur
  • adipiscing elit.
  1. Lorem ipsum
  2. dolor sit amet,
  3. consectetur
  4. adipiscing elit.

Spécifier une image comme puce dans une liste : list-style-image

list-style-image permet de spécifier une puce pour une liste. Il faut indiquer l'URL de l'image à utiliser.

Exemple
  • Lorem ipsum
  • dolor sit amet,
  • consectetur
  • adipiscing elit.

Alignement des puces dans une liste : list-style-position

list-style-position permet de spécifier la position de la puce ou du numéro. Les valeurs possibles sont :

Exemple
  • Lorem ipsum
  • dolor sit amet,
  • consectetur
  • adipiscing elit.

Par défaut :

  • Lorem ipsum
  • dolor sit amet,
  • consectetur
  • adipiscing elit.
Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous
Soient les listes ordonnées imbriquées suivantes :
  1. xxxxxxx
    1. xxxxxxx
      1. xxxxxxx
        1. xxxxxxx
        2. xxxxxxx
      2. xxxxxxx
    2. xxxxxxx
  2. xxxxxxx

Ecrire la feuille de style en prenant comme sélecteur uniquement des balises (sans toucher au html) pour obtenir

solution