Comment mettre en place des hyperliens dynamiques avec CSS (code ci-joint)-tutoriel CSS-php.cn

Comment mettre en place des hyperliens dynamiques avec CSS (code ci-joint)

yulia

Libérer： 2018-09-26 15:46:14

original

3572 Les gens l'ont consulté

Cet article vous présente principalement la méthode de définition de liens hypertextes dynamiques avec CSS. Il contient du code et une description textuelle, qui sont relativement faciles à comprendre. Les amis intéressés peuvent s'y référer.

En HTML, les hyperliens sont implémentés via la marque , et l'adresse spécifique utilise l'attribut href de la marque .

le blog d'ali

Par défaut, les hyperliens dans la navigation sont unifiés soit en bleu et soulignés, et le lien hypertexte cliqué est violet et également souligné.

CSS peut définir divers attributs des hyperliens, tels que les polices, les couleurs, les arrière-plans, etc., et peut créer de nombreux effets dynamiques via des pseudo-catégories.

Tout d'abord, supprimez le soulignement du lien hypertexte :

a{   text-decoration:none;  }

Copier après la connexion

À ce stade, le lien hypertexte lui-même et le lien hypertexte cliqué sont soulignés.

Pseudo-catégorie CSS - Ancrer les pseudo-classes, utilisez une pseudo-catégorie pour créer des téléchargements dynamiques. Les attributs spécifiques sont les suivants :

A:link - le style normal de lien hypertexte, dans les navigateurs normaux. style.

A:visité - le style du lien hypertexte cliqué.

A:hover - le style lorsque le pointeur de la souris passe sur un lien hypertexte.

A:active - Le style du lien hypertexte lorsqu'on clique dessus, c'est-à-dire lorsqu'il est actuellement actif.

<html>
       <head>
              <title>                    
              </title>
              <style>
                     <!--
                     a:link{
                     color:#005799;
                     text-decoration:none;
              }
                     a:visited{
                     color:#0000;
                     text-decoration:none;
              }
                     a.hover{
                     color:#ffff00;
                     text-decoration:underline;
              }
                     -->
              </style>
       </head>    
       <body>
              <table width="600px"cellpadding="2" class="chara1" align="center">
                     <tr>
                            <td><a href="#">首页</a></td>
                            <td><a href="#">心情日记</a></td>
                            <td><ahref="#">Free</a></td>
                            <td><a href="#">一起走到</a></td>
                            <td><a href="#">从明天起</a></td>
                            <td><a href="#">纸飞机</a></td>
                            <td><a href="#">下一站</a></td>
                     </tr>   
              </table>
       </body>
</html>

Copier après la connexion

Comme vous pouvez le voir, les hyperliens eux-mêmes sont bleu foncé sans soulignement. Après avoir cliqué, ils deviennent noirs et n'ont pas de soulignement. Lorsque le pointeur de la souris passe, le lien hypertexte devient jaune et est souligné. .

De plus, divers effets de fond, de bordure et de typographie peuvent être ajoutés à plusieurs pseudo-attributs de l'hyperlien. Le statut d'activation actuel est a:active, qui est généralement affiché dans très peu de cas et est rarement utilisé.

Lorsque l'utilisateur clique sur un lien hypertexte, le focus peut facilement être transféré vers d'autres endroits, comme une fenêtre nouvellement ouverte, etc. À ce stade, le lien hypertexte n'est plus actif.

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!