Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Travailler avec les classes et les ID

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les classes et les ID (identifiants) représentent un autre élément de base pour sélectionner les parties du document. Découvrez la manière de les utiliser et de les croiser avec les autres éléments balises de la page.
08:08

Transcription

Autre élément de base parmi nos éléments de sélecteur, on a les classes et les ID. Alors, les classes et les ID sont deux éléments quasi incontournables dans des pages HTML classiques. On rencontre les classes généralement avec des points. Ici, ce sera un attribut HTML qui sera représenté, par exemple classe = .notes et pour pouvoir les cibler par des CSS on va utiliser un petit point devant donc ".note" ou ".actif" veut dire qu'on cible une classe. L'intérêt des classes c'est qu'on peut avoir une utilisation multiple au sein de la même page. Donc on pourra utiliser plusieurs fois la même classe au sein de la page. On pourra mettre des niveaux de conteneur de type section même au body. On pourra les mettre à des niveaux très simples, comme des span ou des Q, des sites, etc. On pourra les mettre dans tout type de balise. Les ID, eux, ce sont des attributs ID qu'on va placer au sein des balises HTML et ils vont être représentés par un # devant le mot. Donc #wrapper ou #conteneur sont des ID. L'intérêt des ID c'est qu'ils sont plus puissants, on le verra plus tard. Mais il faut faire attention. Il faut en avoir très peu dans nos pages, parce que ce sont des utilisations uniques. Pas unique dans le site, mais au sein de la page. Dès que j'ai un ID, un élément qui va avoir ID = conteneur je ne pourrais pas avoir un seul autre élément qui s'appellera aussi conteneur Sinon ma page sera fausse. Alors la meilleure façon de le voir, c'est de le mettre en application au travers d'un exemple plus concret. Ici, on a un peu modifié notre contenu de tout à l'heure. On a toujours une imbrication globale de l'article. En revanche, ce coup-ci à l'intérieur de la section on a également des articles. On pourrait imbriquer comme ça, des articles dans des sections, ou des sections dans des articles. Ensuite, on a placé quelques classes, voyez ici au niveau de l'attribut p classe = notes On ne s'en est pas privé. On l'a rajouté ici également. p classe = notes et ici p classe = notes Et puis on a rajouté des ID qui ont le même nom. C'est à éviter mais c'est pour pouvoir être encore plus paradoxal dans la démonstration, mais ayez des noms d'attributs, de classes ou quoi que ce soit, qui soit le plus explicites possible pour pouvoir après débugger. Donc ici, je n'ai qu'un seul ID note qui va être cette section. On va passer dans une feuille de style CSS. On va venir explorer toutes les possibilités. Si déjà, j'explore la possibilité note et que je dis : « je souhaiterais que toutes les notes possèdent une color qui serait un 85B2 » - j'ai bien aimé ce petit vert. C'est vrai que j'ai des goûts un peu particulier mais voilà. Si j'enregistre et que j'actualise ma page, les paragraphes qui ont les classes notes, pas besoin de revenir sur HTML, on se rappelle qu'il y avait 3 paragraphes. Les trois auraient été ciblés en vert Tous les autres paragraphes ont été évités. La classe va nous permettre au sein d'un simple sélecteur de pouvoir globaliser. L'inconvénient : classer toutes ces balises dans notre code. Il va falloir aller voir le code HTML et dire : « Ici, il y a une classe qui sera note. » Pareil pour les ID. Pour les ID, il aura fallu placer un attribut ID et dans cet attribut ID on va pouvoir le cibler. Lui il va être tout seul. On va utiliser la couleur 'bleu' de tout à l'heure, c'était un 00698C. J'enregistre. Cet ID est bleu. Vous voyez que tout est bleu y compris le titre, l'article et le paragraphe qui est contenu. Si cet ID avait contenu plus de choses que ça, par exemple je le mets sur cette section ici, j'enregistre. A ce moment-là, toute la section va être bleue. Sauf celui qui est vert parce qu'il a été défini pour être vert à ce niveau-là. Tout va pouvoir s'hériter comme ça, on verra l'héritage et les cascades par la suite, mais vous voyez qu'on peut avoir des gestes chirurgicaux en venant pointer sur des attributs, de type classe ou de type identifiants. Avant d'aller dans l'utilisation de classes conjointement à de simples balises, regardons déjà le comportement de certaines balises. Si je prends par exemple section article en fait je suis en train de dire à ce moment-là que je souhaite atteindre tous les articles qui sont à l'intérieur de section. On est bien d'accord que je vais avoir que celui-ci qui sera atteint. Article à l'intérieur de section. Si je reviens ici, et que je lui dit que j'ai un background color en DFFFBF ici, si j'actualise, on voit bien qu'il n'y a que lui qui est atteint. Si par contre, je copie cette partie-là, et j'inverse. Si je dis que c'est article section, ctrl+S pour enregistrer. Attendez, je vais commenter cette partie-là. Parce qu'il faut faire attention à ne pas cumuler ces deux choses sinon ça ne serait pas très explicite. Cette fois-ci je ne vais cibler que les sections à l'intérieur de l'article. D'ailleurs toutes les sections, puisque toutes les sections sont placées dans un article commun. C'est là justement où il faut faire cette distinction. Dans quel ordre je vais mettre mes balises ? Et ça a un sens ! Il y a un dernier point sur lequel je souhaitais attirer votre attention ici. Si je dis aside h1, on est bien d'accord que je vais cibler tous les h1 qui sont à l'intérieur de aside. Si je mets une virgule, cette fois-ci, et que je dis section, h1 et que là, je place un text-decoration par exemple qui serait underline, donc je vais souligner tous les textes, tous les titres h1 dans les aside et les sections. Voyez que ici maintenant, quand je vais actualiser ma page. Si j'enregistre, c'est mieux. Voyez que tous les titres qu'ils soient en aside ou en section ont été soulignés sauf le titre de l'article. Donc la virgule ici, va permettre de séparer et de dire : ces deux éléments possèdent exactement la même déclaration. Maintenant, qu'on a vu ces imbrications-là, passons au deuxième document qui est un peu plus restreint. qui va travailler avec les notes, les pclasse notes, un article classe note et ici un span classe note à l'intérieur. On va actualiser sur ce document. Pour bien comprendre si je dis ici que je vais placer un note qui a en background color ce vert justement. Quand j'enregistre, on voit bien que tous les éléments sont verts. Ici, on a bien directement tout l'intérieur de l'article qui est vert. Le pclasse note est vert lui aussi bien entendu. Et ici, le span à l'intérieur de ce p va être vert également. Si maintenant je change mon fusil d'épaule et que je dis, dans les classes notes je ne veux que les p. C'est là où on arrive au regroupement des éléments. C'est intéressant d'avoir bien vu au préalable, section et article. Si je fais note p, ça veut dire qu'en fait je ne veux que les p qui sont à l'intérieur de note. Les seuls que je vois comme p à l'intérieur de note, c'est à l'intérieur de l'article. Donc pour pouvoir les distinguer, je mets une font-size de 20 pixels. Si j'actualise, on voit bien qu'il n'y a que eux qui sont en 20 pixels. Tous les autres, n'ont pas été touchés. Parfait. Si maintenant je dis p .note c'est là où il y a une richesse avec les classes que l'on n'a pas avec les sélecteurs classiques : si je prends une color un peu carmin, j'enregistre. Si j'actualise ma page, on a bien uniquement les notes qui sont à l'intérieur d'un paragraphe. Quelles sont les notes qui sont à l'intérieur d'un paragraphe ? On n'en a pas. La seule note qu'il y a à l'intérieur d'un paragraphe, c'est ce span qui la possède ici. Je suis bien à l'intérieur d'un paragraphe et je suis une classe note à l'intérieur du paragraphe. Alors comment je peux faire pour dire : « non, je veux les notes qui sont le paragraphe lui-même. » Ce qui est important, c'est l'ordre dans lequel je vais préciser les balises. Si ici je dis p.note (vous vous rappelez, on avait classé toutes les notes, y compris les span, l'article et le p qui étaient atteints) Ici, si je dis, j'ai un background color de cette couleur, il n'y a que le paragraphe de cette couleur qui va pouvoir l'utiliser donc le seul paragraphe qui est de cette couleur, si je viens ici, on voit bien que c'est le premier paragraphe qui est de classe note. Ici, une fois qu'on a compris cette utilisation des classes, cette utilisation des articles, les imbrications avec les espaces, avec les virgules, les collages si on utilise les classes avec les sélecteurs, voyez toute la puissance qu'on peut avoir dans la sélection. On accroît encore notre capacité à sélectionner des éléments. Ce qui marche là avec des classes marche exactement pareil avec des identifiants.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !