HTML--CSS--超链接样式以及鼠标样式自定义

超链接伪类

再复习一下,超链接的定义方式如下：

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style></style>
</head>
<body><a href="http://192.168.9.103:5000">这是一个超链接</a>
</body>
</html>

如果觉得下划线不好看，可以加上：
a{text-decoration: none;}
这都是之前学到过的东西，另外
如果你有注意的话，应该能发现超链接未点击时，点击时和点击后的颜色都是不同的。
这个颜色我们也可以自定义，方法如下：

a:link 定义超链接元素a 未访问时的样式
a:visited 定义超链接元素a访问后的样式
a:hover 定义鼠标经过超链接元素a时的样式
a:active 定义鼠标单机激活时的样式

注意，这四个属性顺序固定，别定义错了
用法范例：

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>a:link{color: #005a00;}a:visited{color: aqua;}a:hover{color: rebeccapurple;}a:active{color: red;}</style>
</head>
<body><a href="http://192.168.9.103:5000">这是一个超链接</a>
</body>
</html>

效果：
未点击时：
在这里插入图片描述
点击后：

鼠标经过时：

鼠标点击时：

这里 :hover定义了鼠标经过的样子，那其他元素也可以定义吗？
以下是尝试内容：

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>div:hover{color: red;}</style>
</head>
<body><div><p>这是一段话</p></div><div><hr/><img src="x.gif"/><hr/><h3>这是H3文本</h3><ol><li>标签一</li></ol><ul><li>标签二</li></ul></div>
</body>
</html>

效果是：
hr显示的直线没变色，div内的元素p等能够随着鼠标经过而变色
但是上面这个图片却没反应
单独尝试呢？

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>p:hover{color: red;}hr:hover{color: blueviolet;}img:hover{color: blue;}</style>
</head>
<body><p>这是一句话</p><hr/><img src="x.gif"/></body>
</html>

ok,这次 hr生成的分割线也变色了，但是图片依然没变化，太想当然了，给图片加边框呢？

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>p:hover{color: red;}hr:hover{color: blueviolet;}img:hover{border: 5px solid red;}</style>
</head>
<body><p>这是一句话</p><hr/><img src="x.gif"/></body>
</html>

鼠标移动到图片时：
在这里插入图片描述或者像这样：

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>p:hover{color: red;}hr:hover{color: blueviolet;}img{border: 5px dashed black;}img:hover{border-color: red;}</style>
</head>
<body><p>这是一句话</p><hr/><img src="x.gif"></body>
</html>

那这样最开始是黑色边框，鼠标移动，黑框变红框
改变背景颜色?也可行：

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>p:hover{color: red;background-color: aqua;}</style>
</head>
<body><p>这是一句话</p><hr/><img src="x.gif"></body>
</html>

上例子在鼠标落到字符串时，字符串所在行背景颜色变成了指定颜色
背景，颜色，那样式也能改吧？没错，也能改

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>p:hover{color: red;background-color: aqua;/*text-align: center;*/font-size: large;font-style: oblique;/*font-family: Arial, Helvetica, sans-serif;*/}</style>
</head>
<body><p>这是一句话</p><hr/><img src="x.gif">
</body>
</html>

这些都改了，那能改变鼠标吗？答案也是可以的，很多网页上，鼠标在文本输入框，链接，放大缩小等等时都有不同的表现，我们可以进行设定,但一般使用默认的就可以，这里做一个了解，可以自定义我们鼠标的样子：
方法：
cursor:取值
代码如下：

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>#a{cursor: pointer;}#b{cursor: wait;}</style>
</head>
<body><div id="a"><h1>块一</h1></div><div id="b"><p>块二</p></div>
</body>
</html>

类似这样，鼠标在移动到设定的div块时会改变鼠标样式。
还可以自定义鼠标样式，用 .cur后缀图片进行自定义
方法如下：

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>#a{cursor: url(x.gif),default;}#b{cursor: wait;}</style>
</head>
<body><div id="a"><h1>块一</h1></div><div id="b"><p>块二</p></div>
</body>
</html>