Une propriété-raccourci est une propriété qui permet de définir plusieurs propriétés en une seule fois (et ainsi de prendre un raccourci). Ces propriété-raccourcis sont à utiliser chaque fois que c'est possible car le code obtenu est plus compact.
Propriété raccourci font
La propriété-raccourci font permet de définir en une fois :
- l'italique (ie font-style)
- les petites majuscules (ie font-variant)
- la graisse (ie font-weight)
- la taille (ie font-size)
- la hauteur de ligne (ie line-height)
- les polices (ie font-family)
Les valeurs pour le style, les petites majuscules, la graisse et la hauteur de ligne peuvent être absentes.
Les valeurs pour la taille et la ou les polices doivent être présentes.
/* raccourci habituel */
html {
font: 13px/1.5 Verdana, Geneva, sans-serif;
}
/* ne fonctionne pas car il manque la taille */
.important-mauvais {
font: small-caps bold Arial;
}
.important-ok {
font: small-caps bold 13px Arial;
}
/* ne fonctionne pas car il manque la famille */
h3 {
font: bold 2em/2em;
}
Attention si tous les éléments du raccourci ne sont pas déclarés. Par exemple dans
p { line-height: 16px; }
p { font: 12px Arial; }
la valeur de la propriété line-height
ne sera pas 16px mais normal car le
raccourci lui aura affecté sa valeur par défaut, écrasant la valeur
précédemment donnée.