CSS : mettre en forme vos textes (partie 2)


css-mise-en-forme-du-texte-2


On a vu la dernière fois comment marier choisir une police de caractères, une taille et un style (relire notre article). Aujourd’hui, on va aller un peu plus loin et voir ce que nous pouvons faire de ces textes et comment les mettre en forme de façon plus avancée.
Ici, nous verrons les propriétés les plus communes.  Depuis CSS3, de nouvelles propriétés sont apparues mais nous les aborderont dans une 3e partie avant de finir , enfin, par quelques petits trucs et astuces pour avoir des textes flottants, des lettrines et autres réjouissances typographiques !

Mais tout d’abord, regardons ce qu’on a à dispo :

Code source    
.monTexte{
color:#FFFFFF;
text-align:center;
vertical-align: top;
text-decoration:underline; 
text-transform:uppercase; 
text-indent:10px; 
letter-spacing:2px;
word-spacing:10px;
line-height:200%; 
 
}

 

Wow! Ca fait pas mal de choses, déjà, non ? Reprenons les un par un.

1. La couleur

Color parle de lui-même. Il s’agit de la couleur de notre texte. Quand vous voyez cette balise dans votre feuille de style, elle se rapporte forcément au texte (pour la couleur de fond d’un élément, on utilisera la balise background-color). Pour lui indiquer la valeur, on peut utiliser 3 différentes écritures :

- la valeur hexadécimale, comme #FFFFFF pour le blanc
- la valeur RVB, comme rgb(255, 255, 255) pour le blanc toujours
- ou le nom de la couleur, comme white (toujours pour le blanc)

Vous trouverez plus d’exemples sur ce site.

2. L’alignement

Text-align, c’est l’alignement horizontal du texte. Là, aussi, ça parle de soi. Vous pouvez choisir 4 valeurs différentes :

- centered (pour centrer votre texte)
- left (pour l’aligner à gauche)
- right (pour l’aligner à droite)
- justified (pour le justifier)

Vertical-align règle quant à lui l’alignement vertical. On utilise par exemple les propriétés top, middle, bottom pour définir sa position.

3. Les « décorations »



css-text-decoration



Text-decoration
 est surtout utilisé pour le soulignement, en particulier pour les liens. Vous pouvez cependant utiliser d’autres valeurs :

- overline, pour ajouter une barre au dessus du texte,
- line-through, pour barrer un texte
- underline, le soulignement donc
- none : pour enlever toute décoration sur le texte. On utilise beaucoup cette valeur pour que les liens ne soient pas soulignés par défaut.

4. La casse

Text-transform vous permet de changer la casse de votre texte. Choisissez :

- uppercase : pour mettre tout en majuscule (c’est assez pratique si vous voulez que tous les éléments d’un menu apparaissent en majuscule qu’importe comment ils ont été écrits au départ)
- lowercase : pour passer tout le texte en minuscule,
- capitalize : pour mettre une majuscule au début de chaque mot

5. L’indentation

Text-indent permet de régler le décalage de la première ligne de votre texte.


text-indent


6. Les espacements

Letter-spacing permet de régler l’espacement entre chaque caractère du  texte. Vous pouvez même indiquer une valeur négative si vous souhaitez réduire l’espacement entre les caractères.
Word-spacing permet quant à lui de régler l’espacement entre les mots.

7. La hauteur des lignes

Line-height permet de régler la hauteur des lignes de texte.

 

Mots-clés: , , , , , , , ,


À propos de Laetitia

J'aime le papier, je déteste la paperasse.


3 Responses to CSS : mettre en forme vos textes (partie 2)

  1. Lunaes says:

    Mes cours de codage sont loin donc merci pour ton article ! je vais allé lire le premier : )
    Incroyable tu viens de résoudre le mystère des typos pour les sites internet dans ton premier article merci !

  2. Je ne sais pas pour les « décorations », j’aime beaucoup ce genre d’article. Je vais aller voir la partie 1 ;-)

    Bisou

  3. Je ne savais pas pour les « décorations », j’aime beaucoup ce genre d’article. Je vais aller voir la partie 1 ;-)

    Bisou

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