[résolu] Bonne nomination des Class

Bonjour !

Je travaille depuispeu avec les css... je pense avoir compris le principe et l'applique de manière +/- aisée mais...
Ma question est la suivante...

Au niveau de la nomination des class ( j'ai le bouquin css2 des éditions eyrolles ), une chose m'interloque...
Exemple donné dans le bouquin : (p109)

il nomme un de ses style de la manière suivante :

p#premier {

} 

çe veut dire que dans le code XHTML de sa page il a

<p id="premier">

Moi, pour nommer ce style j'aurais procédé la manière suivante :
J'aurais défini ceci :

p{
}
#premier{

}

Qui peut me dire la différence entre ces deux nomenclatures ???C vraiment un truc que je n'arrive pas à comprendre


De plus....(allez tant qu'on y est!)

Imaginons j'ai à mettre en page +ieurs div avec les mêmes particularités ex:

#gsm {

	position: absolute;
	visibility: hidden;
}
#pers {

	position: absolute;
	visibility: hidden;
}
#orgname {

	position: absolute;
	visibility: hidden;
}
#sscatspan {

	position: absolute;
	visibility: hidden;
}

En général je procède comme ceci, je note toutes mes classes dans le fichier css et je leur attribue à chacune leurs particularités.
J'ai l'impression et même la certitude que je ne procède pas de la bonne manière.

Quelqu'un peut-il me dire comment bien agencer sa feuille de style afin qu'elle soit claire et concise.
???
Franchement je n'ai pas du tout l'impression d'être au top de ce côté là.. et dans bien d'autres mais bon ça ne concerne pas notre sujet.

Merci!
Modifié par mary (30 Oct 2006 - 16:46)

Bonjour,

a écrit :
p{
}
#premier{
}

Ceci n'est pas censé fonctionner, dans la mesure où ce qui se trouve hors des crochets définit le sélecteur ou la série de sélecteurs destinées à identifier un élément précis du code html. La partie entre crochets n'est quand à elle que la formulation des styles attribués à ce sélecteur. Ainsi, on utilisera la forme que tu as citée.

a écrit :
p#premier {
}

Concernant ta question suivante, la formulation que tu utilise est correcte, mais il est possible de regrouper tous ses sélecteurs en les séparant par une virgule, de la manière suivante

#gsm, #pers, #orgname, #sscatspan {
	position: absolute;
	visibility: hidden;
}

C'est très pratique pour réduire la longueur de la feuille de style, mais cela peut aussi t'obliger à une manipulation supplémentaire en cas de modification d'une de ces id.
Modifié par Mikachu (30 Oct 2006 - 15:55)

Euh...mais si dans dans ma feuille de style je défini les deux "class" suivantes :

p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;

}
#premier{
	background-color: #B6AA8B;
}

Et que je mets ceci dans mon fichier xhtml :

<p id="premier">le joli code que voici</p>[/code]
J'aurai le même résultat .. non ?
Je suis dure de "comprenure", mais je ne vois pas la différence ?

Avec ce code :

p#premier {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #B6AA8B;

} 

J'aurai le même récultat non? Où est la différence ?
J'ai du mal je l'avoue ...

mary a écrit :
Euh...mais si dans dans ma feuille de style je défini les deux "class" suivantes

Quand on parle de "classes", on fait en général référence à l'attribut HTML "class". Je pense que ce que tu veux dire ici est "sélecteur" (c'est-à-dire la partie avant l'accolade, qui te permet justement de sélectionner un ensemble d'éléments HTML).

Le sélecteur "p" s'applique à tous les éléments "p" de ton document, le sélecteur "#premier" s'applique à l'élément qui a l'id "premier" (donc pas forcément un élément "p"), et le sélecteur "p#premier" s'applique à l'élément "p" qui a l'id "premier".

Si tu mets ceci dans ta feuille de style :

p {color: red;}
#premier {font-weight: bold;}

tous les paragraphes seront rouges, et l'élément qui a l'id "premier" sera en gras.

Si tu écris ceci :

p#premier {color: red; font-weight: bold;}

Seul le paragraphe avec l'id "premier" sera rouge et gras.
Modifié par Eldebaran (30 Oct 2006 - 16:19)

Yes!J'ai pigé.

C vrai que je ne me suis pas bien expliquée...

Donc et si j'ai bien compris je peux avoir un sélecteur pour redéfinir ma balise

<p>

avec un définition particulière...

un autre par ex:

#premier

avec un définition particulière...

et un autre

p#premier

avec un définition particulière
pour toutes les balises

<p>

ayant comme

id=#premier

Est-ce bien ça?

mary a écrit :
Est-ce bien ça?

Oui.

Par contre, je te conseille de lire ceci :
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id
(les ids sont uniques)

Ok franchement merci beaucoup ! et pour le lien que tu me renseignes, j'ai déjà eu l'occasion de m'aperçevoir qu'effectivement un id doit être unique...

Un tout grand merci.