Css Class ou ID ???

[jm]

Je cherche depuis un moment !
La question est la suivante:
Quelle est la difference entre .class et #id ?
Je les utilise de la meme facon mais j'ai un doute il doit bien y avoir une difference dans le resultat ou un genre de liens entre les deux selon la facon de les utiliser ?

Si quelqu'un connait la reponce merci d'avance?

JM.

 

[yannouk]

.class est un style definit que tu peux utiliser sur nimporte quelle balise, nimporte ou dans ta page
#ID permet d'etablir un style css localement ( car l'id sert a identifier telle ou telle balise, donc ce n'est pas logique de donner le meme id a plusieurs balises)

 

[jm]

Merci de la reponce Rapide !

Pour resumer ... ais-je bien compris...

:idea: Class sert pour la deco generale et id pour des deco particulieres ???

c'est ca ? :?:

y-a-t'il des combinaisons <div class="1" id="2">quelquechose</div>

merci,

JM.

 

[yannouk]

je vois pas l'utilité d'une combinaison...et si tu definis 2 styles pour la meme balise ca risque de planter. mais en gros, voila ce que j'ai compris (attend la confirmation de qqn d'autre quand meme)

si tu fais un menu, et que la deco du menu lui est specifique, utilise id. si tu as besoin par exemple d'un formatage de texte qui reviendra un peu partout sur le site, alors utilise .class

l'interet du id est que c'est moins lourd a coder
et puis tu peux redefinir toutes les balisescontenues dans un id, sans alterer le reste du site

 

[George Abitbol]

Re: Merci de la reponce Rapide !

:idea: Class sert pour la deco generale et id pour des deco particulieres ???

Euh, non, pas vraiment. Ou alors j'ai pas compris ta phrase
ID s'applique à un élément unique, il ne peut y avoir deux élements avec le même ID. Au contraire, une même class peut s'appliquer à plusieurs élements.

Donc, si tu as un style qui doit être utilisé par plusieurs éléments, utilise class. Et garde ID pour les éléments uniques.

Fred

 

[jm]

la lueur et la...

Je crois que je commence a y voir un peu plus clair....

Merci beacoup,

Si d'autres on des exemples differents ca ne ferra que m'eclairer un peu plus...

en tout cas c'est dejas beacoup plus clair ...

Merci encore.

JM.

 

[George Abitbol]

Pour prendre un exemple, disons que généralement, sur un site qui utilise une mise en page CSS, l'id est mis sur les différents calques (en général, chaque calque est positionné différemment des autres) et que les styles de texte, liens, images, etc. sont faits avec des classes (puisque susceptibles d'être réutilisés plusieurs fois dans la page).

Bien sûr, dans l'absolu on peut tout faire avec des classes ou tout avec des id, mais selon les cas, l'un ou l'autre est plus approprié.

Fred

 

[Monique]

Re: Merci de la reponce Rapide !

Bonjour,

:idea: Class sert pour la deco generale et id pour des deco particulieres ???

Une précision d'abord : les feuilles de style ne servent pas uniquement à la décoration, mais aussi au positionnement.

ID signifie identificateur qui ne peut donc déterminer le style que d'un seul élément dans une page.
Les attributs déterminés dans une classe peuvent être attribués soit à plusieurs même éléments d'une page, soit à des éléments différents.

Donc ID et class ne sont jamais associés par contre on peut utiliser deux classes pour un même élément <div class="style1 style2">

Amicalement,
Monique

 

[yannouk]

je savais pas ca monique. Mais si les 2 classes se contredisent, alors la, c'est le clash?

 

[jm]

Merci....

George, Exelent l'exemple de l'id avec les calques.... ca m'a l'air encore plus clair.. bon c'est vraie que c'etait plutot sombre ... mais la... tout d'un coup :idea: :idea:

Monique merci a toi aussi ... 2 class je vais essayer....
d'ailleur j'ai fais des essaie sur :

.cadre{
width: 150px;
height: 250px;
font-size: 15px;
border: dotted;
}
#cadreVert
{
border-color: Green;
}

<div class="cadre">Resutat Cadre noir</div>

