Astuces d'écriture des règles CSS

Publié le par PêUR

Abréger les codes de couleur

Lorsque une couleur en notation hexadécimale se compose de trois doublets, vous pouvez écrire plus rapidement cette couleur en omettant un chiffre sur 2.

#FFF est identique à #FFFFFF
#000 est identique à #000000
#369 est identique à #336699

Attention, #808080 ne peut être réduit.

Zéro pixel ou zéro centimètre = zéro rien du tout

Il est inutile de préciser l'unité de mesure à une valeur nulle.

padding: 0 est identique à padding: 0px et c'est plus beau!

Abréger les règles CSS de police

Sachez que la règle suivante:

font-size: 12px;
line-height: 14px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

Peut s'écrire de manière abrégée comme ceci:

font: bold italic small-caps 12px/14px verdana, serif;

ATTENTION: il est obligatoire de spécifier font-size et font-family. Non renseignés, les propriétés  font-weight, font-style, ou font-variant, prendront la valeur normal.

Abréger les règles CSS de background

Sachez que la règle suivante:

background-color: #FFFFFF;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Peut s'écrire de manière abrégé comme ceci:

background: #FFFFFF url(image.jpg) no-repeat center fixed;

Vous n'êtes pas obligé de déclarer toutes les valeur de la propriété background. En effet, les valeurs non déclarées prendront les valeurs par défaut:

color: transparent
image: none
repeat: repeat
attachement: scroll
position: top left

Abréger les règles de marges intérieures (padding) et extérieures (margin)

Plutôt que d'utiliser les différentes propriétés de marges positionnelles (margin-top, margin-right, margin-bottom, et margin-left) on peut utiliser la propriété raccourcis margin (ou padding ) en la faisant suivre de différentes valeurs:

  • 1 seule valeur: margin: 5px;

Les quatre côtés auront une marge de 5px

  • 2 valeurs: margin: 5px 10px;

Le haut et le bas auront une marge de 5px alors que les côtés gauche et droit auront une marge de 10px

  • 3 valeurs: margin: 5px 10px 6px;

Le haut: 5px, les cotés gauche et droit: 10px et le bas: 6px

  • 4 valeurs: margin: 5px 10px 20px 0;

Les 4 valeurs seront distribuer dans le sens des aiguilles d'une montre en partant du haut. Le haut: 5px, le côté droit: 10px, le bas: 20px et le côté gauche: sans marge (O)

Abréger les règles CSS de bordure

  • Sachez que la règle de largeur de bordure suivante:

border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;

Peut s'écrire de manière abrégée comme ceci:

border-width: 1px 2px 3px 4px;

  • Sachez que la règle de style de bordure suivante:

border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: groove;

Peut s'écrire de manière abrégée comme ceci:

border-style: solid dashed dotted groove;

  • Sachez que la règle de couleur de bordure suivante:

border-top-color: #000000;
border-right-color: #FFFFFF;
border-bottom-color: #FF0000;
border-left-color: #808080;

Peut s'écrire de manière abrégée comme ceci:

border-color: #000000 #FFFFFF #FF0000 #808080

 

  • Sachez que la règle de bordure suivante:

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;

Peut s'écrire de manière abrégée comme ceci:

border: 1px solid #000000;

Donner à vos règles CSS des valeurs différentes selon le navigateur

Voir l'article: Des règles CSS pour un résultat identique selon le navigateur

Ressources

 

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

Furet92 07/10/2006 15:40

Bonjour,

Très pratique ce mémo pour rendre plus concis les CSS.
Cependant, je note dans le paragraphe"Abréger les règles CSS de police" que si sous IE6, le fait de mettre les valeur de font-weight APRES la taille fonctionne, il en est pas de même sous PC, sur FF v1.5.07, Opéra v9.02 ou Netscape.
Pour ces derniers, il semble impératif pour que la valeur soit reconnue, que celle-ci soit placée AVANT la taille, genre:
font:bold 20px Arial, Helvetica, sans-serif;

Cordialement

PêUR 08/10/2006 22:10

Bonsoir Furet92,
effectivement il est nécessaire que ce soit placé avant... je ne m'étais pas rendu compte, en fait quand j'utilise cette astuce d'écriture je met toujours bold avant la taille de police.
J'ai corrigé l'exemple. Merci ;-)

akane 25/03/2006 21:45

mouarf ! je viens de voir le commentaire que j'ai laissé plus haut!oui, c'est bien normal de ne rien comprendre, c'est mon clavier qui ne suis pas , ca m'enerve^^,donc en fait "!quangit d'abreuis prenante . " signifit "quand il s'agit d'abreger je suis prenante "lol voila voila, donc je confirme !
(je ne pvoulais pas laisser la moindre zone d'ombre sur un blog qui m'eclaire toujours si bien!^^)
salut !
ps:quoi ? un commentaire inutile ? meuuu non!

PêUR 27/03/2006 20:33

Mais non!!! lol

celine [Palmito] 10/03/2006 01:44

j'ai rien compris au comm précédent! lol!
bon la carte va PRECEDER le colis espece de nouille! mdr! lol!
ralala ces hommes, faut tout leur dire!
bisou xx
palmito

PêUR 10/03/2006 18:36

Ta réponse par mail, arrête de me traiter de nouille!! lol

akane 08/03/2006 20:18

chouette un nouvel article tout beau tout chau! miam !quangit d'abreuis prenante . Quoi ? flemarde ?bon vais manger moi .^^"
merci

PêUR 09/03/2006 08:46

;-)

celine [Palmito] 08/03/2006 12:27

on voit que tu as moins le temps pour repondre aux comm.. lol!
au fait, j'ai envoyé une carte postale (qui va précéder le colis je pense) expres pour décrire (A MOITIE bien sur) le contenu!
Sadique moi? meuuu non! lol
bisou
la palminette

PêUR 08/03/2006 13:28

Je fais ce que je peux pour répondre mais euh!!!!!!!!!!!
Une carte de description après la réception du colis qu'il décrit... euh!!! j'ai pas compris le concept lol