Dans cette vidéo, nous allons nous concentrer sur trois sélecteurs CSSA.
Ce sont l'ID d'élément en classe.
Il ya donc beaucoup plus d'options pour sélectionner des éléments.
Nous allons en apprendre plus sur eux plus tard, nous allons nous concentrer sur ces trois pour commencer.
Et quand je dis que le sélecteur pense à cette règle générale dont nous avons parlé tout à l'heure quand il a commencé CSSA il ya quelques vidéos où nous avons un sélecteur, puis accolades et puis quelques propriétés.
Nous allons donc voir quelques sélecteurs différents que nous pouvons mettre ici.
Et la façon dont nous allons faire que nous allons réellement construire une liste vraiment simple à faire ensemble.
Je vais donc créer un nouveau dossier.
Je vais le sauver et je vais l'appeler pour faire la liste HMO une fois que nous avons que alors nous allons de l'avant et ajouter le HMO.
Et la façon dont ça va fonctionner, ça va être un H1 et alors nous allons avoir un puits avec les alliés.
Mais dans chaque allié nous allons avoir du texte et nous allons avoir une petite case à cocher afin de voir si vous pouvez vous rappeler comment faire case à cocher, c'est type d'entrée est égale case à cocher et puis en dessous ou après que nous aurons notre texte .
Alors nous allons marcher rouillés alors je vais juste dupliquer cela.
Donc nous allons avoir trois d'entre eux ici marcher Rusty juste pour acheter des produits d'épicerie.
Et puis enfin terminer l'enregistrement voir évaluer Phidias.
Donc, si nous ouvrons ce dans un navigateur, nous allons voir une version de style et de style de notre produit final, mais le squelette est là.
Nous avons nos deux do's et chacun qui est un petit checkbox à côté de lui.
D'ACCORD.
Donc, la prochaine chose que nous voulons faire est de connecter une feuille de style.
Donc, pour ce faire, cette fois, nous allons commencer par connecter une feuille de style non existante, puis nous allons aller de l'avant et de créer une feuille de style.
Donc, certaines personnes appellent ce développement axé sur l'erreur où nous écrivons quelque chose que nous savons ne fonctionnera pas et ensuite nous le faisons travailler après.
Donc, je vais appeler cela pour faire l'évaluation introduire C voir évaluer qui n'existe pas.
La prochaine chose que nous allons faire est d'aller de l'avant et de faire ce dossier à Dewes que C évaluer.
Et ce doit être au même endroit que pour faire une étude.
Tim je vais sauver ça et juste pour m'assurer qu'il est connecté.
Faisons quelque chose comme l'orange de fond de corps juste et vous savez que c'est réellement ce que je parlais dans la vidéo couleur.
C'est l'une des seules fois où je voudrais vraiment utiliser une couleur comme orange.
Mis à part l'enseignement, je voudrais juste l'utiliser pour s'assurer que quelque chose est connecté Je veux juste une couleur vive.
Je veux voir si cela à utiliser que C Ss est référencé correctement ici.
Donc, si nous frais.
Ok, de grandes choses sont liées.
Donc, ce que nous allons faire, c'est de revenir aux diapositives ici et de parler du sélecteur d'éléments en premier qui est celui que nous avons consacré beaucoup de temps à être prêt.
C'est essentiellement le type d'attaques que vous spécifiez div ou paragraphe ou corps et puis il va sélectionner tous les éléments correspondants toutes les instances qui correspondent à cela.
Donc, dans ce cas, nous avons deux divs et chaque div a deux paragraphes et donc nous avons mis tous les divs que l'arrière-plan violet que nous obtenons deux dispositif pourpre nous avons mis tous les paragraphes à être de couleur jaune nous obtenons quatre paragraphes jaunes.
C'est ce que nous faisons ici lorsque nous sélectionnons le corps.
Nous pourrions aussi le faire pour tous les ALWIS et leur donner un ordre ou nous allons chirp frontière de deux pixels rouge solide.
Maintenant bien sûr que cela fonctionne sur tous les alliés.
D'ACCORD.
Donc, la prochaine chose que nous pourrions vouloir faire est de sélectionner un allié ou un H-1 ou une instance de quelque chose.
Dans cet exemple, nous sélectionnons le troisième mensonge et le rendons jaune.
Et la façon dont nous faisons cela est en fait en modifiant légèrement l'équipe et ensuite en utilisant un crochet que nous ajoutons à l'H T M L et R S S tous se référer à elle et le tourner en jaune.
Donc, la première étape est d'ajouter ce crochet qui est appelé un ID.
Et ainsi la manière dont une idée fonctionne vous l'ajoute comme attribut à n'importe quel ID d'élément égal.
Et puis entre guillemets tout nom que vous voulez, il peut être n'importe quoi.
Et puis ce que nous faisons est de se référer à cela plus tard en écrivant Octa Thorpe ou signe de hachage, puis le nom de l'ID et qui va sélectionner le d'un élément qui correspond à ce nom d'identification.
Par exemple, disons que je veux que cet allié final soit légèrement différent.
Ce que je pourrais faire, c'est d'aller ici, Ally et de lui donner une pièce d'identité.
Et cela peut être n'importe quel nom du tout.
Appelons juste ceci spécial et la raison que je dis que je l'appelle spécial il n'est pas vraiment un grand nom mais il vous montre que le point d'employer un identifiant est d'isoler quelque chose dehors.
C'est un moyen de cibler un élément individuel et une note sur un ID.
Il ne peut apparaître qu'une fois sur une page.
Donc, si je fais cela, puis essayer de donner l'ID spéciale à deux éléments qui est effectivement invalides HMO.
Donc, il est toujours censé être là une fois sur la page.
Il est utilisé uniquement pour isoler un seul élément.
Nous pouvons cependant avoir plusieurs ID sur une page tant qu'ils n'apparaissent pas plus d'une fois.
D'ACCORD.
Alors allons avec ce spécial.
Maintenant, nous allons le faire jeter un oeil ici.
C'est le dernier ici.
Donnez-lui une couleur de fond.
Donc, pour faire que Id Le nom est spécial.
Nous allons à notre dossier CSSA et nous écrivons spécial et nous mettons une octave en face de lui et cela nous dit simplement que nous parlons d'un ID.
Donc, tout ce que nous faisons est d'écrire ou C S S ici ici alors faisons la couleur de fond et nous allons le rendre jaune.
Enregistrez l'actualisation du fichier et vous ne pouvez le voir que lorsqu'il est jaune.
Il y a donc quelques choses que je veux souligner.
Le premier est que ce code fonctionne toujours.
Il tourne tous les alliés.
Il leur donne une frontière rouge, y compris celui-ci le dernier.
Et puis nous ajoutons en plus de cela en ajoutant un arrière-plan jaune seulement à la dernière base hors de ce crochet que nous avons ajouté et appelé dans l'ID.
Donc, pour résumer une idée comme un moyen de sélectionner un élément, vous ne pouvez utiliser un ID qu'une fois par page, mais nous pouvons avoir autant d'ID que nous voulons sur une page.
Donc, les ID sont excellents pour isoler les éléments individuels, mais souvent nous voulons avoir plusieurs éléments qui ressemblent, mais nous ne voulons pas tous les alliés par exemple.
Alors disons que je voulais style la moitié des Alliés à sens unique et la moitié d'entre eux une autre façon, nous pourrions utiliser une classe pour y parvenir.
Donc, la façon dont une classe fonctionne, c'est comme un ID, sauf qu'il est appelé une classe et nous pouvons l'appliquer à n'importe quel nombre d'éléments sur une page.
Donc, comme vous pouvez le voir ici, nous appliquons une classe appelée la mise en évidence pour le premier paragraphe et le troisième paragraphe et puis nous nous référons à elle dans notre succès avec un point au lieu d'une octave Thorpe.
Donc encore une fois pour contraster que ici pour sélectionner un ID nous utilisons le signe de hachage ou l'octave Thorpe ici pour sélectionner une classe.
Nous utilisons le point.
Sinon, ils fonctionnent de la même manière.
Alors, faisons un exemple.
Je vais ajouter une classe et la façon dont je veux que cela fonctionne, nous allons faire semblant que ces deux sont cochées.
Donc, je veux qu'il y ait une ligne dans le texte.
Donc, quand on regarde acheter des produits d'épicerie et marchait resti il ​​devrait y avoir une grève en passant par ce texte, mais pas le dernier.
Donc, la façon dont nous faisons cela ou une façon de le faire est avec la classe.
Donc, sur la volée, je vais aller de l'avant et ajouter une classe et il va appeler cela terminé et une autre classe égale terminée et je vais enregistrer que et si je rafraîchir.
Rien ne se passe parce que je n'ai pas de styles.
Donc, maintenant, je vais à mon C Ss et je point droit et ensuite le nom de la classe terminée accolades et maintenant le style.
Donc, je vais présenter quelque chose de nouveau ici qui s'appelle la décoration de texte et la décoration de texte est un moyen d'ajouter une ligne à travers.
Mais il ya quelques choses que vous pouvez faire.
Vous pouvez ajouter un soulignement et vous pouvez ajouter un souligné ondulé Apparemment, je ne savais pas qu'une ligne à travers et une ligne qui est juste comme un soulignement, sauf sur le dessus.
Donc, nous allons utiliser ligne à travers et qui devrait être.
Donc, si je rafraîchir.
Gardez l'œil sur ces deux premiers.
Nous avons maintenant une ligne à travers.
Génial.
Une note rapide pendant que je suis ici est que si je veux que ces cases à cocher soient vérifiées lorsque la page est chargée.
Donc en ce moment ils ne sont pas vérifiés et je dois les vérifier manuellement mais si je veux que les deux premiers soient vérifiés, je peux aller ici et ajouter un attribut appelé vérifié.
Et cela fonctionne sur les entrées case à cocher.
Donc, en faisant cela si j'étais frais Maintenant, quand la page est chargée, ils sont vérifiés.
Alors ne voyons pas vraiment évaluer, mais il est important de savoir que vous pouvez le faire.
D'ACCORD.
Nous allons donc terminer très vite.
Nous avons le sélecteur d'éléments pour sélectionner tout un élément donné.
Tous les ALWIS divs tous les paragraphes.
Nous avons le sélecteur ID qui sélectionnera l'élément avec l'ID correspondant et nous avons toujours besoin d'utiliser une octave pour cela.
Ou un symbole de hachage.