Valeurs

Unité de mesure relative en CSS : em

- em : la valeur de "font-size" pour la police concernée
- ex : la valeur de "x-height" pour la police concernée
- px : la valeur de "font-size", en fonction de l'appareil de visualisation.

Permet d'affecter une mesure relative par rapport à la taille de police de l'élément parent. Les feuilles de style qui en emploient seront plus facilement adaptable d'un média à un autre. Les nombres décimaux étant autorisés, toujours remplacer la virgule par un point.

Cette valeur " em "est utilisable pour toutes les propriétés acceptant la mention de longueur.

Code placé spécialement dans le HEAD de cette page

<style type="text/css">

body
{
font-family: arial, verdana,sans-serif ;
font-size: 10pt ;
color: black ;
background-color: #FFFFFF ;
}

h1 { font-size:20pt; }

.parent { font-size: 2.4em ; }

.t24 { font-size:20pt; line-height:1.2em ; }

.t48 { font-size:20pt; line-height:2.4em ; }

</style>

Code 1 en HTML dans BODY servant de base aux autres exemples

h1 { font-size: 20pt ; }

Exemple 1

Voici ce que donne un texte affecté du tag h1 qui est un tag de titre avec corps gras et interligne automatique

Code 2 dans HEAD

.parent { font-size: 2.4em ; }

Code2 placé dans BODY

Avec cet exemple 2, la propriété font-size est définie directement en ligne avec une valeur "em", qui se rapporte dans ce cas à la taille de l'élément parent.

p class="parent"> Voici ce que donne un texte affecté du tag .parent qui est... </p>

Exemple 2

Voici ce que donne un texte affecté du tag qui est placé dans le source sous forme de sous-classe ".parent"

nota : Vous obtenez avec ce texte une hauteur de taille par défaut égale à 10 points comme spécifié dans le cadre bleu, mais " multipliée par 2.4 valeur introduite par " font-size: 2.4em " .

Code 3 dans HEAD

.24 { font-size: 20pt ; line-height: 1.2em ; }

Code 3 dans BODY

<p class="24">Voici ce que donne un texte affecté du tag .24 qui est ........</p>

Exemple 3

Voici ce que donne un texte affecté du tag .24 qui est placé dans le source sous forme de sous-classe ".24" - Voici ce que donne un texte affecté du tag .24 qui est placé dans le source sous forme de sous-classe ".24"

nota : Vous obtenez avec ce texte en 20 points comme spécifié, une hauteur de lignes ( interlignage) multipliée par 1.2 soit égale à 24 points, introduite par " line-height:1.2em " . Voir cette propriété page 32.

Code 4 dans HEAD

.48 { font-size: 20pt; line-height: 2.4em }

Code dans BODY

<p class="48">Voici ce que donne un texte affecté du tag .48 qui est ........</p>

Exemple 4

Voici ce que donne un texte affecté du tag .48 qui est placé dans le source sous forme de sous-classe ".48" - Voici ce que donne un texte affecté du tag .48 qui est placé dans le source sous forme de sous-classe ".48"

nota : Vous obtenez avec ce texte en 20 points comme spécifié, une hauteur de lignes ( interlignage) multipliée par 2.4 soit égale à 48 points (le double en conséquence de l'exemple 3 précédent) introduit par " line-height:2.4em " . Voir cette propriété page 32.

Code 5 dans HEAD

.nul { line-height: 2.4em}

Si vous ne définissez aucune taille de police, c'est la hauteur des caractères paramétrés par le navigateur de votre visiteur qui va servir de référence par défaut, et l'hérédité s'applique.

Code 5 dans BODY

<p class="nul">Voici ce que donne un texte affecté du tag .nul qui est ........</p>

Exemple 5

Voici ce que donne un texte affecté du tag .nul qui est placé dans le source sous forme de sous-classe" .nul" - Voici ce que donne un texte affecté du tag .nul qui est placé dans le source sous forme de sous-classe ".nul"

nota : Vous obtenez avec ce texte une taille par défaut soit "moyenne de 10pt" en ce qui concerne mon propre navigateur, mais une hauteur de lignes ( interlignage) égale à "moyenne" multipliée par 2.4 valeur introduite par " line-height:2.4em " . Voir cette propriété page 32.

Valeurs

Sommaire CSS