上查看所有课程
链接是连接不同网页的可点击元素。例如，
默认链接 样式链接
上面的例子显示了默认链接和带 CSS 样式的链接。
创建链接
链接是使用 <a> 元素创建的。例如，
<a href="#">Default Link</a>浏览器输出
默认链接
上面的例子显示了没有样式就不好看的默认链接。
注意：默认情况下，链接是 蓝色 文本并带下划线。点击或处于活动状态时，链接颜色变为 红色，已访问的链接文本为 紫色。
CSS text-decoration 属性
text-decoration 属性用于删除链接的默认下划线。例如，
a {
text-decoration: none;
}浏览器输出
text-decoration: none
默认链接在这里，text-decoration 属性移除了链接的默认下划线。
注意：text-decoration 属性接受 none、underline、overline、line-through 和 blink 等值来控制各种文本装饰样式或删除它们。
样式链接
我们可以使用不同的 CSS 属性来设置链接的样式。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS link styling</title>
</head>
<body>
<a href="#">Click here</a>
</body>
</html>a {
text-decoration: none;
padding: 10px 20px;
border-radius: 8px;
font-family: Monospace;
text-align: center;
color: white;
background-color: purple;
}浏览器输出
点击这里
在上面的例子中：
text-decoration: none移除了链接的下划线padding: 10px 30px为链接添加了内边距-
border-radius: 8px。将链接边框圆角化8px -
font-family: Monospace定义了按钮文本的字体系列 text-align: center将文本居中对齐color: white将文本颜色设置为白色-
background-color: blue为链接背景添加了紫色颜色
样式链接状态
可以使用以下伪类根据链接的状态对其进行不同的样式设置。
:link：默认且未访问的链接:visited：用户已访问的链接:hover：鼠标悬停在上面的链接:focus：当前获得焦点的链接:active：刚被点击的链接
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Link States</title>
</head>
<body>
<p>Link having default state styles.</p>
<a href="#">Default Link State</a>
<p>Link having updated state styles.</p>
<a href="#" class="new">Styled Link State</a>
</body>
</html>/* styles the default link*/
a.new:link {
color: green;
}
/* styles the unvisited link */
a.new:visited {
color: green;
}
/* styles the link on being hovered */
a.new:hover {
color: blue;
}
/* styles the link while clicked */
a.new:active {
color: red;
}浏览器输出
具有默认状态样式的链接。
默认链接状态具有更新状态样式的链接。
样式链接状态在上面的例子中：
a:link未访问的链接为绿色a:hover鼠标悬停时链接为蓝色a:visited已访问的链接为绿色a:active点击时链接为红色
注意：链接状态必须遵循此特定顺序 :link、:visited、:focus、:hover 和 :active，以获得正确的 CSS 样式。
将链接样式化为按钮
链接也可以样式化为按钮。例如，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Links as Button</title>
</head>
<body>
<a class="first-link" href="#">Submit</a>
<a class="second-link" href="#">Delete</a>
</body>
</html>a {
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
padding: 10px;
margin-left: 10px;
margin: 20px;
text-align: center;
cursor: pointer;
}
a.first-link {
background-color: green;
}
a.second-link {
background-color: red;
}
a.first-link:hover {
background-color: blue;
}
a.second-link:hover {
background-color: purple;
}
a:active {
color: rgba(255, 255, 255, 0.4);
}浏览器输出
提交 删除
上面的例子显示了像按钮一样的链接。
将图片样式化为链接
我们可以将图片样式化为链接。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Image Link</title>
<body>
<p>Menu Items</p>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Soup</li>
</ul>
<p>
Read our full menu here: <br>
<a href="#"><img src="https://cdn-icons-png.flaticon.com/512/4813/4813075.png" alt=""></a>
</p>
</body>
</html>img {
max-width: 80px;
border: 2px solid;
background-color: aliceblue;
}
a:hover {
color: blue;
}浏览器输出
将图片样式化为链接
菜单项
- 茶
- 咖啡
- 汤
在此处阅读我们的完整菜单
通过这种方式，我们可以将图片样式化为链接。
cursor 属性
cursor 属性用于在我们的链接中添加不同的光标，例如 pointer、help、wait 等。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Cursors</title>
</head>
<body>
<p>You can have additional information from <a href="#">here</a>.</p>
</body>
</html>a:hover {
cursor: help;
}浏览器输出
您可以在此处找到更多信息。
通过这种方式，我们可以在鼠标悬停在链接上时更改链接的光标。
创建导航栏
让我们使用不同的链接属性来创建导航栏，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Navigation</title>
</head>
<body>
<h2>Navigation Bar</h2>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>/* common styles for all links */
a {
font-size: 18px;
text-decoration: none;
padding: 8px 12px;
margin-right: 12px;
border: 1px solid black;
border-radius: 5px;
transition: all 0.3s ease;
background-color: purple;
color: white;
}
/* styles links while mouse is hovered over */
a:hover {
background-color: orange;
}
/* styles links while being clicked */
a:active {
color: blue;
}浏览器输出