1.超链接伪类
在CSS中,我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式语法:
a:link{…} a:visited{…} a:hover{…} a:active{…}
必须按照“实例:”的顺序进行link、visited、hover、active
定义4个伪类,
<!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>