*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 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...
C'est ça. Si ça ne vous dis rien, je vous redirige vers le cursus codage.
Regardons un autre cas:
Alors? Vous ne remarquez pas quelque chose?
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:
.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:
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!
Tout ce charabia pour expliquer une chose très simple: .class sert de sélecteur, et s'écrit comme ceci:
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.
#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.
Stop! J'y viens! Alors, comme dit plus haut, id est fait pour être utilisé qu'avez un élément. Un UNIQUE. Jamais deux.
Conclusion
Dernière édition par Pensées le Sam 28 Juin 2014 - 10:45, édité 5 fois
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:
#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:
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*
.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
