PDF (adobe.com)

A propos des propriétés de la forme courte des styles CSS

La spécification CSS permet la création de styles à l'aide d'une syntaxe abrégée appelée forme courte des styles CSS. Elle permet de spécifier la valeur de plusieurs propriétés à l'aide d'une seule déclaration. Par exemple, la propriété font vous permet de définir les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family sur une seule ligne.

Il est important de savoir que sous forme courte, les propriétés dont la valeur est omise reçoivent leur valeur par défaut. Certaines pages risquent donc de s'afficher incorrectement lorsque plusieurs règles CSS sont attribuées à la même balise.

Par exemple, la règle h1 ci-dessous utilise la syntaxe longue. Remarquez que les propriétés font-variant, font-stretch, font-size-adjust et font-style ont reçu leur valeur par défaut.

h1 { 
font-weight: bold; 
font-size: 16pt; 
line-height: 18pt; 
font-family: Arial; 
font-variant: normal; 
font-style: normal; 
font-stretch: normal; 
font-size-adjust: none 
}

Insérée en tant que propriété unique sous forme courte, la même règle pourrait se présenter ainsi :

h1 { font: bold 16pt/18pt Arial }

Sous forme courte, les propriétés dont la valeur est omise reçoivent automatiquement leur valeur par défaut. Ainsi, l'exemple de forme abrégée ci-dessus omet les balises font-variant, font-style, font-stretch et font-size-adjust.

Si des styles sont définis en plusieurs emplacements (par exemple, incorporés dans une page HTML et importés d'une feuille de style externe) sous deux formes, longue et courte, n'oubliez pas que les propriétés omises dans une règle de notation abrégée risquent d'écraser les propriétés explicitement définies dans une autre règle. (On parle de styles en cascade.)

Dreamweaver utilise donc la forme longue par défaut, Ceci permet d'éviter qu'une règle de notation abrégée ne remplace une règle de notation longue. Si vous ouvrez une page Web codée en forme courte dans Dreamweaver, n'oubliez pas que Dreamweaver crée toutes les nouvelles règles CSS sous forme longue. Pour spécifier la façon dont Dreamweaver crée et modifie les règles CSS, vous pouvez modifier les préférences de modification CSS dans la catégorie Styles CSS de la boîte de dialogue Préférences (Edition > Préférences dans Windows ; Dreamweaver > Préférences sur le Macintosh).

Remarque : Le panneau Styles CSS crée uniquement des règles sous forme longue. Lorsque vous créez une page ou une feuille de style CSS à l'aide du panneau Style CSS, n'oubliez pas que le codage manuel de règles CSS sous forme courte risque de provoquer l'écrasement des propriétés créées sous forme longue par celles créées sous forme courte. Il est donc préférable de créer vos styles CSS sous forme longue.