CSS超链接样式详解「建议收藏」
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说CSS超链接样式详解「建议收藏」,希望能够帮助你!!!。
CSS超链接样式详解
- 1.超链接伪类
- 2.深入了解:hover
-
- :hover用于div
- :hover用于img
- 3.鼠标样式
-
- 浏览器鼠标样式
- 自定义鼠标样式
1.超链接伪类
在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式
语法：
a:link{
…}
a:visited{
…}
a:hover{
…}
a:active{
…}
定义4个伪类，必须按照“link、visited、hover、active”的顺序进行
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css"> a {
text-decoration: none; } a:link{
color: black;} a:visited{
color: red;} a:hover{
color: purple;} a:active{
color: orange;} </style>
</head>
<body>
<a href="https://www.baidu.com/">百度网</a>
</body>
</html>
2.深入了解:hover
“:hover”伪类可以定义任何一个元素在鼠标经过时的样式
:hover用于div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css"> div {
width: 200px; height: 200px; } div:hover {
color: red; } </style>
</head>
<body>
<div>
我的世界
</div>
</body>
</html>
鼠标移动到div块处，div块会变色：
:hover用于img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css"> img:hover {
border: 5px solid orange; } </style>
</head>
<body>
<img src="https://img2.baidu.com/it/u=1644941556,604602934&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"/>
</body>
</html>
鼠标移动到图片处，图片会自动添加边框：
3.鼠标样式
在CSS中，对于鼠标样式的定义，我们有两种方式：浏览器鼠标样式和自定义鼠标样式
浏览器鼠标样式
在CSS中，我们可以使用cursor属性来定义鼠标样式
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css"> div {
width: 200px; height: 200px; background-color: blue; cursor: wait; } </style>
</head>
<body>
<div>
</div>
</body>
</html>
该实例，鼠标点击div块时，会改变当前鼠标的样式为等待
自定义鼠标样式
语法：
cursor:url（图片地址）,属性值;
这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是“.cur”，我们可以使用一些小软件来制作
这个“属性值”一般只会用到3个，分别是default、pointer和text。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IMUSTCTF</title>
<style type="text/css"> div {
width: 200px; height: 200px; background-color: blue; cursor: url("xxx"),pointer; } </style>
</head>
<body>
<div>
</div>
</body>
</html>
上一篇
已是最后文章
下一篇
已是最新文章
最新文章
