Maison > Article > interface Web > Comment définir la couleur d'une balise HTML ? Résumé des paramètres de couleur pour les hyperliens (style CSS)

Comment définir la couleur d'une balise HTML ? Résumé des paramètres de couleur pour les hyperliens (style CSS)

寻∝梦original: 2018-09-04 13:40:16105768parcourir

Tout le monde devrait être familier avec la balise

hyperlien a. Cet article parle principalement des paramètres de style CSS de base de la balise a . J'espère que vous pourrez vous entraîner davantage ci-dessous. lisez cet article ensemble

Nous devons d'abord connaître le paramètre de couleur de la balise html a :

Nous savons tous qu'en html, la balise a est dans la page Web À quoi ressemble la couleur par défaut ? Essayez maintenant le code pour voir :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<a href="#">php中文网</a>
</body>
</html>

Voici le code d'un document HTML de base :

Comment définir la couleur dune balise HTML ? Résumé des paramètres de couleur pour les hyperliens (style CSS)

L'URL non cliqué ci-dessus est bleue comme celle-ci, et après avoir été cliquée, elle devient violette. Un tel lien n'a pas l'air bien. Nous devons définir une couleur pour la balise a. Par exemple, si je souhaite définir une couleur pour les URL non cliquées, disons rouge avant d'être cliqué, il est rouge et après avoir cliqué, il est noir. Faisons l'effet :

<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>

Ceci est un simple code CSS, jetons un coup d'œil à l'effet :

Comment définir la couleur dune balise HTML ? Résumé des paramètres de couleur pour les hyperliens (style CSS)

C'est le style non visité, qui est rouge

Comment définir la couleur dune balise HTML ? Résumé des paramètres de couleur pour les hyperliens (style CSS)

C'est le style visité, qui est noir ; Expliquons le code :

a:link : C'est un style inaccessible. Vous pouvez y ajouter beaucoup de choses, comme supprimer les soulignements, changer les couleurs et d'autres fonctions ;
.
a:visité : C'est le style après avoir cliqué. Vous pouvez également y ajouter de nombreux éléments, et vous pouvez souligner, changer les couleurs, zoomer et d'autres fonctions
a:hover : Il s'agit du style de survol de la souris. Nous en verrons des exemples plus tard. Voyons d'abord ce que vous pouvez faire. Vous pouvez définir la couleur pour qu'elle change lorsque la souris est garée à la position du lien hypertexte. ;
a:active : On dit que c'est un style activé Pour faire simple, lorsque vous cliquez sur la souris, le style apparaîtra instantanément sur de nombreux sites Web.

Jetons maintenant un coup d'œil à un exemple, l'effet de mettre les quatre ci-dessus dans :

<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
a:hover{color:pink;}
a:active{color:#ccc;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>

Prenons un regardez maintenant L'effet affiché dans le navigateur :

Comment définir la couleur dune balise HTML ? Résumé des paramètres de couleur pour les hyperliens (style CSS)

C'est l'effet du survol de la souris, effectué

Comment définir la couleur dune balise HTML ? Résumé des paramètres de couleur pour les hyperliens (style CSS)

Ceci est Cliquez pour un effet instantané. (Vous voulez en voir plus, veuillez cliquer sur

tutoriel vidéo CSS)

Résumé du lien hypertexte vers une balise :

Il existe donc quatre types de balises Maintenant que nous avons introduit les styles CSS des pseudo-classes d'ancrage, rappelons les quatre utilisations. L'une est le style non cliqué, qui est le style qui s'affiche normalement sans être cliqué. Le style après avoir cliqué est le style après avoir cliqué sur le style. tag. , et un autre est le style de survol de la souris, qui change lorsque vous placez la souris dessus. Vous connaîtrez son utilisation plus tard. Le dernier est l'effet au moment du clic. L'effet peut être considéré comme étant les quatre styles nécessaires pour une balise, de sorte que les paramètres peuvent être meilleurs.

[Recommandation de l'éditeur]

À quoi sert la balise datalist html5 ? Voici des exemples d'utilisation de la balise datalist

Qu'est-ce que la balise include en HTML ? html include implémente l'analyse de la configuration

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser du CSS pur pour animer le mouvement du soleil, de la terre et de la luneArticle suivant：Comment utiliser du CSS pur pour animer le mouvement du soleil, de la terre et de la lune

Articles Liés

Voir plus