链接是从一个网页到另一网页的连接。 CSS属性可用于以各种不同方式设置链接的样式。
链接状态：
在讨论CSS属性之前, 了解链接的状态很重要。链接可以以不同的状态存在, 并且可以使用伪类对它们进行样式设置。
下面给出了四种链接状态：
- 一条链接=>这是一个普通的, 未访问的链接。
- 答：已访问=>这是用户至少访问过一次的链接
- 悬停=>这是鼠标悬停在其上时的链接
- a：活跃=>这是一个单击的链接。
语法如下：
a:link {
color:color_name;
}color_name可以以任何格式指定, 例如颜色名称(绿色), 十六进制值(＃5570f0)或RGB值rgb(25, 255, 2)。还有一种状态" a：focus", 当用户使用Tab键浏览链接时, 该状态用于聚焦。
链接的默认值：
- 默认情况下, 创建的链接带有下划线。
- 当鼠标悬停在链接上方时, 它将变为手形图标。
- 正常/未访问的链接为蓝色。
- 访问过的链接显示为紫色。
- 活动链接显示为红色。
- 当一个链接集中时, 它周围有一个轮廓。
例子
<!DOCTYPE html>
<html>
<head>
<title>CSS links</title>
<style>
p {
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<p><a href = "https://www.lsbin.org/">lsbin Simple Link</a></p>
</body>
</html>输出如下：
链接的CSS属性：链接的一些基本CSS属性如下所示：
- 颜色
- 字体系列
- 文字装饰
- 背景颜色
颜色：
此CSS属性用于更改链接文本的颜色。
语法如下：
a {
color: color_name;
}例子：
<!DOCTYPE html>
<html>
<head>
<title>Link color property</title>
<style>
p {
font-size: 20px;
text-align:center;
}
/*unvisited link will appear green*/
a:link{
color:red;
}
/*visited link will appear blue*/
a:visited{
color:blue;
}
/*when mouse hovers over link it will appear orange*/
a:hover{
color:orange;
}
/*when the link is clicked, it will appear black*/
a:active{
color:black;
}
</style>
</head>
<body>
<p><a href = "https://www.lsbin.org/">lsbin</a>
This link will change colours with different states.</p>
</body>
</html>输出如下：
字体系列：
此属性用于使用font-family属性更改链接的字体类型。
语法如下：
a {
font-family: "family name";
}例子：
<!DOCTYPE html>
<html>
<head>
<style>
/*Inintial link font family arial*/
a {
font-family:Arial;
}
p {
font-size: 30px;
text-align:center;
}
/*unvisited link font family*/
a:link{
color:Arial;
}
/*visited link font family*/
a:visited{
font-family:Arial;
}
/*when mouse hovers over it will change to times new roman*/
a:hover{
font-family:Times new roman;
}
/*when the link is clicked, it will changed to Comic sans ms*/
a:active{
font-family:Comic Sans MS;
}
</style>
</head>
<body>
<p><a href = "https://www.lsbin.org/"
id = "link">lsbin</a> a Computer Science
Portal for Geeks.</p>
</body>
</html>输出如下：
文字装饰：
此属性基本上用于从链接删除/向链接添加下划线。
语法如下：
a {
text-decoration: none;
}例子：
<!DOCTYPE html>
<html>
<head>
<title>Text decoration in link</title>
<style>
/*Set the font size for better visibility*/
p {
font-size: 2rem;
}
/*Removing underline using text-decoration*/
a{
text-decoration: none;
}
/*underline can be added using
text-decoration:underline;
*/
</style>
</head>
<body>
<p><a href = "https://www.lsbin.org/" id = "link">lsbin</a> a Computer Science
Portal for Geeks.</p>
</body>
</html>输出如下：
背景颜色：
此属性用于设置链接的背景颜色。
语法如下：
a {
background-color: color_name;
}例子：
<!DOCTYPE html>
<html>
<head>
<title>background color</title>
<style>
/*Setting font size for better visibility*/
p{
font-size: 2rem;
}
/*Designing unvisited link button*/
a:link{
background-color: powderblue;
color:green;
padding:5px 5px;
text-decoration: none;
display: inline-block;
}
/*Designing link button when mouse cursor hovers over it*/
a:hover{
background-color: green;
color:white;
padding:5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p><a href = "https://www.lsbin.org/" id = "link">
lsbin</a> a Computer Science Portal for Geeks.</p>
</body>
</html>输出如下：
CSS链接按钮：
CSS链接也可以使用按钮/框设置样式。以下示例显示了如何将CSS链接设计为按钮。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Link button</title>
<style>
/*Setting font size for better visibility*/
p{
font-size: 2rem;
}
a {
background-color: green;
color:white;
padding:5px 5px;
border-radius:5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p><a href = "https://www.lsbin.org/" id = "link">
lsbin</a> a Computer Science Portal for Geeks.</p>
</body>
</html>输出如下：
