链接在网页上很常见，但许多网页设计师并没有意识到他们使用CSS来有效地操纵和管理链接。您可以定义已访问，悬停和活动状态的链接。您还可以使用边框和背景来为您的链接提供更多的贴图或使它们看起来像按钮甚至图像。
大多数网页设计师都是从定义一种风格开始的 一个 标签：
一个{颜色：红色; }
这将设置链接的所有方面（悬停，访问和活动）。要单独设置每个部分的样式，必须使用链接伪类。
链接伪类
您可以定义四种基本类型的链接伪类：
- ：link - 这是链接的默认样式
- ：已访问 - 点击链接后
- ：悬停 - 当鼠标悬停在链接上时（预先点击）
- ：active - 在单击链接时正确
要定义链接伪类，请将其与 一个 CSS选择器中的标记。因此，要将所有链接的访问颜色更改为灰色，请写入：
a：访问过的{颜色：灰色; }
如果你设置一个链接伪类，那么将它们设置为全部样式是个好主意。这样你就不会对无关的结果感到惊讶。因此，如果您只想将访问的颜色更改为灰色，而链接的所有其他伪属性都保持黑色，您可以写：
a：链接，a：悬停，a：主动{颜色：黑色; } a：visited {color：grey; }
更改链接颜色
样式链接最流行的方法是在鼠标悬停在其上时更改颜色：
a {color：＃00f; } a：hover {color：＃0f0; }
但是不要忘记，您可以通过以下命令影响链接的外观：active属性：
a {color：＃00f; } a：active {color：#f00; }
或者使用：visited属性访问它之后链接的外观如何：
a {color：＃00f; } a：visited {color：#f0f; }
把它们放在一起：
a {color：＃00f; } a：visited {color：#f0f; } a：hover {color：＃0f0; } a：active {color：#f00; }
将背景放在链接上以添加图标或项目符号
通过稍微播放背景，您可以创建具有关联图标的链接。选择一个小的图标，大约15像素x 15像素，除非你的文字更大。将背景放在链接的一侧，并将重复选项设置为不重复。然后，填充链接，使链接中的文本向左或向右移动足够远以查看图标。
a {padding：0 2px 1px 15px;背景：#fff url（ball.gif）左中心不重复;颜色：#c00; }
获得图标后，您可以将不同的图像设置为悬停，活动和访问的图标，以使链接发生变化：
a {padding：0 2px 1px 15px;背景：#fff url（ball.gif）左中心不重复;颜色：#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创建类似按钮的效果。
a {border：4px outset;填充：2px; text-decoration：none; } a：active {border：4px inset; }
请注意，当您在开头和插入样式上添加颜色时，浏览器不太可能像您期望的那样呈现它们。所以，这是一个带有彩色边框的更漂亮的按钮：
一个{border-style：solid; border-width：1px 4px 4px 1px; text-decoration：none;填充：4px; border-color：＃69f＃00f＃00f＃69f; }
您也可以影响按钮链接的悬停和活动样式，只需使用这些伪类：
a：link {border-style：solid; border-width：1px 4px 4px 1px; text-decoration：none;填充：4px; border-color：＃69f＃00f＃00f＃69f; } a：hover {border-color：#ccc; }
