CSS（十一）——用CSS设置超链接样式

最新推荐文章于 2024-04-19 12:52:58 发布
最新推荐文章于 2024-04-19 12:52:58 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： ● Web前端基础篇 Web前端基础 文章标签： CSS 设置超链接样式 按钮式超链接
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37084904/article/details/88554486
版权

目录

1.使用CSS伪类别来设置超链接样式

1.1普通的、未被访问的链接

1.2用户已访问的链接

1.3鼠标指针位于链接的上方

2.创建按钮式超链接

 2.1设置三个超链接（默认格式）

2.2设置超链接的边距和字体格式

2.3设置类似于按钮格式的超链接

2.4设置点击按钮后的动态效果

1.使用CSS伪类别来设置超链接样式

链接的四种状态： 

a:link：普通的、未被访问的链接

a:visited：用户已访问的链接

a:hover：鼠标指针位于链接的上方

a:active：链接被点击的时刻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="www.baidu.com">百度</a>
</body>
</html>

运行结果：

默认效果是蓝色，且带有下划线；

 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
程序员的时光
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
css设置超链接样式和css设置列表样式
qq_40135955的博客
04-09 2万+
<style type="text/css"> a:LINK { color: red; text-decoration: none; } a:VISITED { color: green; text-decoration: none; } a:HOVE...
CSS层叠样式表—CSS超链接样式
qq_36893834的博客
07-31 282
在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。语法： 说明：注意：如果在使用的时候没有展示未访问时的样式，这时候我们去清空我们的浏览器历史记录就可以实现效果了。 深入了解：hover hover应用在其他标签上的效果。语法： 举例：“:hover”用于div 举例：:hover用于img 鼠标样式 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor在CSS中，我们可以使用cursor属性来定义鼠标样式。语法：
CSS入门：link链接样式和4种状态的详解
最新发布
u013179804的博客
04-19 1569
我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。访问后的样式：当鼠标点击过过链接时，是紫色。那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色。
超详细的css超链接总结
qq_45973003的博客
07-15 1164
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在html中的超链接讲解</title> </head> <style> @import url("style.css"); </style> <body> <!-- 作者：tao 时间：2020-07-
CSS中的超链接和超链接分类
Keep_Trying_Go的博客
11-23 1550
超链接标签： <a>标签用于定义超链接，作用是从一个页面链接到另一个页面。 语法格式 ： <a href="跳转目标" target="目标窗口的弹出方式" >文本或图像</a> a-anchor(锚) 属性的作用： href:用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。 target:用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式； 超链接分类： 外部链接：如： <a hr
css如何设置超链接样式
学习也休闲
11-22 9744
css设置超链接样式是通过伪类来实现的   (1) :link：设置a对象在未被访问前的样式表属性。 (2) :visited：设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover：设置对象在其鼠标悬停时的样式表属性。 (4) :active：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。     css中关于超链接的四个属性正确顺序为：
HTML基础知识——设置超链接的样式简单实例
09-28
本篇将详细介绍如何设置HTML超链接的样式，并提供一个简单的实例。...希望这个实例能对你理解HTML超链接样式有所帮助，更多关于HTML和CSS的学习资源可在网络上找到，持续学习和实践是提高技能的关键。
Css——超链接样式
09-05
这里我们将深入探讨CSS中的超链接样式及其四个关键状态。 1. `a:link` - 链接平常的状态 当用户尚未点击链接时，`a:link`用于定义超链接的初始样式。这通常包括颜色、文字装饰（如下划线）和字体大小等。例如，...
CSS之列表样式与链接样式——每天一遍小知识
01-08
列表样式类型——list-style-type1.介绍2. 列表图像和位置—— List Image and Position3.列表样式（快速标记）——list-style二.样式表——Styling the Tables1.表属性——Tables Properties2.标题设置——caption-...
期末作业_我的家乡-湛江——html和css.zip
03-09
综上所述，这个"期末作业_我的家乡-湛江——html和css.zip"项目涵盖了HTML的基本元素使用、CSS的样式控制、布局设计以及响应式网页开发等前端开发核心知识。通过这个项目，学生可以锻炼其在实际场景中应用理论知识的...
CSS——Web静态页面开发
08-15
在Web开发领域，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页内容和样式的基石。本教程将针对HTML初学者，详细介绍如何使用HTML进行静态页面开发，并结合CSS来实现丰富的视觉效果。...
css_各种超级链接样式
09-27
css_各种超级链接样式css_各种超级链接样式
css控制超链接(css超链接样式)
09-25
主要介绍了css控制超链接的方法，也就是css超链接的样式，如给超链接a加上背景图片、给链接加上边框，,需要的朋友可以参考下
css 链接样式.
07-26
css 链接样式
CSS,链接样式大全
08-07
css链接样式 字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体： (font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性： (background) 色彩 {background-color: #FFFFFF;} 图片 {background-image: url();}
CSS-设置超链接样式
cc098818的博客
08-13 1650
1、使用 CSS 伪类别来设置超链接样式 链接的四种状态： a:link：普通的、未被访问的链接 a:visited：用户已访问的链接 a:hover：鼠标指针位于链接的上方 a:active：链接被点击的时刻 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用C...
CSS之设置超链接样式以及设置鼠标形状
热门推荐
qq_42992919的博客
08-06 1万+
超链接在任意一个网页上都是最基本的元素之一，通过超链接可以实现页面的跳转、功能的激活等，我们来学习如何使用CSS设置超链接的样式 定义超链接是使用**标签，用于从一个页面链接到另一个页面， 元素最重要的属性是 href 属性，它指示链接的目标。** 在所有浏览器中链接都是默认带有下划线，未被访问的链接带有下划线而且是蓝色的，已被访问的链接带有下划线而且是紫色的，活动链接带有下划线而且是红色的，我们...
CSS设置超链接样式常用
NeiHan2020的博客
12-16 1093
伪类名称 含义 示例 a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;} a:visited 单击访问后超链接样式 a:visited{color:#333;} a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#...
<a></a>链接的css样式
一个很酷的人
08-02 3851
style type="text/css"> a:link {text-decoration:none;color:blue;} a:hover {text-decoration:underline;color:red;} a:active{text-decoration:none;color:yellow;} a:visited {text
用CSS设置超链接使用新窗口打开的方法
05-28
可以使用CSS的伪类选择器`:hover`和属性选择器`[attribute=value]`来实现超链接在新窗口打开的效果，具体方法如下： ```css a[target="_blank"]:hover { cursor: pointer; } a[target="_blank"]::after { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值