CSS取消超链接样式|极客教程

CSS取消超链接样式

在网页设计中，超链接是非常常见的元素，它可以让用户点击跳转到其他页面或者执行特定的操作。通常超链接会有默认的样式，比如蓝色的文字带有下划线。但有时候我们希望取消超链接的默认样式，让它看起来像普通的文本。本文将介绍如何使用CSS来取消超链接的样式。

1. 使用text-decoration属性取消下划线

在CSS中，我们可以使用text-decoration属性来控制文本的装饰效果，包括下划线。要取消超链接的下划线，我们可以将text-decoration属性设置为none。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cancel Link Style</title>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，我们使用CSS将超链接的下划线样式取消了，点击链接后不会出现下划线。

2. 使用color属性修改链接颜色

除了取消下划线，有时候我们还希望修改超链接的颜色，让它与普通文本有所区别。我们可以使用color属性来设置超链接的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Link Color</title>
<style>
a {
  text-decoration: none;
  color: red;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，我们将超链接的颜色设置为红色，点击链接后文字会变成红色。

3. 使用:hover伪类修改链接样式

在鼠标悬停在超链接上时，我们可以通过:hover伪类来修改链接的样式，比如改变颜色或者添加下划线。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Link Style</title>
<style>
a {
  text-decoration: none;
  color: blue;
}
a:hover {
  text-decoration: underline;
  color: green;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，当鼠标悬停在链接上时，文字会变成绿色并且出现下划线。

4. 使用:focus伪类修改链接样式

类似于:hover伪类，:focus伪类可以在链接获得焦点时修改样式。这在键盘导航时非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus Link Style</title>
<style>
a {
  text-decoration: none;
  color: blue;
}
a:focus {
  text-decoration: underline;
  color: orange;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，当链接获得焦点时，文字会变成橙色并且出现下划线。

5. 使用:visited伪类修改访问过的链接样式

:visited伪类可以用来修改用户已经访问过的链接的样式，这样用户可以清楚地知道自己访问过哪些链接。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Visited Link Style</title>
<style>
a {
  text-decoration: none;
  color: blue;
}
a:visited {
  text-decoration: underline;
  color: purple;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，当用户访问过链接后，文字会变成紫色并且出现下划线。

6. 使用!important关键字覆盖默认样式

有时候网页的默认样式可能会覆盖我们设置的样式，这时可以使用!important关键字来强制覆盖默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Override Default Style</title>
<style>
a {
  text-decoration: none !important;
  color: red !important;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，我们使用!important关键字来强制取消下划线并将颜色设置为红色。

7. 使用display属性修改链接显示方式

除了修改颜色和下划线，我们还可以使用display属性来改变链接的显示方式，比如将链接显示为块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Link as Block</title>
<style>
a {
  text-decoration: none;
  color: blue;
  display: block;
  margin-bottom: 10px;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，我们将链接显示为块级元素，并且添加了一些间距。

8. 使用background属性添加背景色

除了修改文字样式，我们还可以使用background属性来添加背景色，让链接看起来更加突出。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Color for Link</title>
<style>
a {
  text-decoration: none;
  color: white;
  background: blue;
  padding: 5px 10px;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，我们为链接添加了蓝色的背景色和白色的文字颜色。

9. 使用border属性添加边框

如果希望链接看起来更加突出，我们可以使用border属性来添加边框。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  border: 1px solid blue;
  padding: 5px 10px;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

Output:

CSS取消超链接样式

在上面的示例中，我们为链接添加了蓝色的边框。

10. 使用text-transform属性修改文本大小写

有时候我们希望链接的文本大小写发生变化，可以使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Transform for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  text-transform: uppercase;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，我们将链接的文本转换为大写字母显示。

11. 使用font-weight属性修改文本粗细

如果希望链接的文本粗细发生变化，可以使用font-weight属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Weight for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  font-weight: bold;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，我们将链接的文本设置为粗体显示。

12. 使用text-align属性修改文本对齐方式

如果希望链接的文本对齐方式发生变化，可以使用text-align属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Align for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  text-align: center;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，我们将链接的文本居中对齐显示。

13. 使用line-height属性修改行高

如果希望链接的行高发生变化，可以使用line-height属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Height for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  line-height: 2;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，我们将链接的行高设置为原来的两倍。

14. 使用text-shadow属性添加文本阴影

如果希望链接的文本添加阴影效果，可以使用text-shadow属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadow for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，我们为链接的文本添加了阴影效果。

15. 使用text-overflow属性截断文本

如果链接的文本过长，可以使用text-overflow属性来截断文本并显示省略号。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs Geek Docs Geek Docs</a>
</body>
</html>

在上面的示例中，我们将链接的文本截断并显示省略号。

16. 使用cursor属性修改鼠标样式

如果希望链接在鼠标悬停时显示不同的鼠标样式，可以使用cursor属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cursor for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，当鼠标悬停在链接上时，鼠标会变成手型。

17. 使用transition属性添加过渡效果

如果希望链接在状态变化时有平滑的过渡效果，可以使用transition属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  transition: color 0.3s;
}
a:hover {
  color: red;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，当鼠标悬停在链接上时，颜色会有0.3秒的过渡效果。

18. 使用transform属性添加变换效果

如果希望链接在状态变化时有变换效果，可以使用transform属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  transition: transform 0.3s;
}
a:hover {
  transform: scale(1.2);
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，当鼠标悬停在链接上时，链接会放大1.2倍。

19. 使用opacity属性修改透明度

如果希望链接在状态变化时有透明度变化，可以使用opacity属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.5;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，当鼠标悬停在链接上时，链接的透明度会变为0.5。

20. 使用outline属性添加轮廓效果

如果希望链接在获得焦点时有轮廓效果，可以使用outline属性来设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outline for Link</title>
<style>
a {
  text-decoration: none;
  color: blue;
}
a:focus {
  outline: 2px solid red;
}
</style>
</head>
<body>
<a href="https://geek-docs.com">Geek Docs</a>
</body>
</html>

在上面的示例中，当链接获得焦点时，会出现红色的轮廓效果。