如何在HTML中更改链接的颜色?


链接是指从一个网页到另一个网页的连接。

我们可以在网页中添加页面链接。HTML链接是超链接。<a>标签定义了一个超链接,用于在一个页面之间建立链接。href属性与<a>标签一起使用,指示链接的目标。

要在HTML页面中创建页面链接,请使用<a></a>标签,并使用href属性定义链接。我们应该在<body>…</body>标签内使用<a>…</a>标签。

链接文本是可见的。点击链接文本将导航到指定的URL地址。

默认情况下,链接在浏览器网页上的显示如下。

  • 未访问的链接带下划线且为蓝色

  • 已访问的链接带下划线且为紫色

  • 活动的链接带下划线且为红色

语法

以下是创建网页链接的语法。

<a href="https://www.Google.com/"> text of the link </a>

我们可以使用样式表更改链接的颜色。

示例

以下是用CSS更改链接颜色的示例程序。

<!DOCTYPE html> <html> <head> <style> a:link { color: greenyellow; background-color: transparent; text-decoration: none; } a:visited { color: deepskyblue; background-color: transparent; text-decoration: none; } a:active { color: yellow; background-color: transparent; } </style> </head> <body> <a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" >HTML Tutorial</a> </body> </html>

我们已将未访问链接的颜色更改为绿黄色。

我们已将已访问链接的颜色更改为深空蓝,活动链接的颜色更改为黄色。

示例

以下是另一个使用CSS更改链接颜色的示例程序。

<!DOCTYPE html> <html> <head> <title>HTML Link Color</title> </head> <body> <h2>About</h2> <p> Our <a href="/about/about_team.htm" style="color: red">Team</a> comprises of programmers, writers, and analysts. </p> </body> </html>

示例

以下是用CSS更改链接颜色的另一个示例程序。

<!DOCTYPE html> <html> <head> <title>How to link pages using absolute URL in HTML?</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> <h2>Click the link below to redirect to facebook login page</h2> <a href="https://#/login/">facebook login</a> </body> </html>

悬停在链接上后,它将更改样式。

更新于:2023年9月6日

39K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.