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

Comprendre les spécificités et le poids des sélecteurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les spécificités ou le poids des sélecteurs vont vous permettre de mieux gérer le jeu des sélecteurs. Voyez également pourquoi il peut être contraignant d'utiliser l'identifiant au sein des sélecteurs.
05:54

Transcription

Les spécificités, ou le poids des sélecteurs, sont une partie, on va dire, très importante, de l'application de l'héritage, des cascades, pour la mise en place des déclarations que l'on va faire au sein de nos règles. Donc, pour être plus précis, on a vu qu'on avait plusieurs manières de pouvoir appliquer un CSS à un élément. Soit on le mettait dans une balise, c'est-à-dire, on disait que la balise « p » va être rouge, par exemple. À ce moment-là, elle aura un poids d'unité de 0, 0, 0, 1. C'est-à-dire que chaque fois que l'on aura des balises pour définir la règle, vous avez vu, des fois, on a fait section h1, elle aura un poids de 0, 0, 0, 2, puisqu'il y a eu deux balises, etc... Ensuite, on a vu qu'on pouvait utiliser des classes. Alors si on utilise une classe, cette fois-ci, on passe dans la deuxième rubrique pour le poids, c'est-à-dire qu'on a un poids de 0, 0, 1. Bien entendu, plus on va se rapprocher de la gauche, plus le poids sera lourd. Sauf qu'il ne faut pas confondre avec le système décimal dans lequel on est, c'est-à-dire que si j'ai dix balises ici, forcément, je deviens 0 ici, et je passe 1 ici. Non, non, ça ne marche pas. Une simple classe sera toujours plus forte que 25 balises, pour déclarer notre règle. Il faut regarder, donc, que ce qui est important, c'est que si une classe dans la même balise est définie, c'est la classe qui va gagner. De la même manière, on va avoir les id. Les id vont avoir un poids de 0, 1, 0, 0 à l'unité. Donc si j'ai quatre id qui définissent, j'aurai un poids de 0, 4, 0, 0. Il me faudrait un sélecteur qui aille au-dessus, en terme d'id, ou en terme de dernier élément, ici, comme on va voir juste après, pour pouvoir passer par-dessus. Enfin, ce dernier élément, c'est le style en ligne, c'est-à-dire, de directement mettre à l'intérieur de la balise : style =, et là, on définit notre déclaration, donc propriété, valeur, et là, on passera devant tout le monde. On ne peut pas avoir deux styles en ligne puisqu'on n'aura qu'un seul attribut style au sein d'une balise html. Voilà, donc je vous propose de venir, par l'exemple maintenant, afin de mieux illustrer cela. Alors, ici, on se retrouve avec un style qui a une section qui a été définie, section font-size, background color, et on s'aperçoit que tous les enfants de cette section ont hérité directement de ces propriétés puisque ce sont des propriétés de couleur et de taille de typo, donc là, il n'y a pas de problème, ça se transmet. Maintenant, là où on va agir, ça va être sur les éléments de liste, ici, notamment au niveau du « ul », si je viens définir, par exemple, un « ul », donc une seule balise. Je vais définir une seule balise, ici, et je vais dire que le background de l'ul est olive. Si j'actualise, bien entendu que le background devient olive, ce qui est normal. On avait vu que si maintenant, je mettais une autre déclaration, après, ce serait deux mêmes portées, deux mêmes sélecteurs, ça serait cette nouvelle déclaration qui prendrait le dessus. Ce qu'on va faire, ça va la mettre avant. On va refaire un « ul », ici, on va placer cet « ul » juste avant, et on va dire que ça serait bleu clair. Si j'enregistre, bien entendu que ça reste olive, pourquoi ? Parce que le background olive prend le dessus, c'est le dernier qui a parlé. Mais si je rajoute une balise ici, on va passer en 0, 0, 0, 2, maintenant, alors que l'autre serait en 0, 0, 0, 1. Et donc on voit bien que c'est le bleu qui va passer dessus. Vous voyez même qu'il est déclaré avant, on a chargé la balise, la spécificité est plus lourde. Si on rajoute une classe, alors je vais définir rapidement deux classes et deux id, ici. Je vais les placer, même, en amont, parce qu'on a vu que peu importe sa hiérarchie de cascade, la spécificité va faire qu'on va passer devant. Donc ici, il suffit que j'ajoute à cet élément-là, une classe qui serait égale à classe, puisque c'est le nom que je lui ai donné, d'accord ? Ici, si j'enregistre, la classe va passer devant ce sélecteur ul, et donc, elle va devenir orange, puisque c'est la couleur qui a été attribuée. Et bien entendu, si je rajoute un id, ici, un attribut id qui serait égal à id, ctrl + S, j'enregistre, là, on va passer directement en purple, pourquoi ? Parce qu'on se retrouve dans cet élément-là. Si maintenant, je place un style en ligne, on va passer au-dessus de tous ces éléments, ici, et si je viens, pas à ce niveau-là, je vais le faire quand même au niveau de la classe voilà : style =, et je vais passer un background color qui serait gris, par exemple, puisque c'est ce qui a été écrit dans la mention ici, donc on va rester quand même cohérent à ce niveau-là. Je mets un « ; », bien que pas nécessaire parce que c'est la dernière déclaration, si j'actualise, on voit bien qu'on est passé en gris foncé. Alors ce que je disais tout à l'heure, c'est qu'on n'a pas un système décimal, vous voyez, ici, j'ai un « p », « id », « a » et un nombre de classes indéterminé. Si je vais définir, ici, la classe, et donc je vais placer cette classe, toutes les classes collées les unes aux autres, c'est pas une classe qui est à l'intérieur d'une classe, ce sont des classes au même niveau, donc je les colle toutes. Il y en a environ treize. Si j'enregistre, on voit bien que notre paragraphe s'écrit en rose. Si maintenant, je vais définir un id, qui lui, n'a qu'un poids de 1, en fait, qui n'a pas un poids de 0, 0, 0, 13, donc en décimal, on aurait dit que le 1 passe dans les dizaines, j'ai 1, 3 contre 1. Donc je vais mettre le id bien derrière. Si j'enregistre, c'est quand même lui qui prend le dessus, on écrit en olive, pourquoi ? Parce que j'ai un poids de sélecteur qui est plus fort. Ce qui est important de comprendre, c'est que, des fois, il n'est pas utile d'utiliser des id, parce que pour pouvoir au-dessus des id, ça va être chaud, il va falloir mettre deux id. Et qui dit qu'on a mis deux id parce qu'on avait fait un widget ou un élément web component, ou quoi que l'on ait pu faire, on se dit : « Je vais mettre un id pour passer par-dessus », faites attention, vous allez à chaque fois, monter l'enchère. Donc soyez parcimonieux quand vous stylez CSS avec des identifiants. Pensez qu'après, pour les surcharger, ça va être très compliqué, ça va vous demander de faire des sélecteurs interminables et très volumineux.

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 !