CSS Lien actif
Exemple 1
Ouvrez votre fichier HTML pour créer des liens. Pour styliser ces liens, nous créerons notre fichier CSS. Nous utilisons le Visual Code Studio pour effectuer ces exemples. Donc, nous créons le fichier HTML, et le code HTML est également donné ici. Après avoir terminé le code, enregistrez-le avec le «.Extension html ”.
Dans le code HTML précédent, nous créons trois liens différents. Le premier lien que nous avons créé est le lien "Google", le deuxième lien est le lien "Yahoo", et le dernier lien est le lien "Firefox". Nous allons également styliser ces liens dans CSS. Ce fichier HTML est là pour créer ces liens. Maintenant, passez au fichier CSS suivant et voyez comment styliser ces liens.
Code CSS
Dans l'image précédente, nous utilisons le sélecteur «: actif», que nous utilisons pour donner du style à ce lien. Lorsque l'utilisateur appuie sur ce lien, la couleur d'arrière-plan du lien devient «jaune». Ensuite, nous avons le sélecteur «: lien», qui styles le lien qui n'est pas visité et modifie la couleur du lien non visité avec «bleu». Il apparaîtra «bleu» à l'écran. Après cela, nous utilisons le sélecteur «: Visité», et ce sélecteur visité modifie la couleur du lien visité avec «Purple». Enfin, nous avons le sélecteur «: Hover» dans lequel nous modifions la couleur du lien vers une couleur «rouge» lorsque le curseur se déplace sur le lien. Lorsque vous déplacez votre souris sur ces liens, la couleur de ces liens change en «rouge». Dans cet exemple, nous avons changé la couleur du lien lorsque vous planez dessus et visitez le lien ou la couleur du lien non visité.
Sortir
Vous pouvez voir trois liens dans l'image précédente. Les deux premiers liens sont de couleur «violet», donc cela signifie que ces deux liens sont visités. La couleur du troisième lien est «bleu», ce qui signifie que ce troisième lien n'est pas visité car nous définissons ces couleurs dans le code CSS pour les liens visités et non visités. Lorsque nous planons sur n'importe quel lien, sa couleur se transforme en une couleur «rouge». Lorsque nous cliquons sur n'importe quel lien, la couleur de l'arrière-plan du lien apparaîtra «jaune». Lorsque nous cliquons sur le premier lien Google, la page Google apparaîtra à l'écran, comme indiqué dans l'image suivante:
Exemple 2
Ceci est un autre exemple où nous créons un lien entre le paragraphe et donnons des styles à ce lien dans CSS. Voyons comment le lien est actif entre les paragraphes.
Dans l'image précédente, vous pouvez voir que nous avons créé un paragraphe utilisant HTML et ajouté un lien entre le paragraphe. Nous utiliserons CSS dans cet exemple pour modifier la couleur du lien et du paragraphe.
Code CSS
Dans le fichier CSS précédent, vous pouvez voir que nous avons changé la couleur du lien vers «bleu» à l'intérieur des accolades bouclées de «: lien», donc ce lien apparaîtra en bleu entre les paragraphes. Ensuite, nous utilisons une couleur «rouge» pour le lien visité. Pour «planer», nous sélectionnons la couleur d'arrière-plan comme «jaune». La couleur «active» du lien est définie comme «violet», et la couleur du paragraphe actif est désignée comme une couleur «#eee». Ainsi, lorsque le lien est actif, il modifie la couleur du lien ainsi que la couleur d'arrière-plan du paragraphe.
Sortir
Dans cette première sortie, vous pouvez voir que la couleur du lien dans le paragraphe apparaît «bleu» comme nous le définissons comme «bleu» dans notre fichier CSS.
Dans la deuxième sortie, la couleur du lien se transforme en «rouge», ce qui signifie que nous avons visité le lien ici, donc sa couleur est passée de «bleu» en «rouge».
Exemple 3
Dans ce troisième exemple, nous modifierons la taille de la police du lien, le style de police et les couleurs à l'aide de CSS. Pour cela, nous devons créer différents liens dans HTML.
Dans le HTML précédent, nous avons créé cinq liens différents en utilisant les différentes classes à l'intérieur du «». Nous donnons le nom de la classe en tant que «link1», «link2», «link3», «link4» et «link5». Nous utilisons ces noms pour modifier le style du lien.
Code CSS
Nous utilisons le nom «link1» de la classe et appliquons le style sur ce premier lien. Le premier lien apparaît «rouge» lorsqu'il est «actif». Ensuite, nous changeons la «taille de police» du deuxième lien. Lorsque nous survons ce lien, la taille de ce lien augmente à «150%». Nous définissons la «couleur d'arrière-plan» du troisième lien vers «rouge», de sorte que la couleur d'arrière-plan devient «rouge» lorsque nous survons sur le troisième lien. Nous changeons le style de police du quatrième lien en utilisant la propriété «Font-Family». Nous utilisons la «décoration de texte» dans le cinquième lien et la définissons sur «souligner». La sortie est affichée.
Sortir
Cette sortie modifie sa couleur lorsque nous survons sur le premier lien. Lorsque nous survons sur la deuxième liaison, sa taille de police change. En ce qui concerne le troisième lien, sa couleur d'arrière-plan change. Le style de police change en «monospace» lorsque vous survolez le quatrième lien.
Exemple 4
Dans cet exemple, nous créerons deux boutons de liens avec des liens à l'intérieur des boutons. Dans le premier bouton, nous plaçons le lien de «gmail». À l'intérieur du deuxième bouton, nous mettons le lien de "Facebook". Ainsi, lorsque vous cliquez sur le premier bouton, il ouvrira la page Gmail. Lorsque vous cliquez sur le deuxième bouton, il ouvrira la page Facebook. Maintenant, nous voulons également appliquer le style de ces liens.
Lorsque ce lien est actif, la couleur de ce lien apparaît «rouge» alors que nous plaçons la «couleur: rouge» à l'intérieur des accolades bouclées du sélecteur «: actif». Lorsque nous survons ce lien, qui se trouve à l'intérieur du bouton, la couleur du bouton devient «rose» alors que nous définissons cette couleur dans le fichier CSS. Après avoir visité ces liens, la couleur sera «bleue», et la couleur de l'arrière-plan du bouton sera «blanche».
Sortir
La sortie précédente montre deux boutons de liens dans lesquels nous avons deux liens différents, et vous pouvez voir que la couleur des deux liens est «bleue», ce qui signifie que les deux liens sont visités.
Conclusion
Nous avons appris le «lien actif» dans ce guide. Nous avons appliqué un style différent sur différents liens en utilisant les propriétés CSS. Nous avons effectué quatre exemples divers ici car nous savons que le lien est actif lorsqu'il est pressé. Ici, nous avons changé le style du lien actif, la taille de la police du lien lorsque nous le survons et la couleur après avoir visité le lien. Nous avons utilisé différentes couleurs pour les liens visités et non visitées dans ce guide. Nous avons appris à styliser ces liens actifs dans CSS en détail.