Titre: CSS: mutiple id/class
Posté par: jb_gfx le le 30-09-2004 a 18:47:14
Je vais donner un exemple qui me pose problème, ça sera plus simple pour expliquer.
J'ai un modèle CSS simple avec un entete composé d'un div. J'applique un id à ce div pour gérer ses propriétés. ça donne un truc du genre :
#entete {
width: 760px;
height: 60px;
etc...
}
Oui je sais la propriétée "etc" n'est pas encore implantée ;)
Ok, maintenant mon entete peut avoir un fond de couleur différente selon les pages donc je pensais pour faire un truc du genre:
.bleu {
background: #00F;
}
et dans mon html:
<div id="entete" class="bleu">
mais non, mon fond n'est pas pris en compte... ce qui me gene c'est de dupliquer #entete à chaque fois avec une couleur différente. Ma feuille de style va être énorme et illisible :/
#entete-bleu {
width: 760px;
height: 60px;
etc...
background: #00F;
}
#entete-rouge {
width: 760px;
height: 60px;
etc...
background: #F00;
}
...
à savoir que j'ai pas que le header qui change de couleur mais aussi un menu lateral et un fond avec chacun des variantes de couleur.
Quelqu'un a une solution?
Pendant que j'y suis, une petite question comme ça je me débarasse.
Quel intéret d'utiliser background-color: #000; quand background: #000; semble fonctionner de la même manière (et partout apparement). Je rate quelque chose?
Merci d'avance ;) |
Titre: Re:CSS: mutiple id/class
Posté par: MarvinLeRouge le le 01-10-2004 a 13:01:49
Salut,
1) Les propriétés désignées par l'id seront toujours appliquées APRES celles désignées par une classe : il y a priorité. Une classe désigne potentiellement un ensemble d'éléments alors qu'un id n'en désigne qu'un : les règles d'id ont donc préséance.
Si tu mets dans ta règle d'id un
Code:
, ton div sera toujours rouge, quelle que soit sa classe.
2) Rien ne t'emp^che d'avoir plusieurs feuilles de style. Exemple : tu mets une feuille global.css dans laquelle tu mets les règles qui s'appliquent toujours (width 760 et autres) et tu rajoutes une feuille par page avec les caractéristiques de ces pages. Si la feuille d'une page est appliquée après la feuille global.css, et qu'elle contient une règle s'appliquant à un id (au hasard entete), ces règles auront le même niveau de priorité que les précédentes, et les écraseront donc (puisque définies après.
Ex:
global.css
Code:
#entete {
width : 760px;
height : 60px;
} |
|
page1.css
Code:
#entete {
background : #f00;
} |
|
page2.css
Code:
#entete {
background : #00f;
} |
|
Bien entendu, le principe s'applique à toute ta page : les règles qui ne changent pas sont définies sur global.css et les règles particulières spécifiques à une page sont dans laPageEnQuestion.css.
Suis-je clair ou abscons ? |
Titre: Re:CSS: mutiple id/class
Posté par: jb_gfx le le 01-10-2004 a 14:08:11
| Absolument clair, je dirais même limpide! Je vais tester tout ça de ce pas. Merci beaucoup pour toutes ces infos. |
Titre: Re:CSS: mutiple id/class
Posté par: henry le le 04-10-2004 a 21:35:43
???Bonsoir
MarvinLeRouge t’a donné l’essentiel, j’essaie de t’apporter un éclaircissement sur la couleur de fond :
Background-color définit la couleur d’arrière-plan d’un élément (paragraphe), Background-image, Background-repeat, Background-attachment, alors que « Background » sert de définition globale pour l’arrière-plan et à ce titre peut regrouper dans la même déclaration les propriétés d’une image (xxxx.jpg), les paramètres de répétition (no-repeat) ou encore (fixed)…………..ce qui dans ton cas ne se manifeste pas.
@ plus
harry
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|