Lorsque vous concevez un site Web, vous souhaiterez peut-être - être le style d`un élément lorsqu`il est activé par l`utilisateur. Par exemple, vous souhaiterez peut-être modifier la couleur d`un bouton ou d`un lien lorsque l`utilisateur clique sur le bouton ou le lien
est l`endroit où la pseudo-classe CSS est disponible dans :. Actif. La pseudo-classe active vous permet de sélectionner des éléments qui ont été activés par l`utilisateur, auxquels vous pouvez appliquer des styles
Ce tutoriel abordera, avec des exemples, les bases du surnom. CSS -classes et comment vous pouvez utiliser la pseudo-classe active dans votre code. À la fin de ce tutoriel, vous serez familiarisé avec l`utilisation de la pseudo-classe active
Pseudo-classes CSS
En CSS, les sélecteurs sont utilisés pour sélectionner. les éléments auxquels appliquer un style ou un ensemble de styles. Par exemple, un sélecteur vous permet de sélectionner toutes les balises
Une fois que l`utilisateur a cessé de cliquer sur un élément, l`élément sera ne plus être "activé". Ainsi, l`article ne sera pas sélectionné par le sélecteur actif. lorsque l`utilisateur quitte pour cliquer sur un élément
CSS : Exemples actifs
indique de laisser deux exemples pour illustrer comment la pseudo-classe peut être utilisée : active
liens actifs
Supposons que vous concevez un site Web pour un club de jeu de cartes local, les Wizards of the Boards. liste des jeux de cartes joués par les membres du club.
par défaut, ce lien devrait apparaître en bleu clair. Lorsque vous cliquez sur ce lien, la couleur du texte doit devenir orange. pour cela nous pouvons utiliser la pseudo-classe : active. Voici le code que nous utiliserions pour changer la couleur de notre texte en cliquant sur un lien :
Notre code renvoie : Cliquezbouton dans l`éditeur de code affiché - ci-dessus pour voir la sortie de notre HTML / CSS
dans notre fichier HTML, nous avons défini un paragraphe de texte à l`aide de la balise
décrivant l`histoire des Wizards of the Card Game Boards club. Dans notre balise
Nous avons travaillé sur un module pour la carte Wizards of the Game Club Boards qui permet aux gens de montrer leur intérêt pour le club.
Vers la fin de notre formulaire, nous voulons créer un bouton à dit "soumettez votre intérêt". Lorsque ce bouton est cliqué, une bordure orange de 3 pixels de large doit être appliquée autour du bouton
Nous pourrions créer ce bouton en utilisant le code suivant :.
Notre code renvoie : Cliquezbouton dans l`éditeur de code affiché - ci-dessus pour voir la sortie de notre HTML / Code CSS
Analysons notre code.. Dans notre fichier HTML, nous avons défini un bouton à l`aide du libellé du bouton <>. Ce bouton contient le texte "Soumettez votre intérêt.
Dans notre feuille de style CSS, nous avons défini une règle qui s`applique à une balise button <> lorsqu`elle est déclenchée par l`utilisateur. Cette règle crée une bordure pleine de 3 pixels de large autour de notre bouton. Nous utilisons le. Sélecteur actif pour appliquer cette règle uniquement lorsque le bouton est actif
Donc si on clique sur notre bouton, un liseré orange apparaît et dès qu`on arrête de cliquer sur le bouton, le liseré disparaît
p>
Conclusion
Le CSS : la classe pseudo-active permet de sélectionner un élément lorsqu`il est dans son état "actif" une fois que vous avez sélectionné un élément actif, vous pouvez appliquer un style ou un ensemble de styles à l`élément
bouton dans l`éditeur de code affiché - ci-dessus pour voir la sortie de notre HTML / CSS
