我们可以使用CSS属性和CSS选择器设置HTML链接(a元素)的样式。 HTML链接可以是文本链接，图像链接或者块链接(HTML块)。这是三个HTML链接示例：

<a href="/next-page.html">Text link</a>

<a href="/next-page.html"><img src="next.png"></a>

<a href="/next-page.html">
    <div>
        <img src="next.png">
        Next page
    </div>
</a>

第一个a元素是文本链接，因为a元素主体仅包含文本。

第二个a元素是一个图像链接，因为a元素主体仅包含一个img元素。

第三个a元素是一个块链接，因为a元素主体包含HTML块。浏览器并不总是支持块链接，但是在编写本文时，它们可在大多数浏览器(如果不是全部)中使用。

样式文字链接

可以使用所有CSS文本样式属性来样式化文本链接。这意味着我们可以设置文本链接的"字体系列"，"字体大小"，"字体粗细"，"颜色"，"文本装饰"等。这是一个文本链接CSS样式示例：

<style>
    a {
        font-family: Helvetica;
        font-size:   1em;
        font-weight: bold;
        color      : #000099;
        text-decoration: none;
    }
</style>

这个示例CSS规则将font-family设置为Helvetica，将font-size设置为1em，将font-weight设置为bold，将color设置为#000099(深蓝色)，并删除所有a元素的默认下划线。

这是应用了这些样式的文本链接的外观：

文字连结

样式图像链接

当链接中包含图片时，我们可以设置a元素或者img元素的样式。可以使用任何标准图像样式CSS属性对图像进行样式设置。

样式块链接

当我们设置块链接的样式时，通常会在a元素内而不是a元素本身内对HTML进行样式设置。

a：link，a：visited，a：hover，a：active

a:link    { color: #00ff00; }
a:visited { color: #009900; }
a:hover   { color: #66ff66; }
a:active  { color: #ffff00; }

将链接样式化为按钮

我们可以设置链接样式，使其看起来像一个按钮。我们可以通过设置"边界"，"背景颜色"，"颜色"和"填充" CSS属性以及文本属性来实现此目的。这是一个例子：

a.greenButton {
    border: 2px solid #006600;
    background-color: #009900;
    color: #ffffff;
    text-decoration: none;
    margin : 20px;
    padding: 10px 20px 10px 20px;
    display: inline-block;
}
a.greenButton:hover {
    border: 2px solid #009900;
    background-color: #00cc00;
}

这是应用了这些样式的文本链接的外观：

链接按钮

请注意，将鼠标悬停在按钮上方时，按钮的颜色会如何变化。

我们还可以使用border-radiusCSS属性使角落变圆。这是一个代码示例：

a.greenButtonRound {
    border: 2px solid #006600;
    border-radius: 5px;
    background-color: #009900;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    margin : 20px;
    padding: 10px 20px 10px 20px;
    display: inline-block;
}
a.greenButtonRound:hover {
    border: 2px solid #009900;
    background-color: #00cc00;
}

这是带有圆角(和粗体文本)的按钮的外观：

链接按钮