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.

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

Equivaut à :

[css] .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’;

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

Equivaut à :

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

Les fonds

Notation : background: ‘background-color’ ‘background-image’ ‘background-repeat’ ‘background-attachment’ ‘background-position’;

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

Equivaut à :

[css] .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’;

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

Equivaut à :

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