Home >Web Front-end >CSS Tutorial >How to set link style with CSS
How to set link style with CSS
- (*-*)浩Original
- 2019-11-30 14:13:254306browse
We can style links in different ways.
# Set the link of link (Recommended Learning: CSS entry tutorial )
There are many CSS attributes that can set the link style ( For example color, font-family, background, etc.).
The special thing about links is the ability to style them based on the state they are in.
Four states of links:
a:link - ordinary, unvisited link
a:visited - user Visited link
a:hover - the mouse pointer is above the link
a:active - the moment the link was clicked
Example
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
</body>
</html>When styling the different states of a link, follow these ordering rules:
a:hover must come after a:link and a:visited
a:active must be located after a:hover
The above is the detailed content of How to set link style with CSS. For more information, please follow other related articles on the PHP Chinese website!