Ordre des déclarations : important ou pas ?

Bonjour,

Après avoir séché pendant près d'une heure sur un bug d'affichage, j'ai interverti l'ordre de mes déclarations et mon problème a été résolu...

Ma question est donc de savoir si l'ordre des déclarations, dans la feuille de style avait une importance. Il me semblait avoir lu que non mais mon exemple prouve le contraire...
Faut-il donc adopter un ordre précis, si ou lequel ?

Merci

pan a écrit :
Ma question est donc de savoir si l'ordre des déclarations, dans la feuille de style avait une importance.

Non, l'ordre des déclarations n'a pas d'importance. Pour rappel, une déclaration en CSS c'est ceci:

propriété: valeur;

À moins de définir plusieurs fois de suite la même propriété pour un élément donné, l'ordre des déclarations ne compte pas. Si tu définis plusieurs fois la valeur d'une propriété, alors la valeur donnée en dernier sera utilisée. Par exemple, les deux blocs de déclarations suivant n'auront pas le même effet (texte en bleu dans le premier cas, et en rouge dans le deuxième):

p {
	color: red;
	color: blue;
}

p {
	color: blue;
	color: red;
}

Attention également aux propriétés de raccourci, qui peuvent redéfinir différentes propriétés.

élément1 {
	border-width: 1px 10px;
	border: solid black;
	/* Toutes les bordures auront une largeur de "medium" (par défaut) */
}

élément2 {
	border: solid black;
	border-width: 1px 10px;
	/* Les bordures du haut et du bas auront une largeur de 1px, et celles des côtés de 10px */
}

Modifié par Florent V. (31 Oct 2008 - 22:39)

Florent V. a écrit :

Attention également aux propriétés de raccourci, qui peuvent redéfinir différentes propriétés.

élément1 {
	border-width: 1px 10px;
	border: solid black;
	/* Toutes les bordures auront une largeur de "medium" (par défaut) */
}

élément2 {
	border: solid black;
	border-width: 1px 10px;
	/* Les bordures du haut et du bas auront une largeur de 1px, et celles des côtés de 10px */
}

Je comprends ton deuxième exemple mais pas le premier. Pourquoi dis tu largeur "medium" ?

Bonjour pan,

Voici un article interessant de pompage (à défaut de lire les specs... )

pompage a écrit :

Il n'est pas nécessaire d'indiquer les trois valeurs. Toutes les valeurs que vous n'aurez pas citées seront mises par défaut. Les valeurs de départ sont medium (moyen) pour width, none (aucun) pour style, et pour color ce sera la même valeur que le color attribué à l'élément lui-même.

Dans le premier exemple, c'est la dernière déclaration (border: solid black;) qui impose le style donc :

Florent a écrit :
Toutes les bordures auront une largeur de "medium" (par défaut) (et solid et black)

Cdt,
Sylvain