How to set up dynamic hyperlinks with CSS (code attached)-CSS Tutorial-php.cn

How to set up dynamic hyperlinks with CSS (code attached)

yulia

Release： 2018-09-26 15:46:14

Original

3572 people have browsed it

This article mainly introduces how to set up dynamic hyperlinks with CSS. It has codes and text descriptions, which are easier to understand. Friends who are interested can refer to it. I hope it will be helpful to you.

In HTML, hyperlinks are implemented through the mark , and the specific address uses the href attribute of the mark .

ali's blog

By default, the hyperlinks in browsing are unified is blue and underlined, and the clicked hyperlink is purple and also underlined.

CSS can set various attributes of hyperlinks, such as fonts, colors, backgrounds, etc., and can create many dynamic effects through pseudo-categories.

First, remove the underline of the hyperlink:

a{   text-decoration:none;  }

Copy after login

At this time, both the hyperlink itself and the underline of the clicked hyperlink are removed.

CSS pseudo-category - Anchor Pseudo Classes, use pseudo-category to create dynamic downloads, the specific attributes are as follows:

A:link - the normal style of hyperlink, in normal browsers style.

A:visited——The style of the clicked hyperlink.

A:hover——The style when the mouse pointer passes over a hyperlink.

A:active - The style of the hyperlink when you click on it, that is, when it is currently active.

<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>

Copy after login

It can be seen that the hyperlinks themselves are dark blue with no underline. After being clicked, they turn black and have no underline. When the mouse pointer passes by, the hyperlink turns yellow and is underlined.

In addition, various background, border and typography effects can be added to several pseudo attributes of the hyperlink. The current activation status is a:active. It is generally displayed in very few cases and is rarely used.

When the user clicks a hyperlink, the focus will easily shift to other places, such as a newly opened window, etc. At this time, the hyperlink is no longer currently active.

The above is the detailed content of How to set up dynamic hyperlinks with CSS (code attached). For more information, please follow other related articles on the PHP Chinese website!