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

news2024/9/29 7:29:37

超链接伪类

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

<!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>