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>
不过看起来我用另外格式的图片也是可以的。