CSS Links
CSS Links （CSS链接）
In this chapter, we will explain how we can give styles to links, how to make links more beautiful. （在本章中，我们将解释如何为链接赋予样式，如何使链接更美观。）
The link has these four states:
a :link - a normal, unvisited link
a :visited - a link that the user has already visited
a :hover - a link when the user hovers over it
a :active - a link at the moment when it is clicked
We will speak about these properties:
text-decoration （文本装饰）
color （ 颜色 ）
background-color （背景-颜色）
Text Decoration
Text Decoration （文本装饰）
As you remember when we create a link, by default it is underlined. When we want to remove it we must use text-decoration property. （如您所知，当我们创建链接时，默认情况下会给链接加下划线。当我们想要删除它时，我们必须使用text-decoration属性。）
Example of using the text-decoration property to style a link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> This is some link.</a>
</body>
</html>
Let’s explain the meaning of our code.
Here you can see that our link in its first and second state will be without underline. The link is underlined when the user mouses over it and when a link is clicked in the moment. （在这里，您可以看到我们的链接处于第一和第二状态，没有下划线。当用户将鼠标悬停在链接上并点击链接时，该链接会加下划线。）
You can check it in your browsers with your editors or with our online editor click here and go to the page of the editor. （您可以通过编辑器或我们的在线编辑器在浏览器中查看，点击此处并转到编辑器的页面。）
These styles can be written in either the <head> section or in CSS file that you will use for your webpage.
Color
Color （颜色）
The color property we use for the color of the link. （我们用于链接颜色的颜色属性。）
For example when we want our link to be black and to be #1c87c9 in its 3rd state (a: hover) we need to write the following:
Example of using the color property to style a link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>
Result
Background Color
Background Color （背景颜色）
What can we do if we want our link to be with a background? （如果我们希望链接带有背景，我们该怎么办？）
We just need to give a style with background-color property. （我们只需要提供一个带有背景颜色属性的样式。）
For example, our link will be with a gray background, and in the hover, it will be #1c87c9.
When the first (a:link) and the second (a:visited) states have the same background color we can write just a.
Example of using the background-color property to style a link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>
You can choose your preferable color with the Color Picker. （您可以使用颜色选取器选择您喜欢的颜色。）