Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Partie 2 - Etape 1b (annexe) : Différencier #id et .class

    Partagez
    FémininAge : 71Message(s) : 41
    Pensées
    le Jeu 26 Juin 2014 - 16:52
    *toussotement* Je suis ici... Pour vous expliquer quand utiliser #id ou .class. Ça fait peur, mais ne vous inquiétez pas, c'est très simple, j'ai compris, alors pourquoi pas vous? Bon, trêve de bavardages!

    Avant de commencer, sachez que c'est mon premier tuto est que je ne suis pas une experte en codage. Donc, je ne suis pas responsable de tout arrêts cardiaques, de suicides ou autres mésaventures. Si vous y survivez et vous voyez des choses qui mériteraient d'être ajoutées ou corrigées, n’hésitez pas!


    Avant tout...

    Bon, vous êtes paré pour me lire. Mais si vous êtes des débutants en codage, vous n'avez aucune idée de ce que je parle. Mais ne vous inquiétez pas, je vais m’efforcer à ce que vous suivez bien! Je suis désolé pour les gens qui sont plus avancés, mais j'essaye de faire en sorte que le plus grand nombre de personne peuvent lire et comprendre le tuto, alors je m'excuse si j'inclus des informations pour vous futiles.

    Premièrement, à quoi servent ces fameux id et class? Tout d'abord, id veut dire identifiant et class... classe. Passons. Si vous avez eu le loisir d'explorer quelques codes, vous avez très certainement remarqué qu'ils ne sont pas tous pareil. Je m'explique:

    Ceci est un titre/texte/sous-titre/sandwich...

    Code:
    <span style="color: blue; font-family: georgia">Ceci est un titre/texte/sous-titre/sandwich...</span>

    Oui, oui, j'ai bien vu cette sorte de code, c'est pas le css qui est directement dans le message?


    C'est ça. Si ça ne vous dis rien, je vous redirige vers le cursus codage.

    Regardons un autre cas:

    Oui, c'est le cadre officiel chais pas quoi du forum.


    Code:
    <div class="question"><span class="icone_question"></span>Contenu</div>

    Alors? Vous ne remarquez pas quelque chose?

    Non... Ah si, il n'y a pas le css dans ce code et... Tiens, il y a une classe!


    Bingo! Le css se trouve dans le feuille css (ou feuille de style, je me trompe toujours! x)) du forum. Cette feuille se trouve dans le panneau admin, affichage, couleurs et feuille css. Mais je ne suis pas là pour parler de ça, si vous voulez en savoir plus, cherchez!

    Dans cette feuille, il y a:

    Code:
    .question {

    propriété: valeur;
    propriété: valeur;

    }

    Pour ceux qui en comprennent pas, le ".question", est le sélecteur, c'est à dire que c'est lui qui dit: "Hep, vous voyez cette élément? Et bien c'est à lui que s'applique le css!". La propriété est comme color, font-family, background-color... . Et la valeur comme blue, georgia, black... En gros, c'est pas bien compliqué!


    .class

    Vous êtes là, à attendre que je daigne maintenant m'expliquer. Pas de panique, j'y arrive, à la partie que tout le monde attend... *musique d'ambiance*

    Vous avez vu que "classe" avait remplacé l'habituel "style". Ce "classe", qui est un sélecteur, sert à une chose toute bête: dire que c'est à cette partie de votre code que s’applique le css. Toujours pas compris? La classe permet que quand vous serez dans votre feuille css, de montrer à votre navigateur à qui il doit appliquer le css.

    Quand vous serez sur votre feuille de style, il faudra écrire comme ça:

    Code:
    <div class="question"><span class="icone_question"></span>Contenu</div> Ici, la classe s'appelle question. Vous pouvez très bien la nommer d'une différente façon, genre si vous voulez appeler un titre "titre", faite le! Néanmoins, n'oubliez pas de bien coder: <span class="titre">. Mettez aux classes des noms précis, bannissez le: div class="eizçfpacb889148971"ç"èé">

    FEUILLE CSS:

    .question {

    LE CSS

    } Ici, tout les élément qui auront pour classe "question", auront le même css.

    N'oubliez jamais le point, ".", avant le nom de la classe, c'est primordial!


    Passons à une autre chose très importante. La classe doit avoir plusieurs éléments. Ce n'est pas clair, je le concède. Si, quand vous codez une page d’accueil et que plusieurs éléments (genre les titres, ou les boîtes d'informations...) ont le même css, mettez leur la même classe. Il peut y avoir des millions d'éléments avec le même classe, et des millions de classes qui n'ont pas le même nom!

    Bon, je l'avoue: on peut très bien nommer qu'un élément avec une classe unique, mais ce ne sera pas un code propre. Bienvenue dans le monde du codage! Non, au lieu de ça, on va plutôt utiliser le id...


    Tout ce charabia pour expliquer une chose très simple: .class sert de sélecteur, et s'écrit comme ceci:

    Code:
    <div class="maclass">LALALALALA</div>

    et comme cela:

    .maclass {

    CSS

    }

    Aussi, .class sert à avoir plusieurs éléments avec le même css. On peut avoir des millions de classes et de tout les noms. Vous pouvez très bien faire en sorte qu'un élément est plusieurs classes.

    Code:
    <div class="class1 class2">

    Comme la fait remarquer Sparrow, il faut faire attention quant à l'utilisation de plusieurs classes, c'est possibles mais un peu compliqué. Si les deux classes n'ont pas les même propriétés, ça ira. Mais si elles ont les même propriétés, même si elles n'ont pas les même valeurs, ça risque de poser problème.


    #id

    L'identifiant est comme la classe: c'est un sélecteur. D'ailleurs, il a quasi les même propriétés, mais il a une petite particularité, il ne peut être utilisé qu'avec un élément.

    WAIT! J'ai bien pigé pour .class, mais tu m'embrouilles avec ton id! C'est un sélecteur, OK, mais, il s'écrit comme le .class? Il...


    Stop! J'y viens! Alors, comme dit plus haut, id est fait pour être utilisé qu'avez un élément. Un UNIQUE. Jamais deux.

    Code:
    <span id="monid">Titre/texte...</span> Ici, c'est comme avec la classe. Vous nommez votre id. Mais pas deux élément avec le même id! Même si vous pouvait avoir plusieurs id, il ne doivent jamais avoir le même nom!

    FEUILLE CSS

    #monid {

    CSS

    } La seule chose qui change est qu'il n'y plus le point, ".", mais ça: #

    Conclusion

    Tout ça pour dire que:

    .class est un sélecteur, il doit être associé avec plusieurs éléments pour avoir un bon code, un élément peut avoir plusieurs classes, et il s'écrit comme ça:

    Code:
    <div class="class">LALALA</div>

    FEUILLE CSS

    .class {

    CSS

    }

    #id est un identifiant, il doit être associé qu'avec un élément, sinon c'est la cata (faites en l'expérience si vous voulez...). Il s'écrit comme ça:

    Code:
    <div id="monid">LALALALA</div>

    FEUILLE CSS

    #id {

    LE CSS

    }

    Voilà! Il se peut que je n'ai pas abordé des élément importants, signalez le moi, ou même dit quelque chose de faux. ♥ *croise les doigts et prie pour qu'elle n'est pas dit n'importe quoi*


    Dernière édition par Pensées le Sam 28 Juin 2014 - 10:45, édité 5 fois
    FémininAge : 22Message(s) : 4939

    Les Guildes
    Guilde des Conteurs:
    8/10  (8/10)
    Guilde des Illusionnistes:
    4/10  (4/10)
    Guilde des Architectes:
    12/20  (12/20)
    A-Lice
    le Jeu 26 Juin 2014 - 17:38
    Personnellement, je trouve ton explication très bien et compréhensible mais je ne suis pas objective parce que je le savais x)
    Mais ton tuto reste néanmoins très utile pour ceux qui débutent et qui n'y comprennent pas grand chose !

    (C'est moi où il y a un soucis avec le fond de ton message ?)
    FémininAge : 71Message(s) : 41
    Pensées
    le Ven 27 Juin 2014 - 12:51
    A-Lice, j'ai eu peur que j'ai fait n'importe quoi! XD Merci de ton compliment, c'était mon but.

    Il y a un soucis avec le fond de mon message. O.O Je vais voir, j'essayerais de régler ça moi même.
    MasculinAge : 31Message(s) : 31699

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Ven 27 Juin 2014 - 15:27
    Salut !

    Tout d'abord un grand merci de proposer ton aide pour l'apprentissage du codage sur N-U ^^ J'apprécie beaucoup !

    Je trouve également que ton cours est accessible, mais j'ajouterais un petit bémol de chieur-que-je-suis x) en disant qu'il est peut-être un peu "flou", dans le sens où on ne sent pas une maîtrise du sujet. Alors je sais pas si c'est une impression ou pas en fait, car tu dis au début que tu n'as pas un bon niveau, s'il le faut c'est juste à cause de ça que, psychologiquement, j'ai vu des approximations dans tes explications.
    Je suis pas sûr qu'il soit très bon d'utiliser deux class pour un même élément, ou alors il faut dire absolument que s'il y a deux propriétés identiques et qu'elles n'ont pas la même valeur il y aura conflit, et que l'une passera et pas l'autre (une bordure ne peut pas être à la fois rouge et bleue^^).
    Enfin en tout cas c'est tout de même une bonne explication, je pense qu'elle peut être comprise des débutants, donc je vais pas râler davantage xD. Il y a toujours à creuser ou à développer de toute façon, chaque fois on se dit "tiens j'aurais dû parler de ça aussi..." mais voilà il faut parfois choisir de cibler l'info' pour pas coller une migraine aux gens dès le début d'un apprentissage en codage x).
    C'est un bon cours, je te remercie beaucoup !

    Si tu es motivée pour en faire d'autres, n'hésite pas, pense aussi à regarder les explications déjà présentes sur les pages du net, les termes utilisés etc... Et sois peut-être un chouilla plus précise dans ton texte, là on voit que t'es pas sûre de toi et de tes connaissances en fait, ça ressort, non seulement parce que tu le dis clairement, mais aussi par le ton employé et la façon de développer les choses. Sois plus affirmative Razz


    FémininAge : 71Message(s) : 41
    Pensées
    le Ven 27 Juin 2014 - 15:50
    Hey, je te remercie en retour de ton remerciement! 8D

    J'écoute le respecté chieur alors. x)

    C'est peut être psychologique, mais je sais coder. Enfin, si tu me dis: hop, la fille là bas, utilise moi les identifiants et les classes, je pourrais le faire. Je ne dis pas que je sais tout faire, mais j'ai des bases. Tout ce que j'ai écris, j'ai lu sur d'autres sites. Mais comme dis plus haut, je me dis que d'autres auraient très certainement été plus qualifiés que moi. C'est ma première, alors tout au long je me suis dit: t'es pas très bonne. Mais bon, j'ai voulu au moins faire un tuto pour aider le forum. Il y a certes des parties qui sont restées un peu floues pour moi, donc je ne me suis pas plus étalée dessus.

    D'accord, j'ai déjà vu ça, je ne me suis pas posé de questions, mais je vais l'ajouter.

    Ouf! *pan* Oki, je vais essayer de me montrer experte dedans et toussa. *mode hypocrite/menteuse: on!* Finalement, c'est sympa de faire ça, je pense que si j'ai d'autres connaissances, je les expliquerais (peut être). Mais je en changerais pas mon petit avertissement au début, je l'aime trop, il est beau et tout... (ne cherchez pas à comprendre)

    Sinon, merci, ça fait plaisir de se sentir utile, je vais essayer de l'améliorer alors. ^^ (si, si, ça me fait plaisir!)

    EDIT=> Et voilà! En regardant rapidement, je n'ai pas changé grand chose. J'ai modifié des mots, car je pense que c'est vraiment eux qui créaient cette effet d'incertitude et j'ai rajouté ta remarque. Après, si quelqu'un n'a pas compris ou voudrais que j'explique plus un certain point, ça me fait plaisir, n'hésitez pas!

    FémininAge : 23Message(s) : 2596

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    13/20  (13/20)
    Onyx
    le Ven 27 Juin 2014 - 21:19
    Bouh !

    J'aime bien, c'est genre 10 fois plus clair que les quelques fois où j'ai essayé d'expliquer à certains de mes amis ce qu'était une classe en tout cas XD

    Quant au problème pour le fond de ton message, c'est que tu as fermé un "div" qui n'existait pas à la fin de cette partie :
    Code:
    Aussi, .class sert à avoir plusieurs éléments avec le même css. On peut avoir des millions de classes et de tout les noms. Vous pouvez très bien faire en sorte qu'un élément est plusieurs classes.

    [code]<div class="class1 class2">[/code]</div>
    FémininAge : 71Message(s) : 41
    Pensées
    le Sam 28 Juin 2014 - 10:41
    Je suis flattée par tous ces commentaires, merci Onyx! Tu n'as plus qu'à apprendre par cœur ma définition et ils comprendront... //TGV//

    Merci de ton aide sinon, je vais aller corriger ça fissa fissa! ♥
    MasculinAge : 29Message(s) : 69
    Manumanu
    le Mar 10 Mar 2015 - 13:16
    Alors, le sujet date un peu, mais je me permet quand même une remarque : Il faudrait préciser que les id et les classes n'ont pas le même poids (Éventuellement, renvoyer vers le tuto sur le poids des déclarations), et que pour cette raison, on recommande généralement de préférer les classes aux id, MAIS que le Template de FA est vieux et qu'il faut donc composer avec toute une flopée d'id qui peuvent s'avérer gênants.

    @Okhmhaka: Il n'y a aucune contre-indication à utiliser plusieurs classes sur un même élément ; c'est même tout le principe de la modularité qu'on essaie de donner au CSS ces derniers temps, avec divers frameworks. Wink


    MasculinAge : 20Message(s) : 106

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Yukimura Esuki
    le Jeu 13 Aoû 2015 - 23:29
    Bonsoir ! Je te remercie beaucoup pour ce tuto' ! Mais je n'ai pas compris un point qui doit surement être crucial.

    Cela est relié au .class et au #id !

    Je ne comprends ce que tu veux dire par « Être relié à un / plusieurs éléments ».

    Je te remercie d'avance pour les explications. Je suis un peu long à la détente. x)
    FémininAge : 16Message(s) : 114
    Killae Adams
    le Dim 29 Nov 2015 - 20:49
    Hello Yukimura Esuki,
    au cas où j'aurais compris ton problème, voici une explication :
    Admettons que t'as une div, donc un élément hein (au cas où), et que tu veux personnaliser ta div ne serait-ce que pour la rendre visible. Donc suit ici un exemple moche à ne pas refaire sous peine de dégoût c:
    Code:
    <title>Utilité Suprême</title>
    <style> .thé {
      width: 500px;
      height: 200px;}
      .vert {
      border: 2px solid green;
      background: whitesmoke;}</style>

    <div class="thé vert"></div>
    Donc ici on voit qu'on peut donner deux classes à un élément... Même s'il faut noter que c'est mieux à faire quand c'est utile, c'est parfois nécessaire, ici pas du tout...

    Ce qui est dit dans le tuto est que tu peux donner plusieurs classes à ton élément, mais qu'un seul Id sous peine de "cata (faites en l'expérience si vous voulez...)".
    J'espère t'avoir aidé, sinon c'est l'intention qui compte, (m'enfin foulez vous un tout de petit peu pour Noël).
    FémininAge : 16Message(s) : 114
    Killae Adams
    le Lun 30 Nov 2015 - 7:49
    Hm, j'étais fatiguée hier, quelqu'un peut effacer mon message ? Ou l'éditer, comme bon vous semble.
    Contenu sponsorisé
    Aujourd'hui à 7:04

      La date/heure actuelle est Dim 4 Déc 2016 - 7:04