CSS基础笔记——超链接样式
2023-06-13 09:12:17 时间
大家好,又见面了,我是你们的朋友全栈君。
在浏览器中,超链接默认情况下字体为蓝色,带有下划线,鼠标单击时字体为红色,单击后为紫色
而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
定义四个伪类,必须按照link、visited、hover、active的顺序进行,不然浏览器可能无法正常显示这四种样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>字体样式</title>
<style type="text/css">
a{text-decoration: none;}
a:link{color: red;}
a:visited{color: purple;}
a:hover{color: yellow;}
a:active{color: blue;}
</style>
</head>
<body>
<a href="http://www.bilibili.com" target="_blank">BiliBili</a>
</body>
</html>
text-decoration:none表示去掉下划线
在实际开发中,并不是每一个超链接都必须定义这四种状态下的样式,一般只会用到未访问和鼠标经过时的状态
对于未访问时状态,我们直接针对a元素定义就行了,没必要使用a:link
a{
color:red;
text-decoration:none;
}
a:hover{
color:blue;
text-decoration:underline;
}
深入了解:hover
事实上,:hover伪类可以定义任何一个元素在鼠标经过时的样式
举例:”:hover”用于div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>字体样式</title>
<style type="text/css">
div{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: lightblue;
}
div:hover{
background-color: lightcoral;
}
</style>
</head>
<body>
<div>我爱学习</div>
</body>
</html>
在鼠标经过一张图片时为其添加边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>字体样式</title>
<style type="text/css">
img:hover{
border: 2px solid skyblue;
}
</style>
</head>
<body>
<img src="maomao.jpg" alt="">
</body>
</html>
:hover伪类应用非常广泛,我们要好好掌握
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/161764.html原文链接:https://javaforall.cn
相关文章
- 五、集合基础【黑马JavaSE笔记】
- 1.Python3基础入门学习笔记(一)
- TypeScript学习笔记(二)—— TypeScript基础
- 【重识云原生】第六章容器基础6.4.5.1节——Deployment概述
- 理想中的Web3信誉体系:如何在Web2基础上升级?
- (一)《数字电子技术基础》——引言
- Python爬虫基础
- 【生信技能树培训笔记】R语言基础(20230112更新)
- MySql基础-笔记5 -WHERE 、UPDATE、DELETE、LIKE、UNION使用
- MySql基础-笔记10-索引
- MySql基础-笔记12 -重复数据处理、SQL注入、导入导出数据
- Unity脚本(C#)基础笔记
- Go语言学习笔记一 Golang的安装与基础
- 学习小组day4笔记-R语言基础
- Kafka基础篇学习笔记整理
- postgreSQL 数据库基础 如何计算两点距离的多种不同方法
- Java基础学习笔记二 Java基础语法详解编程语言
- Java基础学习笔记十九 IO详解编程语言
- javaScript基础练习题-下拉框制作(CSS)详解编程语言
- Linux入门:掌握最基础的知识(linux入门知识)
- 库删除MSSQL数据库:从最基础开始(删除mssql数据)
- dojo之基础篇(三)之向服务器发送数据
- Jquery基础学习笔记
- PHP面向对象学习笔记之一基础概念
- JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
- WinForm之BindingSource基础操作实例教程