<div class="cadre" id="cadreVert">Resutat cadre vert</div>


... deux classes ... suis pas sur de voir comment les utiliser ou dans quel cas...
Je vais creuser :roll:

Merci en tous cas.

 

[yanhl]

c'est pas ce qu'a dit monique :
class="premiere deuxieme"
permet de sélectionner deux classes d'un coup : l'une concernant par exemple les couleurs et lautre la police et les marges.

 

[jm]

Je commence a m'y faire moi a ce forum...

Merci a tous.

 

[lafosca]

Donc, en gros, il est plus simple d'utiliser tout le temps .class ? Il n'y a aucune contre-indication ?

 

[yanhl]

.class c'est bien mais il est aussi souvent utile d'utiliser des ID pour des éléments uniques qui n'ont pas d'équivalent : menu, pied de page, etc.
Notons aussi l'intérêt de ELEMENT.class, ou encore ELEMENT.CLASS ELEMENT, idéal pour créer des mises en page complexes.
Cherchez des infos sur les "sélecteurs", c'est là ou les CSS montrent tout leur intérêt.

Attention ! IE ne supporte pas tous les sélecteurs que vous trouverez dans les docs du W3C, c'est bien dommage mais c'est comme ça. Du coup, on se limite la plupart du temps aux deux exemples que j'ai donné en haut.

 

[David@site]

une petite precision a apporte ID va servir comme vous l'avez compris a identifier un element unique sur une page, c'est tres utile pour du javascript ou DHTML pour reperer a coup sur un element et jouer avec ces proprietes (visiblity background-color....). on peut ainsi souvent economiser des codes javascript trop lourd, pour des effets visuels interessants.

@+
David

 

[jeromax]

ça permet aussi de surcharger ton style.
tu définis le style général dans avec un .class puis tu complète si besoin avec l'iD

 

[Monique]

Re: Merci....

... deux classes ... suis pas sur de voir comment les utiliser ou dans quel cas...
Je vais creuser :roll:

Merci en tous cas.

Voilà un exemple.
La feuille de style :

body {
	background-color: White;
	color: Black;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
}
.retrait {
	text-indent: 0.3em;
	font-size: 0.6em;
	}
.rouge {
	background-color: inherit;
	color: Red;
}

et le code :

<p>texte avec les attributs définis pour body</p>

<p class="retrait">texte avec les attributs définis pour body, la première ligne en retrait de 0.3 em et le texte en plus petite taille (0.6em)</p>

<p class="retrait rouge">texte avec les attributs définis pour body, la première ligne en retrait de 0.3 em, le texte en plus petite taille (0.6em) et en rouge</p>

Amicalement,
Monique

 

[yanhl]

L'exemple est bon pour la sytaxe. Par contre, pour les débutants, signalons qu'il ne faut surtout pas donner ce genre de noms aux styles : ils ne doivent pas refléter leur contenu mais leur sens.

Si vous faites un texte rouge qui sert à signaler les erreurs, nommez-le "erreur" et pas "rouge" : si vous changez votre charte et que la couleur des alertes passe à l'orange, cela va vite devenir un vrai b*rdel.

Vu le nombre de sites que j'ai vu avec des classes portant des noms comme "font11blue", la précision n'est pas superflue.
Ex : sur l'intranet d'un grand opérateur de mobiles, tous les styles ayant changé de taille et de couleur, la maintenance est devenue une horreur !
Sans compter les trucs du style : deux types de contenus qui utilisaient la même classe qui se dissocient visuellement à la version suivante : obligé de retourner dans le code source, tout l'intérêt des css passe alors à la trappe !

Apprendre à savoir où utiliser les classes est comment, ça demande de la pratique, bien plus qu'une bête histoire de sytaxe. ;-)

 

[jm]

ben moi j'aurrais ete servis...

Merci merci et merci...

c'est clair ... du moin je crois...

Pour eviter les tables dans la mise en page... #id...
Pour les syle deco photo text ext... c'est .class...

Pour ne pas que ca finisse en bordel un jour je leurs done un mon sinificatif
#bande-haut
#contenu-gauche
#contenu-principal

