CSS链接用法参考指南和示例 _CSS链接

链接是从一个网页到另一网页的连接。 CSS属性可用于以各种不同方式设置链接的样式。
【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>

输出如下：