外部方法
使用外部样式表，我们可以控制站点的所有超链接。
使用外部样式表，可以创建许多有吸引力的超链接效果来开发我们的外观。
使用外部方法，我们可以将网页链接到一个外部 .css 文件，该文件可以由我们设备中的任何文本编辑器创建。
这是一种更有效的方法，尤其是当我们需要设计大型的样式时。
我们可以通过编辑一个 .css 文件一次更改整个站点。
内联方法
直接在超链接代码中添加style属性，通过style属性指定颜色属性，然后给它一个颜色值。
使用内联方法更改链接颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<p>访问 <a href="https://www.onitroad.com/" style="color: #8ebf42">onitroad</a>.</p>
</body>
</html>
如何更改超链接下划线和锚文本的颜色
要更改下划线颜色，首先需要将 text-decoration 属性的“none”值去掉，并设置“none”值，然后添加带宽度的 border-bottom 属性（在这种情况下，用作超链接下划线宽度）和边框样式（实线、点线或者虚线）属性。
对于锚文本颜色，请使用 color 属性。
更改超链接下划线和锚文本颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
text-decoration: none;
}
a:link {
color: #000;
border-bottom: 1px solid #ff0000;
}
a:visited {
color: #e600e6;
border-bottom: 1px solid #b3b3b3;
}
a:hover {
color: #2d8653;
border-bottom: 1px solid #000099;
}
</style>
</head>
<body>
<p>访问
<a href="https://www.onitroad.com/">onitroad</a>.
</p>
</body>
</html>
使用上述方法的样式链接示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a.one:link {
color: #ccc;
}
a.one:visited {
color: #095484;
}
a.one:hover {
color: #8ebf42;
}
a.two:link {
color: #ccc;
}
a.two:visited {
color: #095484;
}
a.two:hover {
font-size: 150%;
}
a.three:link {
color: #ccc;
}
a.three:visited {
color: #095484;
}
a.three:hover {
background: #8ebf42;
}
a.four:link {
color: #ccc;
}
a.four:visited {
color: #095484;
}
a.four:hover {
font-family: monospace;
}
a.five:link {
color: #095484;
text-decoration: none;
}
a.five:visited {
color: #095484;
text-decoration: none;
}
a.five:hover {
text-decoration: overline underline;
}
</style>
</head>
<body>
<p>把鼠标放到链接上，查看它们的变化</p>
<p>
<a class="one" href="#">This link changes color</a>
</p>
<p>
<a class="two" href="#">This link changes font-size</a>
</p>
<p>
<a class="three" href="#">This link changes background-color</a>
</p>
<p>
<a class="four" href="#">This link changes font-family</a>
</p>
<p>
<a class="five" href="#">This link changes text-decoration</a>
</p>
</body>
</html>
现在，我们将演示另一个示例，其中我们使用带有“继承”值的颜色属性。
这将使元素采用其父元素的颜色。
使用 color 属性的“继承”值更改链接颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
color: green;
}
p a {
color: inherit;
}
</style>
</head>
<body>
<h1>Example</h1>
<a href="https://www.onitroad.com/">onitroad.com</a>
<p>访问
<a href="https://www.onitroad.com/">onitroad.com</a> onitroad.
</p>
</body>
</html>
使用 CSS text-decoration-color 属性的样式链接示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
text-decoration-color: grey;
}
a:link {
color: #777777;
}
a:hover {
color: #2d8653;
}
</style>
</head>
<body>
<p>访问<a href="https://www.onitroad.com/">onitroad</a>.</p>
</body>
</html>
内部方法
内部方法要求我们在 HTML 文档的 <head> 部分中使用 <style> 标记。
在 <style> 标签中，我们设置链接的颜色。
使用内部方法更改链接颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
color: #8ebf42;
}
</style>
</head>
<body>
<p>访问
<a href="https://www.onitroad.com/">onitroad</a>.
</p>
</body>
</html>
有 4 种链接状态，可以根据链接的状态设置链接样式：
- a:link - 一个正常的、未访问的链接，
- a:visited - 用户访问过的链接，
- a:hover - 用户将鼠标悬停在其上时的链接，
- a:active - 单击链接的那一刻。
为多个链接状态设置样式时，请遵循以下规则：
- a:hover 必须在 a:link 和 a:visited 之后，
- a:active 必须在 a:hover 之后。
使用不同链接状态的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
/* unvisited link */
a:link {
color: #ccc;
}
/* visited link */
a:visited {
color: #095484;
}
/* mouse over link */
a:hover {
color: #8ebf42;
}
/* selected link */
a:active {
color: #800000;
}
</style>
</head>
<body>
<p>访问
<a href="https://www.onitroad.com/">onitroad</a>.
</p>
</body>
</html>
我们可以使用 CSS 属性设置不同的链接样式。
通常，用于设置链接样式的属性是颜色、字体系列和背景颜色。
更改链接颜色的方式有三种：内联、内部和外部。
日期：2020-06-02 22:14:59 来源：oir作者：oir