.erreur
.liens-texte
.lien-menu
.liens-special
.texte
.txt-special

pour les accouplement
id="texte txt-special"

Pour les membres du wri "bravo et merci"


JM.

 

[yanhl]

liens-menu et liens-texte n'ont pas à exister.
Tu définis A
et DIV.menu A
et tu auras la même chose grâce à l'héritage, avec un code simplifié.

En fait, on donne toujours le nom de classe au plus haut élément distinctif et on spécifie les balises internes avec la syntaxe dont j'ai parlé, sauf si on a deux types de liens par exemple. Mais dans ce cas, on définit toujours un type générique, puis l'exception.

Edit : même la position des éléments dans la page ne devrait pas figurer dans les noms de classe.

 

[madx]

Bonjour,

Voila un résumé rapide mais en anglais :

http://www.blackwidows.org.uk/resources ... /css2.html

 

[yanhl]

Pourquoi les gens ont-il besoin d'aller chercher des tutoriaux qui n'apportent rien de plus que la doc si ce n'est que d'en virer une bonne partie et d'apporter des imprécisions ?

http://www.w3.org/Style/CSS/

Non mais sérieusement, je vois pas l'intérêt de ce genre de tutoriaux. Les docs du W3C sont souvent impeccables, il faut juste apprendre à les lire pour pouvoir trouver les infos qu'on y cherche.
Une fois qu'on s'y est fait, tout le reste parait inutile donc mon conseil du jour c'est : prenez-vous un moment pour vous familliariser avec les docs w3c, au final vous serez gagnants.

 

[gother]

Bonjour

Est-ce que les navigateurs interprètent les id ou class de la même manière ? Ne risque t on pas d'avoir des décallages notamment avec les position absolute ?

 

[oberon]

Allez, pour résumer :

id = identificateur, il est unique dans la page en cours
class = ensemble de règles réutilisables à l'envi

syntaxe :
balise#id et balise.class

ex :
div#menu {}
p.janvier {}

En cas de conflit, les règles de l'ID ont par défaut plus de poids que les règles des classes, elle ont une plus grance "spécificité".

Autre intérêt de l'ID, on peut facilement l'atteindre par javascript pour le manipuler avec getElementById

On peut cumuler les appels de classes :
<p class="classe1 classe2 classe3">

Lorsqu'on débute, on a tendance à mettre des classes et des id partout Après on se rend compte qu'il est plus efficace d'utiliser la cascade des feuilles de styles :

div#menu a {} -> atteint tous les liens contenus dans le div menu
p.nouveautes a{} -> atteint tous les liens contenus dans lle paragraphe ayant une classe nouveauté

Les navigateurs modernes (type Mozilla, Opera, Safari) ont toute une panoplie de sélecteurs à leur disposition leur permettant de réduire le nombre d'ID et de classes dans le HTML au strict minimum.

 

[gother]

je prend un exemple :
.header {
position: absolute;
left:120px;
width:760px;
background-color: #9C9;
}
.gauche {
position: absolute;
left:120px;
width:100px;
top:50px;
}

.centre {
position: absolute;
left:300px;
width:403px;
top:50px;
}

.droite {
position: absolute;
right:120px;
width:140px;
top:50px;
}

ca passe bien sur IE par contre c'est décalé sur mozilla

 

[Mies Van der Rohe]

<div id="rubrique" class="important" >

<div id="rubrique" class="moinsimportant" >

je trouve que c'est pas mal si tu veux faire des variantes avec la même mise en page ça évite d'avoir 20 000 id

 

[jm]

ca passe bien sur IE par contre c'est décalé sur mozilla

C'est peut-etre le contraire? non?
Tou mes essais jusqu'a maintenant passe tres bien sur mozilla, mais pour IE c'est toujours decale d'un px....

Il doit y avoir un moyen de retrouver les meme resultats!?

C'est peut-etre un bug!? quelqu'un aurrait-it un code pour parre cette erreur?

Merci,

JM.

 

[yanhl]

gother, envoie le code complet permettant de décaler le décalage : je devrais pouvoir t'aider rapido.