Exemple 07 : Les propriétés raccourcies : exemples avec la propriété font

Explications :

Voici la syntaxe de la propriété raccourcie font :

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [/ <'line-height'> ]? <'font-family'>

Les trois propriétés font-style, font-variant et font-weight sont regroupées, elles sont facultatives et elles ne doivent pas forcément survenir toutes les trois ensemble : soit on en indique une, soit deux, soit les trois et ceci dans l'ordre désiré. Il faut ensuite indiquer font-size, c'est-à-dire la taille de la police, qui est obligatoire. La propriété line-height n'est pas obligatoire, mais si on l'indique, il faut séparer la valeur de font-size et celle de line-height avec la barre oblique. Enfin la propriété font-family est obligatoire.

Le premier paragraphe contient uniquement les valeurs obligatoires. Vous pouvez constater que les propriétés omises prennent alors leur valeur par défaut.

Le second paragraphe contient également les trois premières propriétés : celles-ci peuvent être placées de manière désordonnées.

Enfin le troisième paragraphe correspond à une propriété font complète : toutes les sous-propriétés y ont été déclarées.

Code XHTML et CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 07 : Les propriétés raccourcies : exemples avec la propriété font</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
p#ex01 {
        font :             0.9em 'Courier New', Courier, monospace;
}
p#ex02 {
        font :             bold italic 1.2em Arial, Verdana, sans-serif;
}
p#ex03 {
        font :             italic bold small-caps 1.4em/1.5em 'Times New Roman', Georgia, serif;
}
</style>
</head>

<body>

<h1>
Exemple 07 : Les propriétés raccourcies : exemples avec la propriété font
</h1>

  <p id="ex01">
Un exemple de propriété font avec les seules valeurs obligatoires : font-size et font-family.
  </p>
  <p id="ex02">
Un exemple de propriété font avec les trois premières valeurs déclarées de manière désordonnées.
  </p>
  <p id="ex03">
Un exemple de propriété font complète.
  </p>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.