Css Class ou ID ???

Discussion dans 'Administration d'un site Web' créé par jm, 10 Février 2004.

  1. jm
    jm Guest
    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.
     
  2. yannouk
    yannouk WRInaute passionné
    Inscrit:
    11 Octobre 2003
    Messages:
    1 559
    J'aime reçus:
    0
    .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)
     
  3. jm
    jm Guest
    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.
     
  4. yannouk
    yannouk WRInaute passionné
    Inscrit:
    11 Octobre 2003
    Messages:
    1 559
    J'aime reçus:
    0
    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
     
  5. George Abitbol
    George Abitbol WRInaute passionné
    Inscrit:
    6 Juin 2003
    Messages:
    1 519
    J'aime reçus:
    0
    Re: Merci de la reponce Rapide !

    Euh, non, pas vraiment. Ou alors j'ai pas compris ta phrase :D
    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
     
  6. jm
    jm Guest
    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.
     
  7. George Abitbol
    George Abitbol WRInaute passionné
    Inscrit:
    6 Juin 2003
    Messages:
    1 519
    J'aime reçus:
    0
    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
     
  8. Monique
    Monique WRInaute passionné
    Inscrit:
    16 Septembre 2002
    Messages:
    1 153
    J'aime reçus:
    0
    Re: Merci de la reponce Rapide !

    Bonjour,

    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
     
  9. yannouk
    yannouk WRInaute passionné
    Inscrit:
    11 Octobre 2003
    Messages:
    1 559
    J'aime reçus:
    0
    je savais pas ca monique. Mais si les 2 classes se contredisent, alors la, c'est le clash?
     
  10. jm
    jm Guest
    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.
     
  11. yanhl
    yanhl WRInaute impliqué
    Inscrit:
    4 Décembre 2003
    Messages:
    655
    J'aime reçus:
    0
    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.
     
  12. jm
    jm Guest
    Je commence a m'y faire moi a ce forum...

    Merci a tous.
     
  13. lafosca
    lafosca WRInaute discret
    Inscrit:
    17 Avril 2003
    Messages:
    181
    J'aime reçus:
    0
    Donc, en gros, il est plus simple d'utiliser tout le temps .class ? Il n'y a aucune contre-indication ?
     
  14. yanhl
    yanhl WRInaute impliqué
    Inscrit:
    4 Décembre 2003
    Messages:
    655
    J'aime reçus:
    0
    .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.
     
  15. David@site
    David@site WRInaute occasionnel
    Inscrit:
    14 Janvier 2004
    Messages:
    321
    J'aime reçus:
    0
    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
     
  16. jeromax
    jeromax WRInaute impliqué
    Inscrit:
    12 Novembre 2003
    Messages:
    887
    J'aime reçus:
    0
    ç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
     
  17. Monique
    Monique WRInaute passionné
    Inscrit:
    16 Septembre 2002
    Messages:
    1 153
    J'aime reçus:
    0
    Re: Merci....

    Voilà un exemple.
    La feuille de style :
    Code:
    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 :

    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
     
  18. yanhl
    yanhl WRInaute impliqué
    Inscrit:
    4 Décembre 2003
    Messages:
    655
    J'aime reçus:
    0
    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. ;-)
     
  19. jm
    jm Guest
    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.
     
  20. yanhl
    yanhl WRInaute impliqué
    Inscrit:
    4 Décembre 2003
    Messages:
    655
    J'aime reçus:
    0
    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.
     
  21. madx
    madx WRInaute occasionnel
    Inscrit:
    19 Juin 2003
    Messages:
    257
    J'aime reçus:
    0
  22. yanhl
    yanhl WRInaute impliqué
    Inscrit:
    4 Décembre 2003
    Messages:
    655
    J'aime reçus:
    0
    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.
     
  23. gother
    gother Nouveau WRInaute
    Inscrit:
    22 Septembre 2003
    Messages:
    5
    J'aime reçus:
    0
    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 ?
     
  24. oberon
    oberon WRInaute discret
    Inscrit:
    26 Septembre 2003
    Messages:
    147
    J'aime reçus:
    0
    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.
     
  25. gother
    gother Nouveau WRInaute
    Inscrit:
    22 Septembre 2003
    Messages:
    5
    J'aime reçus:
    0
    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
     
  26. Mies Van der Rohe
    Mies Van der Rohe WRInaute passionné
    Inscrit:
    7 Décembre 2002
    Messages:
    1 163
    J'aime reçus:
    0
    <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
     
  27. jm
    jm Guest
    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.
     
  28. yanhl
    yanhl WRInaute impliqué
    Inscrit:
    4 Décembre 2003
    Messages:
    655
    J'aime reçus:
    0
    gother, envoie le code complet permettant de décaler le décalage : je devrais pouvoir t'aider rapido.
     
Chargement...
Similar Threads - Css Class Forum Date
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021
[HTML/CSS] Conflit de noms : ids et classes uniques Développement d'un site Web ou d'une appli mobile 17 Mars 2011
Logiciel qui souligne les class d'un fichier php et d'un css en commun ? Développement d'un site Web ou d'une appli mobile 28 Décembre 2010
Refonte site classique en oscss Référencement Google 30 Mai 2010
Classes CSS et balises html Problèmes de référencement spécifiques à vos sites 3 Décembre 2009
Bug Css Noah Classified Développement d'un site Web ou d'une appli mobile 19 Mars 2009
Qualification sémantique des class Css Référencement Google 14 Mars 2009
Utilité ou pas d'inclure des mots clés dans des classes css Référencement Google 19 Janvier 2009
Css et nom des classes Développement d'un site Web ou d'une appli mobile 15 Avril 2007
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
Unused CSS et outils pour supprimer feuilles de style inutilisées Développement d'un site Web ou d'une appli mobile 27 Avril 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019