Maison >interface Web >tutoriel CSS >Comment définir le style des liens hypertexte avec CSS ? Comment définir le style des liens hypertexte avec CSS (exemple de code)
Comment définir le style des liens hypertexte avec CSS ? Comment définir le style des liens hypertexte avec CSS (exemple de code)
- 青灯夜游original
- 2018-10-27 14:16:4121070parcourir
Dans le développement de sites Web front-end, les hyperliens sont un élément important, et de beaux styles de liens hypertexte peuvent ajouter des points aux pages front-end. Alors, comment définir le style du lien hypertexte ? Cet article vous donnera une brève introduction sur la façon de définir les styles de liens hypertexte avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Tout d'abord, jetons un coup d'œil au style initial du lien hypertexte sur le navigateur :
Vous pensez que cela n'a pas l'air bien ? bleu. Il y a des soulignements. S'ils sont affichés ainsi sur la page, ils seront très abrupts et rendront la page moins belle. Alors comment modifier la couleur de la police des hyperliens et supprimer le soulignement des hyperliens ? Nous présenterons ensuite comment définir le style du lien hypertexte en utilisant CSS.
Css définit le style de texte dans les hyperliens
À travers un exemple de code simple, apprenons comment CSS définit le style de texte dans la méthode des hyperliens.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接样式</title>
<style>
.demo {
width: 300px;
height: 300px;
margin: 100px auto;
}
.demo .a{
text-decoration:none; /*清除下划线 */
font-family: "楷体";/*设置字体种类*/
color: red;/*设置字体颜色*/
font-size: 30px;/*设置字体大小*/
}
</style>
</head>
<body>
<div class="demo">
<a href="#">php中文网</a><br /><br />
<a href="#" class="a">php中文网</a>
</div>
</body>
</html>Rendu :
Description :
text-decoration:none; : Supprimer le soulignement du lien hypertexte
font-* : Définissez le style de police, tel que : le type de police, la taille, le style (italique, texte italique, etc.), l'épaisseur, etc.
pseudo-classe CSS pour définir le style des hyperliens dynamiques
:link : sélectionnez les liens non visités et définissez leurs styles, c'est-à-dire : Définit le style ; de liens normaux (non visités).
:hover : Sélectionnez l'élément sur lequel le pointeur de la souris flotte et définissez son style ; c'est-à-dire définissez le style lorsque la souris survole le lien.
:active : Sélectionnez un lien actif et définissez son style ; c'est-à-dire définissez le style lorsque la souris clique sur le lien.
:visité : Sélectionnez le lien visité et définissez son style ; c'est-à-dire : définissez le style du lien visité.
A travers un exemple de code simple, découvrons la méthode de définition des styles de liens hypertextes dynamiques à l'aide de pseudo-classes CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接样式</title>
<style>
.demo a {
font-size: 30px;
/*设置字体大小*/
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #00FF00;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
a:active {
color: #0081EF;
text-decoration: none;
}
</style>
</head>
<body>
<div class="demo">
<a href="#" class="a">php中文网</a>
</div>
</body>
</html>La couleur du lien définie dans l'exemple ci-dessus est noire, et le lien visité le lien est vert, rouge lorsque la souris survole le lien et bleu lorsque vous cliquez dessus. Vous pouvez l'essayer vous-même pour voir l'effet. Définir des styles à l’aide de pseudo-classes CSS nécessite de suivre un certain ordre, jetons-y un coup d’œil.
L'ordre des styles de définition des pseudo-classes CSS :
Il n'y a pas de règles. Il existe également des règles pour les styles de définition des pseudo-classes CSS Si l'ordre d'écriture de ces quatre éléments est légèrement. faux, l'effet du lien sera Il se peut qu'il n'y en ait pas, donc chaque fois que vous définissez un style de lien, assurez-vous de confirmer l'ordre de définition, lien - visité - survol-actif, ce que nous appelons souvent LoVe
Principe de haine (les majuscules sont leurs premières lettres).
Résumé : Ce qui précède est tout le contenu de la méthode de définition des styles de liens hypertexte en CSS. Il faut faire attention à l'ordre lors de l'utilisation de pseudo-classes pour définir les styles. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter : Tutoriel vidéo de base CSS , Tutoriel vidéo HTML , Tutoriel vidéo bootstrap !
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!