Comment utiliser CSS pour manipuler les styles de liens

Cet article expliquera en détail comment contrôler le style hyperlien via CSS. Nous parlons principalement des hyperliens de type texte, notamment si le lien hypertexte est souligné, la couleur du texte du lien hypertexte et d'autres styles.

Qu'est-ce qu'un lien hypertexte ?

Les hyperliens font généralement référence à la relation de connexion entre une page Web et une cible. Cette cible peut être une autre page Web, ou un emplacement différent sur la même page Web, ou encore une image, une adresse e-mail, Un fichier ou même une application. L'objet utilisé pour les hyperliens dans une page Web peut être un morceau de texte ou une image. Lorsque le spectateur clique sur le texte ou l'image lié, la cible du lien sera affichée sur le navigateur et ouverte ou exécutée en fonction du type de cible.

Le code du lien hypertexte

<a href="http://www.php.cn/" target="_blank" title="关于div css的网站">DIV+CSS</a>

est analysé comme suit :

href suivi de l'adresse liée, l'adresse du site Web cible ici est http://www. php.cn/

target

_blank -- ouvre le lien dans une nouvelle fenêtre

_parent -- ouvre le lien dans le formulaire parent

_self -- ouvre le lien dans le formulaire actuel Lien, c'est la valeur par défaut

_top -- Ouvrir le lien dans le formulaire actuel et remplace l'intégralité du formulaire actuel (page cadre)

titre suivi par la description de la cible du lien, c'est-à-dire que le lien hypertexte est Une brève description de l'URL du lien ou du titre

CSS peut contrôler le style du lien hypertexte - lien CSS le style est le suivant

a:link est l'état initial du lien hypertexte

a:hover est lorsque vous placez la souris dessus

a:active est lorsque la souris est enfoncée. est cliqué.

a:visité est la situation après la visite

1 Généralement, la méthode de style des hyperliens pour l'ensemble du site.

a{color:#333;text-decoration:none; } //Le style de couleur du texte avec des liens vers l'ensemble du site est color:#333 et texte directement non souligné- decoration:none;

a:hover {color:#CC3300;text- decoration:underline;}//Placez la souris sur le lien hypertexte et le style de couleur du texte devient color:#CC3300 et soulignez le texte; link text-decoration:underline;

2. Contrôlez le lien hypertexte en définissant la classe dans la méthode CSS de style de lien

Code de lien hypertexte de cas1a61dba4fe9f696a1cfb6ae8d8ecc1d5CSS5db79b134e9f6b82c0b36e0489ee08ed

correspond au code CSS

a.yangshi{color:#333;text-decoration:none; }

a.yangshi:hover {color:#CC3300;text-decoration:underline;}

Grâce à ce paramètre, vous pouvez contrôler le style du lien hypertexte nommé "yangshi" dans la classe CSS au sein du lien

3. Contrôlez le lien hypertexte via le style CSS de la classe CSS correspondant au parent en dehors du lien hypertexte

case hyperlink code0a9af51c14cdc756fef819e32a4a19aaf4d8889c09dded5fa20696975e34f321CSS5db79b134e9f6b82c0b36e0489ee08ed

code CSS correspondant

.yangshi a{color:#333;text -decoration:none;>

.yangshi a:hover {color:#CC3300;text -decoration:underline;}

Ce qui mérite d'être noté ici est la différence entre le style du code CSS de a.yangshi et .yangshi a

Voici comment définir le style du lien hypertexte en utilisant CSS, si nécessaire, les amis peuvent l'enregistrer et continuez à prêter attention aux autres mises à jour sur ce site.

Lecture connexe :

Pourquoi le HTML est-il tronqué et comment le résoudre

Comment apprendre Div et CSS

Comment utiliser la position en CSS

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!