La spécification CSS permet de créer des styles à l'aide d'une syntaxe abrégée appelée CSS abrégé. Shorthand CSS vous permet de spécifier la valeur de plusieurs propriétés avec une seule balise de propriété. Par exemple, vous pouvez utiliser la propriété font pour définir les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family dans une syntaxe sur une seule ligne.
Le problème clé à noter lors de l'utilisation de CSS abrégés est que les valeurs omises dans les propriétés CSS abrégées se voient attribuer la valeur par défaut de la propriété. Lorsque deux règles CSS ou plus sont attribuées à la même balise, la page peut ne pas s'afficher correctement.
Par exemple, la balise H1 présentée ci-dessous utilise la syntaxe CSS normale. Notez que les valeurs des propriétés font-variant, font-stretch, font-size-adjust et font-style reçoivent leurs valeurs par défaut.
H1 {
poids de la police : gras ;
taille de police : 16 pt ;
hauteur de ligne : 18 pt ;
famille de polices : Arial ;
variante de police : normal ;
style de police : normal ;
police-stretch : normal ;
ajustement de la taille de la police : aucun
}
Réécrivons cette balise en utilisant un attribut raccourci :
H1 { font: bold 16pt/18pt Arial }
Lorsqu'elles sont écrites en notation abrégée, les valeurs omises se voient automatiquement attribuer leurs valeurs par défaut. Par conséquent, l’exemple abrégé ci-dessus omet les balises font-variant, font-style, font-stretch et font-size-adjust.
Si vous utilisez les formes abrégées et normales de la syntaxe CSS pour définir des styles à plusieurs endroits (comme l'intégration de styles dans une page HTML et l'importation de styles à partir d'une feuille de style externe), sachez que les attributs omis peuvent remplacer (ou cascader) le styles dans les propriétés qui sont explicitement définies ailleurs.
Par conséquent, Dreamweaver utilise par défaut la forme normale des symboles CSS pour écrire la syntaxe. Cela évite les problèmes potentiels causés par des règles abrégées qui remplacent les règles ordinaires. Lorsque vous ouvrez dans Dreamweaver une page Web codée à l'aide de la notation CSS abrégée, sachez que Dreamweaver utilisera la forme normale pour créer de nouvelles règles CSS. Vous pouvez modifier les préférences d'édition CSS dans la catégorie Styles CSS de la boîte de dialogue Préférences (Édition>>Préférences sous Windows ; Dreamweaver>>Préférences sous Macintosh). Spécifiez comment Dreamweaver crée et modifie les règles CSS.
Avis
Le panneau Styles CSS crée des règles en utilisant uniquement des symboles normaux. Si vous utilisez le panneau Styles CSS pour créer une page ou une feuille de style CSS, sachez que le codage manuel des règles CSS abrégées peut entraîner le remplacement des propriétés abrégées par rapport à celles créées sous la forme normale. Par conséquent, utilisez des symboles CSS ordinaires pour créer vos styles.