css鏈接樣式
CSS樣式鏈接 (CSS Styling Links)
The links in CSS can be styled in various ways to make our website more presentable and attractive. The links can also be styled depending on their states e.g. visited, active, hover, etc.
CSS中的鏈接可以通過各種方式設置樣式,以使我們的網站更具外觀和吸引力。 也可以根據鏈接的狀態來設置鏈接的樣式,例如訪問 , 活動 , 懸停等。
The four links states are,
四個鏈接狀態為:
a:link: a normal, unvisited link
a:link :一個普通的,未訪問的鏈接
a:visited: a link that user has visited
a:visited :用戶訪問過的鏈接
a:hover: a link the moment user mouses over it
a:hover :用戶將鼠標懸停在其上時的鏈接
a:active: a link when it is clicked
a:active :單擊時的鏈接
There are various methods to style our links, some of them are listed below,
鏈接的樣式有多種方法,下面列出了其中的一些方法,
顏色 (Color)
The color of the links can be altered with whatever you decide to pick. As mentioned the links can be styled depending on their states.
鏈接的顏色可以根據您選擇的內容進行更改。 如前所述,可以根據鏈接的狀態來設置鏈接的樣式。
Syntax:
句法:
a:link{
color:red;
}
Example:
例:
<!DOCTYPE html>
<head>
<style>
a:link {
background-color: red;
color: white;
}
a:active {
background-color: black;
}
</style>
</head>
<html>
<body>
<a href="#">It's a link1</a>
<br/>
<a href="#">It's a link2</a>
<br/>
<a href="#">It's a link3</a>
<br/>
<a href="#">It's a link3</a>
<br/>
</body>
</html>
Output
輸出量
The above code sets white color to the link.
上面的代碼將白色設置為鏈接。
文字裝飾 (Text Decoration)
The text-decoration is the most commonly used property when it comes to styling links.
當涉及樣式鏈接時, 文本裝飾是最常用的屬性。
The text-decoration property is used to remove or set underlines on links. The possible values of text-decoration are: none, underline, overline, blink, line-through and inherit.
text-decoration屬性用于刪除或設置鏈接上的下劃線。 文本修飾的可能值為: none , 下劃線 ,上劃線 , 閃爍 , 直通和繼承 。
Syntax:
句法:
a:link{
text-decoration:none;
}
Example:
例:
<!DOCTYPE html>
<head>
<style>
a:link {
text-decoration: none;
}
a:hover {
text-decoration: overline;
}
</style>
</head>
<html>
<body>
<a href="#">It's a link1</a>
<br/>
<a href="#">It's a link2</a>
<br/>
<a href="#">It's a link3</a>
<br/>
<a href="#">It's a link3</a>
<br/>
</body>
</html>
Output
輸出量
The above code sets the decoration to the link and overline, when we hover on the link.
當我們將鼠標懸停在鏈接上時,上面的代碼將裝飾設置為鏈接和overline 。
背景顏色 (Background Color)
The background-color is yet another most commonly used property to set the background color of our links so that they appear flashy and once any visitor visits your site, they won’t be able to ignore that link.
background-color是設置鏈接背景色的另一個最常用的屬性,以使它們顯得浮華,一旦任何訪問者訪問您的站點,他們將無法忽略該鏈接。
Syntax:
句法:
a:link{
background-color:red;
}
Example:
例:
<!DOCTYPE html>
<head>
<style>
a:link {
background-color: red;
}
a:hover {
background-color: pink;
}
</style>
</head>
<html>
<body>
<a href="#">It's a link1</a><br/>
<a href="#">It's a link2</a><br/>
<a href="#">It's a link3</a><br/>
<a href="#">It's a link3</a><br/>
</body>
</html>
Output
輸出量
The above code sets the background-color to the link when we hover on the link.
當我們將鼠標懸停在鏈接上時,上面的代碼將背景色設置為鏈接。
翻譯自: https://www.includehelp.com/code-snippets/styling-links-in-css.aspx
css鏈接樣式