font-size
Les polices étant choisies, il convient d'en définir le corps (taille). Cette propriété suit les règles d'hérédité. La taille d'une propriété peut se définir sous différentes valeurs:
- la taille relative.
- la taille absolue.
- la valeur numérique.
- la valeur en pourcentage.
Les navigateurs ne respectent pas toujours l'ensemble de ces valeurs mais on se rapproche doucement de l'acceptable avec les versions récentes (mars 2003).
Attention les nombres décimaux utilisent le point (et non la virgule) et les termes d'unités doivent coller sans espace avec les chiffres : font-size: 1.5em ;
Toujours
préciser ces valeurs pour éviter de laisser le choix d'affichage
par défaut au navigateur de votre visiteur.
En "absolue" et en "pourcentage" les valeurs négatives ne sont pas tolérées.
Attention encore, pour le choix des unités appliquées dans certains cas, celui en % n'est pas mauvais, ou encore avec une unité "em" ( concept issu de la typographie). La taille en pixels interdit par contre de redimensionner le texte si le visiteur le trouve peu lisible par exemple.
Taille en valeur relative
Important : Cette taille se définit par rapport à celle de l'élément parent et codifiée avec les mots-clés suivants: smaller | medium | larger (la police origine et par defaut est ici medium sur IE).
Code à la volée placé dans BODY
<div style="font-size: medium ;"> bonjour
les amis comment va le moral?<br>
<span style="font-size: larger ;"> bonjour les
amis comment va le moral?</span><br>
<span style="font-size:smaller ;"> bonjour les
amis comment va le moral?</span><br></div>
Résultat de l'exemple
bonjour les amis comment va le moral? (medium)
bonjour les amis comment va le moral? (larger)
bonjour les amis comment va le moral? (smaller)
Toujours et encore, les codes SPAN et DIV utilisés pour cet exemple vont être découverts dans quelques pages.
Taille en valeur absolue
Un mot-clé parmi les suivants peut être appliqué à une police: xx-small | x-small | small | medium | large | x-large | xx-large
Important : Normalement le navigateur prend en compte ces valeurs et les recalcule suivant la taille de l'écran et suivant les caractéristiques des polices dont il dispose. L'ordre de grandeur de "medium" correspond à 12pt et de "large" à 14.4pt... en théorie. Netscape choisit "small" comme taille par défaut alors que IE c'est "medium" et ainsi sous Mac c'est pas évident. Oui pas toujours facile de satisfaire tout le monde et des stratégies clairement définies au départ et respectées fidèlement peuvent au final présenter un dossier correct ..... mais sur un navigateur seulement, et moins bien sur les autres. On verra plus tard pour essayer de réduire ces distorsions.En attendant utilisez ces valeurs ???
Exemples fonction des mots-clés
xx-small = modèle de police avec cette valeur
x-small = modèle de police avec cette valeur
small = modèle de police avec cette valeur
medium = modèle de police avec cette valeur
large = modèle de police avec cette valeur
x-large = modèle de police avec cette valeur
xx-large = modèle de police...
Longueur (Valeur) numérique
Avec les valeurs numériques relatives : em, ex, px.
Avec les valeurs numériques absolues : in, cm, mm, pc, pt.
Important : Une valeur de longueur spécifie une taille de police absolue (indépendante de la table des tailles de police du visiteur). Les valeurs négatives ne sont pas admises. Elle s'applique aux mesures horizontales et verticales.
Une valeur de longueur est formée d'un caractère de signe facultatif (+ ou - et + étant le défaut), suivi immédiatement par un nombre (si nombre décimal admis, toujours placer un point at non une virgule) et suivi immédiatement par un identifiant d'unité (par ex. px, deg, etc.). Pour une valeur de longueur "0" (zéro) l'identifiant d'unité est facultatif. Même si certaines applications supportent des valaeurs négatives, attention aux complications.
Les unités de longueur relatives
Les feuilles de style qui en emploient seront plus facilement adaptable d'un média à un autre (par exemple d'un moniteur vers une imprimante laser).
em : la valeur de "ont-size" pour la police concernée.
ex : la valeur de "x-height" pour la police concernée.
px : une quantité de pixels, en fonction de l'appareil de visualisation.(d'où les suggestions de ne pas l'utiliser pour définir la taille des polices, car vous aurez souvent des ennuis du rendu de visualisation).
Les unités de longueur absolues
Les unités de longueurs absolues ne sont utiles que si les propriétés physiques du média de sortie sont connues, ce qui en limite l'utilisation vu que le navigateur du visiteur va prendre pour base la valeur par défaut de la taille de police qu'il va utiliser en l'absebce de celle programmée.
in : pouce (inch) -- un pouce est égal à 2.54 cm.
cm : centimètre
mm : millimètre
pc : pica -- un pica est égal à 12 points.
pt : point -- le point de CSS2 est égal à 1/72 de pouce.
Exemples
Taille définie en points = {font-size: 12pt;}
Taille définie en pixels = {font-size: 16px;}
Taille définie en millimètres = {font-size: 4mm;}
Taille définie en centimètres = {font-size: 0.6cm;}
Taille définie en pourcentage = {font-size: 120%;}
Taille définie en pc = {font-size: 1.5pc;}
Taille définie en inches = {font-size: 0.3in;}
Taille définie en em = {font-size: 1.5em;}
Taille définie en ex = {font-size: 4ex;}
Vous retrouverez ces valeurs pour la définition des marges ou encore
les espacements entre paragraphes.
Valeur en pourcentage
Important : Une valeur en pourcentage spécifie
une taille de police absolue par rapport toujours à celle de l'élément
parent. Comme pour les valeurs exprimées en "em", leur emploi
autorise la création de feuilles de style plus fiables. Une valeur de
pourcentage est formée d'un caractère de signe facultatif (+ ou
- et + étant le défaut), suivi immédiatement par un nombre
et suivi immédiatement par l'identifiant " % ". Pour une valeur
de longueur "0" (zéro) l'identifiant d'unité est facultatif.et
immédiatement suivi par le caractère '%'.
Code dans BODY
<span style="font-size:140% ; ">Cette phrase est de 140% par rapport à l'élément parent de 10pt. </span>
Résultat de l'exemple
Cette phrase est de 140% par rapport à l'élément parent de 10pt.
Cette ligne au départ se trouve normalement en arial de 10 pt, correspondant à l'élément parent de référence placé dans HEAD de la pageou encore dans un fichier externe. Cette taille de base va donc se trouver modifié par la nouvelle valeur de 140%..
Code dans BODY pour "définition spécifique en ligne"
<P STYLE="color: green ; font-size: 1.8em ; background-color: #FFFFFF ; >Taille définie en em = { font-size: 1.8em ; } Ceci est un exemple.<P>
Résultat de l'exemple
Taille définie en em = { font-size: 1.8em ; } Ceci est un exemple.
Code dans HEAD pour "méthode interne" placé sur le source de cette page
<HTML>
<HEAD>
<TITLE>exemple</TITLE> <style type="text/css">
body , p { font-family: arial, verdana, sans-serif ; font-size: 12pt ; color: black ; background-color: #FFFFFF ; }
p.grand { font-size: 16pt ; color: green ; background-color: #FFFFCC ; }
</style>
</HEAD>
<BODY>
ici le contenu de votre texte en 16 pt
</BODY>
</HTML>
Code placé dans le BODY
<p class="grand">ici le contenu de votre texte en 16 pt</p>
Résultat de l'exemple
ici le contenu de votre texte en 16 pt
Sommaire CSS ... @ ... Propriété Font-Style
