[resolu]Problème avec les couleurs des fontes lors de mise en bloc

Bonjour à tous,

je fais de petit test sur la mise en forme en css, et j'ai un petit soucis que j'arrive pas à résoudre, voici la css et le bloc

body{
	margin:0;	
}

#bloc_1{
	width: 750px;
	height: 200px;
	border: thin solid #FF0000;
}

#bloc_1 p{	
	color: #FF0000;
	margin-right: auto;
	margin-left: auto;
	width: 400px;
}

.ligne_modif{
	font-weight: bold;
	color: #66FF00;
}

<div id="bloc_1">
	<p>ligne avec mise en forme #bloc_1 p</p>
	<p class="ligne_modif">ligne sans mise en forme #bloc_1, mais avec une class dans ce bloc </p>
	<p>ligne avec mise en forme #bloc_1 p</p>
	<p>ligne avec mise en forme #bloc_1 p</p>
</div>

Dans ce cas de figure un des blocs "P" doit avoir une couleur différente, je lui ai attribué une class, celle ci accepte tout genre de modif (taille de la fonte, taille du bloc, bordure, etc....) sauf la couleur de la police.

J'aimerai comprendre pourquoi ?

Merci de votre aide
Modifié par gesualda (30 Jul 2005 - 21:24)

gesualda a écrit :
Dans ce cas de figure un des blocs "P" doit avoir une couleur différente, je lui ai attribué une class, celle ci accepte tout genre de modif (taille de la fonte, taille du bloc, bordure, etc....) sauf la couleur de la police.

C'est le résultat normal de la cascade, c'est à dire du calcul qui va déterminer lequel des deux styles concurrents pour la couleur a la priorité pour ce paragraphe p class="ligne_modif".

Les deux valeurs de la propriété couleur en présence sont :
- color: #FF0000; , avec un sélecteur #bloc_1 p qui lui donne une priorité valant 0101 (un id et un élément)
- color: #66FF00;, avec un sélecteur .ligne_modif qui lui donne une priorité valant 0010 (pas d'id ni d'élément, une classe)
La première valeur l'emporte donc sur la seconde.

Pour "forcer" la seconde valeur à l'emporter, il faut augmenter le poid de son sélecteur, par exemple avec:

#bloc_1 .ligne_modif{
font-weight: bold;
color: #66ff00;
}

La propriété a alors un degré de priorité de 110 (un id + une classe)

D'une manière générale :

Openweb a écrit :

- Un seul id donne à un sélecteur plus de poids que n'importe quelle accumulation de classes ou de noms d'éléments ;
- Une seule classe donne à un sélecteur plus de poids que n'importe quelle accumulation de noms d'éléments ;

Pour les détails de calcul de priorité selon le sélecteur, voir http://openweb.eu.org/articles/cascade_css/

<edit> Pour les autre propriétés de ce paragraphe (bordure, etc.)tant qu'elles ne sont pas indiquées également par le séllecteur #bloc_1 p, elles n'entrent en concurrence avec aucune autre règle, et s'appliquent donc immédiatement...
Modifié par Laurent Denis (30 Jul 2005 - 21:08)

Merci de la réponse,

j'ai essayé et et surtout compris, ce qui est très important. Merci de la réponse claire et précise.

bon week end et à bientot