TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

La police

Famille de police : font-family

font-family : nom_police1, nom_police2,..., police générique;

nom_police correspond à la police souhaitée. Les polices suivantes correspondent aux polices alternatives par ordre de priorité. Si aucune police n'est présente, une police de la même famille que la police générique est choisie.

exemple :

<p style="font-family : Courier New, Courier, mono;"> famille </p>

exemples de polices :

Exemple de famille générique :

Couleur de police : color

color : couleur

La couleur peut être donnée par

exemple :

<p style="color : blue">color </p>

Style de police : font-style

font-style : italic | oblique | normal

exemple :

<p style="font-style : italic">style</p>

Epaisseur de police : font-weight

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

pour un média écran, seuls deux états sont distingués : normal ou bold. Les autres valeurs sont destinés aux CSS d'impression

exemple :

<p style="font-weight : bold">weight</p>

Taille de police : font-size

font-size : taille

La taille peut prendre une valeur numérique en pixel (px, em) ou toute autre unité.

Une taille de police définie à k em aura k fois la taille de la police de son élément parent.

exemple :

<p style="font-size : 2em"> taille</p>

La taille peut également prendre les valeurs constantes suivantes :

Variante de police : font-variant

font-variant : small-caps | normal

exemple :

 <p style="font-variant : small-caps">variante</p>

Dilatation de la police : font-stretch

font-stretch : normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Permet de dilater ou contracter horizontalement la police. N''est pas implémenté par les navigateurs.

Hauteur de ligne : line-height

line-height : dimension (en px, em ... )

exemple :

<p style="line-height : 2em"> hauteur de ligne</p>

Transformation du texte : text-transform

text-transform : none | capitalize | uppercase | lowercase

exemple :

<p style="text-transform : 2em">transformation</p>

Decoration : text-decoration

text-decoration : none | underline | overline | line-throught | blink

exemple :

<p style="text-decoration : underline blink">decoration</p>

Regroupement : font

Les propriétés : font-family, font-size/lineheight, font-style, font-variant, font-weight,  peuvent être regroupées en une seule déclaration CSS. La taille de la police est obligatoire les autres valeurs sont optionnelles. Les valeurs non préciséeshéritent de leur valeur.

exemple :

<p style="font : Arial, Helvitica, sans-serif 12px/18px bold">decoration</p>

la notation : 12px/18px permet de spécifier : font-size/line-height en une seule déclaration

A l'exception de la propriété text-decoration, toutes les propriétés de police sont héritées

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007