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.
- les noms de police contenant des espaces sont placés entre
guillemets
- le nom de la police générique n'est pas placée entre
guillemets
exemple :
<p style="font-family : Courier
New, Courier, mono;">
famille </p>
exemples de polices :
- Arial
- Helvetica
- Times
- Verdana
- Courrier
Exemple de famille générique :
- serif
- sans-serif
- cursive
- fantasy
- monospace
Couleur de police
: color
color : couleur
La couleur peut être donnée par
- un
nom de couleur
- une valeur hexadécimale #3366AA (rouge vert bleu)
- les composantes en décimal : rvb(0,255,100)
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 :
- xx-small = minuscule.
- x-small = très petit.
- small = petit.
- medium = moyen.
- large = grand.
- x-large = très grand.
- xx-large = géant.
- wmaller = visiblement plus petit que normal.
- larger = visiblement plus grand que normal.
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
- none : permet d'empêcher l'héritage de la propriété
- capitalize : affiche la première lettre de chaque mot en
majuscule
- uppercase : affiche le texte en majuscules
- lowercase : affiche le texte en minuscule
exemple :
<p
style="text-transform : 2em">transformation</p>
Decoration : text-decoration
text-decoration : none | underline | overline | line-throught
| blink
- none : permet d'empêcher l'héritage de la propriété et plus
particulièrement de supprimer le soulignement par défaut des liens
- overline : surlignement
- underline : soulignement
- line-through : texte barré
- blink : clignotement (du meilleur effet !!!)
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