如何在html联结css,CSS Links(链接)

CSS Links(链接)

链接或超链接是从一个Web资源页面连接到另一个Web资源页面。

CSS样式链接

链接有四种不同的状态- link, visited, active 和 hover。链接或超链接的这四个状态可以使用锚元素的伪类通过CSS属性设置不同的样式，具体取决于它们所处的状态。

这是与HTML 标记关联的CSS伪类，可用于为超链接的不同状态定义不同的样式。a：link —为没有鼠标指针的普通或未访问链接设置样式。

a：visited-设置用户访问过但没有鼠标指针的链接的样式。

a：hover —当用户将鼠标指针放在链接上时，设置链接的样式。

a：active-为正在单击的链接设置样式。

您可以指定你想CSS属性,例如：color，font-family，background等，以这些的选择重新定义链接的风格，就像你用普通的文本那样。

示例a:link {    /* 未被访问的链接   */

color: #FF0000;

text-decoration: none;

}

a:visited {    /* 被访问过的链接 */

color: #00FF00;

}

a:hover {    /* 鼠标移到链接上 */

color: #FF00FF;

text-decoration: underline;

}

a:active {    /* 正在点击的链接  */

color: #0000FF;

}测试看看‹/›

为多个链接状态设置样式的顺序很重要，因为最后定义的优先级高于先前的CSS代码。

注：伪类的顺序应该通常为：:link，:visited，:hover，:active，:focus

标准链接样式

在所有主流的Web浏览器中，如果未专门设置样式，则网页上的链接带有下划线，并使用浏览器的默认链接颜色。

例如，基于Gecko的Web浏览器(如Firefox)的默认链接颜色为- 蓝色表示未访问，紫色表示已访问，红色表示正在点击的链接。

设置链接的颜色

以下是演示如何设置链接颜色的示例。

示例a:link {    /* 未被访问的链接  */

color: #FF0000;

}

a:visited {    /*被访问过的链接 */

color: #00FF00;

}

a:hover {    /* 鼠标移到链接上 */

color: #FF00FF;

}

a:active {    /* 正在点击的链接 */

color: #0000FF;

}测试看看‹/›

从链接中删除默认下划线

text-decoration CSS属性一般用来从链接中删除默认的下划线。下面的示例演示，如何删除或设置text-decoration超链接的不同状态的属性。

示例a:link {    /* 未被访问的链接 */

color: #FF0000;

text-decoration: none;

}

a:visited {    /* 被访问过的链接 */

color: #00FF00;

text-decoration: none;

}

a:hover {    /* 鼠标移到链接上 */

color: #FF00FF;

text-decoration: underline;

}

a:active {    /* 正在点击的链接 */

color: #0000FF;

text-decoration: underline;

}测试看看‹/›