链接是从一个网页到另一个网页的连接,CSS可通过不同属性以各种不同方式来设置链接的样式。
一、链接样式
链接是网站的重要组成部分,几乎在每个网页上都能看到不少的链接,合理的设计链接的样式能够给网页的颜值加分。链接有四种不同的状态,分别是 link、visited、active 和 hover,可以通过以下伪类选择器来为链接的四种状态设置不同的样式:
(1)a:link =>这是一个正常的,未访问过的链接。
(2)a:visited =>这是用户至少访问过一次的链接
(3)a:hover =>当鼠标悬停在它上面时,这是一个链接
(4)a:active =>这是一个刚刚点击的链接。
语法:
a:link { color:color_name; }
color_name可以采用任何格式,如颜色名称(green)、十六进制值(#5570f0)或RGB值-rgb(25, 255, 2)。还有另一个状态“a:focus”,用于在用户使用Tab键浏览链接时进行聚焦。
链接的默认值:
(1)默认情况下,创建的链接带有下划线。
(2)当鼠标悬停在链接上方时,它会变为手形图标。
(3)正常/未访问的链接为蓝色。
(4)访问过的链接有紫色。
(5)活动链接为红色。
(6)链接聚焦时,它周围有一个轮廓。
例如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS links</title> <style> p { font-size: 25px; text-align: center; } </style> </head> <body> <p><a href="https://www.dotcpp.com/">简单链接</a></p> </body> </html>
展示的结果如图:
二、CSS如何设置链接的样式?
下面是链接的一些基本CSS属性:
(1)color属性
此CSS属性用于更改链接文本的颜色。
语法:
a { color: color_name; }
(2)font-family属性
此属性用于使用font-family属性更改链接的字体类型。
语法:
a { font-family: "family name"; }
(3)text-decoration属性
此属性主要用于向链接删除或添加下划线等修饰。
语法:
a { text-decoration: none; }
举例:
<style> /*设置字体大小以提高可见性*/ p { font-size: 2rem; } /*使用text-decoration属性删除下划线*/ a{ text-decoration: none; } /*也可以使用以下样式,添加下划线 text-decoration:underline; */ </style>
(4)background-color属性
此属性用于设置链接的背景颜色。
语法:
a { background-color: color_name; }
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程