Styling HyperLinks

最新推荐文章于 2025-12-24 20:22:46 发布

转载最新推荐文章于 2025-12-24 20:22:46 发布 · 497 阅读

文章标签：

#user #css #go

CSS 专栏收录该内容

27 篇文章

订阅专栏

本文深入探讨了使用CSS为链接定制样式的方法，包括不同状态下的样式变化，并提供了实例演示如何实现鼠标悬停、已访问、默认及选中状态的自定义效果。同时介绍了文本装饰、背景颜色等其他常用样式设置。

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Special for links are that they can be styled differently depending on what state they are in.

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Example

a:link {color:#FF0000;}      /* unvisited link */
 a:visited {color:#00FF00;}  /* visited link */
 a:hover {color:#FF00FF;}  /* mouse over link */
 a:active {color:#0000FF;}  /* selected link */

Try it yourself »

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Common Link Styles

In the example above the link changes color depending on what state it is in.

Lets go through some of the other common ways to style links:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
 a:hover {text-decoration:underline;}
 a:active {text-decoration:underline;}

Try it yourself »

Background Color

The background-color property specifies the background color for links:

Example

a:link {background-color:#B2FF99;}
 a:visited {background-color:#FFFF85;}
 a:hover {background-color:#FF704D;}
 a:active {background-color:#FF704D;}

Try it yourself »