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>

鼠标移动到图片时:
HTML--CSS--超链接样式以及鼠标样式自定义_第1张图片或者像这样:

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>

不过看起来我用另外格式的图片也是可以的。

你可能感兴趣的:(HTML学习,html,css)