CSS之——伪类选择器设置超链接样式和创建按钮式超链接（学习笔记）

最新推荐文章于 2025-06-12 11:23:36 发布
最新推荐文章于 2025-06-12 11:23:36 发布
阅读量7k 收藏 23
点赞数 2
CC 4.0 BY-SA版权
分类专栏： CSS HTML 文章标签： CSS 伪类选择器 超链接 按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39941298/article/details/81179595
本文介绍如何使用CSS伪类为超链接设置不同的样式效果，包括普通、已访问、悬停及激活状态，并通过实例展示了按钮式超链接的设计方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、使用CSS伪类别来设置超链接样式

链接的四种状态：

a:link             普通的，未访问的链接

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

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

a:active:        链接被点击的时候

 

二、创建按钮式超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用CSS伪类来设置超链接样式</title>
<style type="text/css">
body {
	margin: 20px;
}
a {
	font-family:Arial;
	margin:5px;
}
a:link,a:visited{
	color: #A62020;
	padding: 4px 10px;
	background-color: #DDD;
	text-decoration: none;
	border-top: 1px solid #EEE;
	border-left:1px solid #EEE;
	border-bottom: 1px solid #717171;
	border-right:1px  solid #717171;
}
a:hover{
	color:#821818;
	padding: 5px 8px 3px 12px;
	border-top: 1px solid #717171;
	border-left: 1px solid #717171;
	border-bottom: 1px solid #EEE;
	border-right:1px solid #EEE;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">Java</a>
<a href="http://www.baidu.com">Php</a>
<a href="http://www.baidu.com">.Net</a>
</body>
</html>

 

 

 

 

CSS 学习笔记
ShaoXiaoQi的博客
08-12 633
一、初识CSS 1.1 CSS概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。而且还
自己学习html+css的详细笔记
qq_53366282的博客
05-18 2021
目录 常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13
css通过伪类来设置超链接样式附示例
09-25
css设置超链接样式是通过伪类来实现的，默认状态下，创建的超级链接的文字颜色为蓝色，并带有下划线，访问之后变为紫色，下面有个不错的示例，喜欢的朋友可以尝试操作下
CSS 伪类选择器
weixin_34128237的博客
09-07 126
CSS伪类选择器：给超链接加的样式(链接的不同状态加样式) 一个超链接，有四个状态： 　　正常状态(:link)：鼠标没放上之前链接的样式。 　　放上状态(:hover)：鼠标放到链接上时的样式。 　　激活状态(:active)：按住鼠标左键不松开的样式，这个状态特殊短暂。 　　访问过的状态(:visited)：按下鼠标左键，并弹起，这时的样式效果。 在平常工作中，会使用以下写...
掌握CSS伪类选择器：提升网页交互的必备技巧
最新发布
2301_81137804的博客
06-12 466
伪类选择器是CSS的灵魂之一，它们能让我们基于用户行为、元素状态或文档结构创建动态样式，无需额外JavaScript即可实现丰富的交互效果。
CSS选择器：伪类（图文详解）
weixin_34075268的博客
01-13 944
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 伪类（伪类选择器） 伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”...
超链接伪类，节点伪类，结构伪类 的选择器
joshuacty的博客
07-06 372
1，超链接伪类 a:link{ } 访问前样式， a:hover{ } 移上去的样式 a:active{ } 点击时的样式 a:visited{ } 点击后的样式 2，节点伪类 p::first-letter{} 第一个字 p::first-line{} 第一行 p:first-child{ } 第一个元素 3，结构伪类 p:nth-child(){} 从第一个开始数 元素 p:nth-last-child(2n-1){} 从后往前数 元
超链接伪类（a标签伪类选择器）
comegoing_xin_lv的博客
07-11 1217
超链接伪类常见使用
HTML_CSS学习笔记.docx
07-15
- 优先级：计算权重决定哪个样式生效，涉及内联样式、类、ID 和标签选择器等。 - !important：用于设定最高优先级，但应谨慎使用。 10. CSS3 字体样式： - 支持更多的字体类型，如 @font-face 规则导入自定义...
前端新手必备：HTML和CSS学习笔记
1. CSS选择器：CSS通过选择器定位HTML文档中的元素。基本选择器包括元素选择器、类选择器、ID选择器和通用选择器，组合选择器则包括后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器。 2. CSS盒模型：理解...
达内Web学习笔记：HTML与CSS基础
"这是一份来自达内科技的Web学习笔记，涵盖了HTML和CSS的基础知识，旨在帮助学习者掌握网页开发的基本技能。笔记内容包括了HTML的结构元素和CSS的样式设置，是初学者入门的良好参考资料。" 在Web开发中，HTML...
超链接伪类选择器
weixin_61940154的博客
10-15 763
HTML5第六课时，超链接，伪类选择器
甲戌天火的博客
04-19 1054
html> html> head lang="en"> meta charset="UTF-8"> title>超链接,伪类选择器title> style> /*伪类选择器，必须按照以下的顺序去写，l,v,h,a*/ a:link{/*1.默认的链接状态。未访问状态。*/ color: pink;
css超链接的伪类 伪元素选择器 继承
m0_47001401的博客
06-29 285
伪类选择器
m0_60323584的博客
08-15 459
伪类选择器
伪类链接
啊伟的博客
11-21 175
伪类链接 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实际写法</title> <style> a { color: #333; text-decoration: none; }/* 链接平时的一个状态 */ a:hover { color: skyblue; text-
CSS基础1(概述、选择器、超链接伪类)
Pluto.的博客
01-18 429
CSS语言基础 概述 CSS：层叠样式表(Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。简而言之就是对网页进行美化。 发展（几个重要版本）： CSS 在...
【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 3973
一、链接伪类选择器 1、语法说明 2、常用方式 3、代码示例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值