Une grande partie du formatage du texte se fait avec la propriété font (et ses sous-propriétés). Il est plus courant d'utiliser les sous-propriétés que font elle-même.
// la police
On utilise font-family: [la police ou famille de police]; pour indiquer la police
que l'on souhaite utiliser.
On indique généralement une famille de police, car il se peut que l'ordinateur du client ne
possède pas celle
que vous souhaitez. Dans le cas échéant, le navigateur utilisera une autre police de la famille, si elle est disponible.
Pour éviter les problèmes de compatibilité, on utilise toujours des polices
standards, elles sont :
Times (new roman)ArialVerdanaGeorgiaCourrier new
Mais c'est toujours mieux d'utiliser une famille, les familles courantes sont :
Arial, Helvetica, sans-serif"Times New Roman", Times, serif"Courier New", Courier, mono"Times New Roman", Times, serifVerdana, Arial, Helvetica, sans-serifGeneva, Arial, Helvetica, sans-serif
Vous pouvez biensûr faire votre propre famille de polices, la seule recommandation est de
terminer avec la police serif ou sans-serif, ce n'est pas obligatoire, mais c'est
conseillé : la police serif est toujours disponible.
Notez aussi que pour les noms de polices contenant des espaces, il faut les entourer de
guillemets doubles
// la taille
La propriété CSS pour définir la taille du texte est font-size.
Il y a deux métodes pour exprimer la taille du texte : à partit d'une valeur absolue ou relative.
On exprime la taille de la police de manière absolue avec les unités px (pixel),
en mm (millimètre) et en cm (centimètre).
Par exemple :
1 font-size: 8px;
2 font-size: 2mm;
3 font-size: 0.2cm;
Il est important de noter que pour une valeur décimale, il faut utiliser le point
.12 px ne fonctionnera pas).
Il est malgré tout assez avantageux d'exprimer la taille du texte de manière relative,
car certains utilisateurs réglent leur navigateur pour que la police soit plus petite ou plus grande selon leur préférence, et que l'utilisation d'une valeur absolue ne respecte pas ce choix de l'utilisateur.
Vous pouvez donc exprimer la taille avec les valeurs :
De la plus petite à la plus grande :
- xx-small
- x-small
- small
- medium
- big
- x-big
- xx-big
Vous pouvez utiliser l'unité relative em, qui correspond à la taille d'un m minuscule. On pourrait dire que 1em correspond à la "taille standard", donc 0.8em à 0,8 fois la taille
standard, etc...
De la même manière que pour l'unité em, avec le % (pourcentage), 100% correspondra à la taille par défaut, donc 80% à 80% de la taille standard, etc...
// Effets de style
Par exemple, le gras et l'italique sont des effets de style.
Pour mettre un texte en gras, on utilise la propriété font-weight: bold;.
la valeur normal annulera cet effet de style.
Pour mettre en italique, on utilise font-style, propriété qui admet comme valeur italic, oblique (équivalent à italique, mais l'inclinaison est plus prononcée) et normal.
Note : Il n'est biensûr pas obligatoire de préciser font-style: normal; pour un élément dont le texte sera droit par défaut.
Une troisième propriété text-decoration admet les valeurs :
underline: souligneoverligne: surligneline-through: barreblink: fait clignoter
le textenone: annulera les
effets cités (par exemple, pour annuler le surlignement d'un lien)
// La couleur
Pour choisir la couleur du texte, on utilise la propriété color.
On peut choisir cette couleur à l'aide des mots clés
whitesilvergrayblackredmaroonlimegreenyellowolivebluenavyfuchsiapurpleaquateal
Vous pouvez voir les différentes couleurs sur la page d'exemple des couleurs..
On peut utiliser le code héxadécimal, ou le format rgb, de la manière rgb([rouge],[vert],[bleu]).
On aura alors color: red; équivalent à color: #FF0000; et color: rgb(255,0,0);.
> retour au sommaire
> voir la suite