Les couleurs

Dans les feuilles de styles séparées, vous pouvez raccoucir les codes couleurs. De six chiffres/lettres, on peut n'en mettre que trois. Cependant, ce raccourci ne marche que pour les couleurs Web.

Exemple : la couleur rouge #FF0000 peut-être écrite #F00. Par contre, la couleur #FF1234 ne peut être raccourcie.

Les marges

Raccourci très simple mais surtout très utile !

Notation : margin: 'margin-top' 'margin-right' 'margin-bottom' 'margin-left';

Un bon moyen mnémotechnique : l'horloge. On commence par midi, puis 3h, puis 6h et enfin 9h.

.maclass {
   margin: 1px 2px 3px 4px;
}

Equivaut à :

.maclass {
   margin-top: 1px;
   margin-right: 2px;
   margin-bottom: 3px;
   margin-left: 4px;
}

Cette méthode fonctionne aussi pour border-width, border-size et padding.

Les bordures

Le raccourci à retenir pour éviter d'innombrables lignes de codes…

Notation : border: 'border-width' 'border-style' 'border-color';

.maclass {
   border-width: 5px;
   border-style: outset;
   border-color: #963;
}

Equivaut à :

.maclass {
   border:5px outset #963;
}

Les fonds

Notation : background: 'background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position';

.maclass {
   background: #006699 url(images/fond.png) repeat-x fixed top center;
}

Equivaut à :

.maclass {
   background-color: #069;
   background-image:url(images/fond.png);
   background-repeat: repeat-x;
   background-attachment: fixed;
   background-position:top center;
}

Les polices

Notation : font: 'font-style' 'font-variant' 'font-weight' 'font-size'/'line-height' 'font-family';

.maclass {
   font:oblique small-caps bold 18pt/1.2 Arial, Helvetica, sans-serif;
}

Equivaut à :

.maclass {
   font-style:oblique;
   font-variant:small-caps;
   font-weight:bold;
   line-height: 1.2;
   font-family:Arial, Helvetica, sans-serif;
}