@import et modifications

Bonjour,
Voici mon problème : je cherche à modifier un élément d'un fichier .css (que l'on a importé dans le .html via @import) directement depuis le .html
Je m'explique : je dispose de 7 class, chacune d'entre elles correspondant à une case de mon menu (class="accueil"...). Il apparaît logique de créer un .css et de l'importer dans le .html pour éviter la surcharge du .html. Un extrait du .css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 .accueil { background: white; background-image: url(photos/titres/accueil.jpg); background-repeat: no-repeat; position: relative; width: 155px; height: 90px; } .accueil a { position: absolute; width: 155px; height: 90px; } .accueil:hover { background: red; background-image: url(photos/titres/accueil1.png); background-repeat: no-repeat; border-left: 10px solid #000; } .attraction { background: white; background-image: url(photos/titres/attraction.png); background-repeat: no-repeat; position: relative; width: 155px; height: 90px; } .attraction a { position: absolute; width: 155px; height: 90px; } .attraction:hover { background: red; background-image: url(photos/titres/attraction.png); background-repeat: no-repeat; border-left: 10px solid #000; }
Il s'agit ici du CSS d'une page autre que "accueil" et "attraction". Car quand je vais sur la page accueil, le CSS de ladite page accueil change et ne devient plus que (je ne vais pas commencer à vous expliquer pourquoi :)):
Code:

1 2 3 4 5 .accueil { background: #f0b000 ; background-image: url(photos/titres/accueil1.png); background-repeat: no-repeat; }
Pour faire simple, le CSS d'une page X est toujours différent lorsque l'on est sur ladite page X que lorsque l'on est sur la page Y.
Je cherche donc à créer une sorte de CSS "universel", à l'instar du premier code joint, où chaque class a ses propriétés de hover... et en même temps à "annuler" en quelque sorte ces propriétés lorsque l'on est sur la page concernée (pas très clair, je sais !), ce qui donnerait, dans le .html pour la page d'accueil :
Code:

1 2 3 4 5 6 7 8 9 <style type="text/css"> @import url(css.css); .accueil { background: #f0b000 ; background-image: url(photos/titres/accueil1.png); background-repeat: no-repeat; } </style>
Hélas cela ne fonctionne pas, toute l'organisation du site étant chamboulée. Avez-vous une idée ?
Merci par avance.

Bonjour,
rien ne t'empêches de modifier les propriétés après les avoir déclarées dans ton fichier @import, par contre il te faut bien redéfinir TOUT ce qui doit l'être.

Tu peux également jouer avec la spécificité des sélecteurs.

D'accord mais est-ce bien par le dernier code que j'ai indiqué que je dois procéder, car pour ma part ça ne fonctionne pas ?

De même, le fait de dire dans le CSS importé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.accueil {
	background: white;
	background-image: url(photos/titres/accueil.jpg);
	background-repeat: no-repeat;
	position: relative;
	width: 155px;
	height: 90px;
}
 
		.accueil a {
			position: absolute;
			width: 155px;
			height: 90px;
		}
 
		.accueil:hover {
			background: red;
			background-image: url(photos/titres/accueil1.png);
			background-repeat: no-repeat;
			border-left: 10px solid #000;
		}

puis finalement de faire machine en arrière en disant :

Code:

1
2
3
4
5
.accueil {
	background: #f0b000 ;
	background-image: url(photos/titres/accueil1.png);
	background-repeat: no-repeat;
}

n'entraîne-t-il pas un conflit ?