Home >Web Front-end >CSS Tutorial >How to set up dynamic hyperlinks with CSS (code attached)
How to set up dynamic hyperlinks with CSS (code attached)
- yuliaOriginal
- 2018-09-26 15:46:143567browse
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 3499910bf9dac5ae3c52d5ede7383485, and the specific address uses the href attribute of the mark 3499910bf9dac5ae3c52d5ede7383485.
2027a75694c4961b064ca4941c50a15aali's blog5db79b134e9f6b82c0b36e0489ee08ed
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; }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>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!