Tout pour le Texte




- font-size : taille des caractères -

La propriété font-size permet de modifier la taille des caractères. On peut utiliser une unité de distance ou un mot clef se référant à une taille prédéfinie dans le navigateur web ou modifiant une taille héritée d'un élément parent.

font-size : 16px ;

Spécificités à connaître
Les Internet Explorer 5.0 à 7.0 de Microsoft ne permettent pas à l'utilisateur de modifier la taille de la police affichée lorsque l'unité utilisée est le pixel. De ce fait il est recommandé pour des raisons d'accessibilité de ne jamais spécifier de tailles de police en pixels pour permettre d'agrandir le texte.
La taille relative small correspond généralement à 16 pixels dans Internet Explorer et à 12 pixels dans les autres navigateurs. Il est donc peu recommandé à nouveau d'utiliser ce genre de spécification, à moins d'utiliser une feuille de style spéciale pour Internet Explorer.




- color : couleur des caractères -

La propriété color définit la couleur des caractères. Par défaut celle-ci est héritée du parent. Pour la changer, il faut utiliser une valeur de couleur

Les 17 couleurs web officielles

Marron
maroon
#800000

Rouge
red
#ff0000

Orange
orange
#ffA500

Jaune
yellow
#ffff00

olive
olive
#808000

pourpre
purple
#800080

fuchsia
fuchsia
#ff00ff

Blanc
white
#ffffff

Citron Vert
lime
#00ff00

Vert
green
#008000

Bleu
blue
#0000ff

Cyan
aqua
#00ffff

Turquoise
teal
#008080

Noir
black
#000000

Argent
silver
#c0c0c0

Gris
gray
#808080

Plusieurs unités existent, on peut les trouver facilement sur le net.

NOTE: Color Chooser ("une boite à couleurs") est intégré dans Geany ce qui est vraiment pratique.

NOTE: Pour plus de détails consultez www.startyourdev.com




- font-style -

La propriété font-style permet de passer en texte italique ou de revenir en texte droit, lorsqu'on est déjà dans un passage en italique. Les différentes valeurs possibles sont les suivantes :

      - normal, texte normal
      - italic, texte en italique
      - oblique, texte en ... ???

La police utilisée doit avoir une variante correspondant à chaque valeur de cette propriété. Aussi, comme bien souvent la variante oblique n'existe pas, on se contentera des deux premières valeurs.

NB: le style standard de strong est caractères gras et celui de em est caractères en italique.




- font-weight -

La propriété font-weight définit la graisse de la police. Les valeurs possibles sont :

      - normal, texte normal
      - bold, texte gras
      - bolder
      - lighter

Une valeur entre 100 et 900 par pas de 100
À nouveau seules les deux premières valeurs sont utiles car les navigateurs ne proposent aujourd'hui pas de graisse variable.

NB: le style standard de strong est caractères gras et celui de em est caractères en italique.




- text-decoration : souligné, surligné, barré -

La propriété text-decoration permet d'ajouter un trait au texte. Les valeurs possibles sont :

      - none, texte normal
      - underline, texte souligné
      - overline, texte surligné
      - line-through, texte barré
      - blink,le texte clignote (valable que sur Netscape et Firefox)

Cette propriété est très utile "text-decoration: none;" pour styliser les liens qui sont par défaut soulignés dans les navigateurs.

Il est en effet assez courant de nos jours de ne plus les souligner mais de seulement les colorer.




- font-variant -

La propriété font-variant permet de basculer les caractères en petites capitales d'imprimerie. Il faut pour cela lui donner la valeur small-caps, la valeur normal permettant de revenir à des lettres minuscules.

Cet effet peut être intéressant dans les titres ou dans les menus. Par contre sur un texte complet, il est rare d'utiliser des petites majuscules.




- text-transform -

La propriété text-transform contrôle la casse du texte. Elle accepte les valeurs suivantes :

      - capitalize met une majuscule à chaque début de mot
      - uppercase passe tout en (grandes) majuscules
      - lowercase passe tout en minuscules
      - none annule un des effets précédents

À nouveau ce genre d'effet ne trouve habituellement sa place que dans les titres ou les menus.




- font-family : choix de la police -

La propriété font-family définit la police de caractères. Elle accepte comme valeur un ou plusieurs nom(s) de polices ou de type de police (police générique).
Dans le cas de plusieurs noms, il faut les séparer par des virgules et les éventuels espaces additionnels ne comptent pas.
Le navigateur affichera alors le texte avec la première police trouvée dans l'ordre de la liste. Pour cette raison, il est de peu d'utilité de mentionner à la fin de la liste des polices ayant moins de chance d'être installées sur la plate-forme de l'utilisateur.
Enfin il n'est pas obligatoire d'encadrer les noms de guillemets (") ou d'apostrophes (') et le nom des polices est insensible à la casse.
Comme nous le verrons plus loin, il est impératif de toujours mentionner en dernier le nom d'une police générique pour que le navigateur ait une solution de rechange s'il ne trouve pas les polices demandées. La liste possible correspond aux types de police précédemment évoqués :

      - serif
      - sans-serif
      - monospace
      - cursive
      - fantasy




- text-align -

La propriété text-align définit l'alignement du contenu d'un élément, typiquement le texte dans un paragraphe. Les valeurs possibles sont :

      - left, alignement à gauche
      - right, alignement à droite
      - center, alignement au centre
      - justify, alignement à droite et à gauche




- text-indent -

La propriété text-indent définit le retrait de la première ligne de texte d'un élément. La valeur spécifiée est une valeur de distance.