链接在网页上很常见，但许多网页设计师没有意识到他们用CSS来有效操纵和管理链接的能力。 您可以定义访问，悬停和活动状态的链接。 你也可以使用边框和背景来让你的链接更加美味，或者让它们看起来像按钮甚至图像。
大多数网页设计师首先在“a”标签上定义样式：
一个{color：red; }这将设计链接的所有方面 （悬停，访问和活动）。 要分别设置每个部件的样式，您必须使用链接伪类。
链接伪类
有四种可以定义的链接伪类的基本类型：
- ：链接 - 这是链接的默认样式
- ：访问 - 链接被点击后
- ：悬停 - 当鼠标悬停在链接上（预先点击）
- ：主动 - 正确点击链接
要定义链接伪类，请在CSS选择器中将其与标签一起使用。 因此，要将所有链接的访问颜色更改为灰色，请写下：
a：visited {color：gray; }如果你设计一个链接伪类，那么将它们全部设置为一个好主意。 这样你就不会被多余的结果感到惊讶。 所以如果你只是想将访问过的颜色改成灰色，而你的链接的所有其他伪属性都是黑色的，你可以这样写：
a：link，a：hover，a：active {color：black; } a：visited {color：gray; }更改链接颜色
设置链接样式最流行的方式是在鼠标悬停在其上时更改颜色：
一个{color：＃00f; } a：hover {color：＃0f0; }但不要忘记，您可以通过以下方式影响链接的外观：点击属性：
一个{color：＃00f; } a：active {color：＃f00; }或者在您使用：visited属性访问链接后该链接的外观如何：
一个{color：＃00f; } a：visited {color：＃f0f; }把它放在一起：
一个{color：＃00f; } a：visited {color：＃f0f; } a：hover {color：＃0f0; } a：active {color：＃f00; }在链接上添加背景以添加图标或项目符号
您可以在时尚背景文章中为链接添加背景，但通过稍微播放背景，您可以创建具有关联图标的链接。 选择一个很小的图标，大约15px x 15px，除非文字较大。 将背景放置在链接的一侧，并将重复选项设置为不重复。 然后，填充链接，以便将链接中的文本向左或向右移动足够远以查看图标。
{padding：0 2px 1px 15px; 背景：#fff url（ball.gif）left center no-repeat; 颜色：＃c00; }获得图标后，您可以将不同的图像设置为悬停，活动和访问图标，以便更改链接：
{padding：0 2px 1px 15px; 背景：#fff url（ball.gif）left center no-repeat; 颜色：＃c00; } a：hover {background：#fff url（ball2.gif）left center no-repeat; } a：active {background：#fff url（ball3.gif）left center no-repeat; }让你的链接看起来像按钮
按钮非常流行，但在CSS出现之前，您必须使用图像创建按钮，这会使您的页面加载时间更长。 幸运的是，有一种边框样式可以帮助您轻松地使用CSS创建类似按钮的效果。
一个{border：4px outset; padding：2px; 文字修饰：无; } a：active {border：4px inset; }请注意，当您将颜色置于一开始和插入样式中时，浏览器不太可能像您期望的那样呈现它们。 所以，这里有一个彩色边框的发烧友按钮：
{border-style：solid; border-width：1px 4px 4px 1px; 文字修饰：无; 填充：4px; 边框颜色：＃69f＃00f＃00f＃69f; }您也可以影响按钮链接的悬停和活动样式，只需使用这些伪类即可：
a：link {border-style：solid; border-width：1px 4px 4px 1px; 文字修饰：无; 填充：4px; 边框颜色：＃69f＃00f＃00f＃69f; } a：hover {border-color：#ccc; }