Discussion :

[Delphi-ne]

Bonjour

Ma question est peut-être un peu simpliste.
J'utilise en parallèle de mon site une feuille de style CSS
Dans cette feuille j'ai entre autres le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.xx_LibelleTitre{
	height			:30px;
	font-weight		:bold;
	background-color:#F3AB25;
	color			:#294763;
	font-size		:medium;
}

Mes différentes pages utilisent cette définition sous la forme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	<div class	= 'td_LibelleTitre'>
				Profil investisseur
			</div>

Le client me demande maintenant que sur chaque page le titre ait une couleur différente
Bien sûr le peux surcharger en écrivant ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	<div class	= 'td_LibelleTitre'
                               style='color	:#FFFF00; background-color:#0000FF;'   >
				Profil investisseur
			</div>

J'aurais voulu définir dans la CSS une nouvelle class qui dériverait de xx_LibelleTitre et surchargerait ses couleurs
Et ça je ne sais pas l'écrire, je n'ai rien trouvé dans les Cours et tutoriels pour apprendre CSS

Merci d'avance

[Delphi-ne]

C'est bon, j'ai trouvé une solution

Je définis deux styles

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.xx_LibelleTitre{
	height			:25px;
	font-weight		:bold;
	background-color:#F3AB25;
	color			:#294763;
	font-size		:medium;
	text-align		:center;
	vertical-align	:middle;
}
.xx_LibelleTitreInvestisseur{
	background-color:#A44B05;
	color			:#DDDDDD;
}

J'attribue les deux styles à l'objet :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class = 'xx_LibelleTitre xx_LibelleTitreInvestisseur'>
	Profil investisseur
</div>

Je reste toutefois ouvert à toute remarque

[NoSmoking]

Bonjour,

J'attribue les deux styles à l'objet

effectivement si chaque page doit avoir des propriétés de couleur différentes le plus simple à maintenir reste l'ajout d'une classe supplémentaire définissant celle ci.

[Delphi-ne]

OK

Ma question était surtout de m'assurer que cette syntaxe était bien la norme pour fonctionner sur tous les navigateurs

Merci beaucoup

[NoSmoking]

Il n'y a qu'un bémol à cela, c'est l'ordre dans la feuille CSS qui compte et non l'ordre dans l'affectation des classes.

Avec les règles CSS suivantes ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.bleu {
  color: blue;
}
.rouge {
  color: red;
}

... un élément écrit comme suit

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1 class="rouge bleu">Titre</h1>

sera écrit en rouge ... et non pas en bleu, il ne faut pas le perdre de vue même si l'exemple est mal choisi.

PS : pense à mettre la discussion en résolue

[Delphi-ne]

Effectivement!

Merci