CSS层叠样式表—CSS超链接样式、背景属性、伪类选择器

超链接样式

学习目标

image-20230705145136571.png

超链接伪类

在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。

语法：

a:link{…}
a:hover{…}
a:active{…}
a:visited{…}

说明：

伪类	说明
a:link	定义a元素未访问时的样式
a:active	定义鼠标点击激活时的样式
a:hover	定义鼠标经过a元素时的样式
a:visited	定义a元素访问后的样式

注意：如果在使用的时候没有展示未访问时的样式，这时候我们去清空我们的浏览器历史记录就可以实现效果了。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title> </title>
    <style type="text/css">
        a {
            text-decoration:none;
        }
        a:link {
            color:red;
        }
        a:visited {
            color:purple;
        }
        a:hover {
            color:yellow;
        }
        a:active {
            color:blue;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

深入了解：hover

hover应用在其他标签上的效果。

语法：

元素:hover{…}

举例：“:hover”用于div

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:white;
            background-color: lightskyblue;
        }
        div:hover{
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div>hover效果颜色</div>
</body>
</html>

举例：:hover用于img

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img:hover {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <img src="img/girl.gif" alt="">
</html>

鼠标样式

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor

在CSS中，我们可以使用cursor属性来定义鼠标样式。

语法：

cursor: 取值;

说明：

cursor属性取值如下表所示。在实际开发中我们一般只会用到3个：default、pointer和text。其他的很少用得上，所以就不需要去记忆了。

属性值	外观
default	默认值
pointer	小手
text	文本
move	箭头

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div{
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            background-color: hotpink;
            color:white;
            font-size:14px;
        }
        #div_default{
            cursor:default;
        }
        #div_pointer{
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="div_default">鼠标默认样式</div>
    <div id="div_pointer">鼠标手状样式</div>
</body>
</html>

除了使用浏览器自带的鼠标样式，我们还可以使用cursor属性来自定义鼠标样式。只不过语法稍微有点不一样。

语法：

cursor: url(图片地址), 属性值;

说明：

这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur，我们可以使用Photoshop来制作，小伙伴们自行搜索一下制作方法。

而这个“属性值”一般为3种：default、pointer和text。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div{
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            background-color: hotpink;
            color:white;
            font-size:14px;
        }
        #div_default{cursor:url(img/cursor/default.cur),default;}
        #div_pointer{cursor:url(img/cursor/pointer.cur),pointer;}
    </style>
</head>
<body>
    <div id="div_default">鼠标默认样式</div>
    <div id="div_pointer">鼠标手状样式</div>
</body>
</html>

课程总结

image-20230705145136571.png

CSS背景属性

学习目标

image-20230705145650949.png

背景颜色

在CSS中，我们可以使用background-color属性来定义元素的背景颜色。

语法：

background-color: 颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color:transparent;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div {
           width:100px;
           height:60px;
       }
       #div1 {
           background-color: hotpink;
        }
       #div2 {
           background-color: #87CEFA;
        }
    </style>
</head>
<body>
    <div id="div1">背景颜色为：hotpink</div>
    <div id="div2">背景颜色为：#87CEFA</div>
</body>
</html>

背景图片

    background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置。

语法：

background-image: url(图片路径);

说明：

    跟引入图片（即img标签）一样，引入背景图片也需要给出图片路径才可以显示。背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div {
           background-image: url(img/haizei.png);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

说明：background-repeat属性取值有4个，如下表所示。

参数值	描述
repeat	背景图像在纵向和横向上平铺
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width:200px;
            height:100px;
            border: 1px solid silver;
            background-image: url(img/flower.png);
        }
        #div2 {
            background-repeat: repeat-x
        }
        #div3 {
            background-repeat: repeat-y
        }
        #div4 {
            background-repeat: no-repeat
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
</html>

背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

语法：

background-position: 像素值/关键字;

说明：

background-position属性常用取值有两种：一种是“像素值”；另外一种是“关键字”（这里不考虑百分比取值）。

像素值

当background-position属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。例如，“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。

语法：

background-position: 水平距离 垂直距离;

说明：

水平距离和垂直距离这两个数值之间要用空格隔开，两者取值都是像素值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-position:40px 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

关键字

当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。

语法：

background-position: 水平距离 垂直距离;

说明：

background-position属性的关键字取值如下表所示。

属性值	说明
top left	左上
top center	靠上居中
top right	右上
center left	居中靠左
center center	正中
center right	居中靠右
bottom left	左下
bottom center	靠下居中
bottom right	右下

9aa6ea2bf05a3ecd84d3g885.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-position:center right;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

    background-position:right center;中的“right center”，表示相对于左上角，水平方向在右边（right），垂直方向在中间（center）。

背景图像固定

在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。

语法：

background-attachment: 取值;

说明：

background-attachment属性取值只有2个，如下表所示。

属性值	说明
scroll	随元素一起滚动（默认值）
fixed	固定不动

CSS 属性定义背景效果:

background-color 设置颜色作为对象背景颜色。
background-image 设置图片作为背景图片。
background-repeat 设置背景平铺重复方向。
background-position 设置或检索对象的背景图像位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width:160px;
            height:1200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

课程总结

image-20230705145650949.png

伪类选择器

学习目标

image-20230715164449650.png

伪类选择器

:first-child 选择器：匹配其父元素中的第一个子元素。
:last-child 选择器：用来匹配父元素中最后一个子元素。
:nth-child(n) 选择器：匹配父元素中的第 n 个子元素，元素类型没有限制。奇数和偶数是可以作为关键字使用，用于相匹配的子元素，其索引是odd等同于nth-child(2n-1)或even等同于nth-child(2n)，nth-child(an+b) 公式计算 n可以为0。
:before 选择器在被选元素的“内容”前面插入内容，用来和content属性一起使用。
:after选择器在被选择元素的“内容”后面插入内容，用来和content属性一起使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类选择器</title>
    <style>
        div p:first-child{
            color:red;
        }
        div p:last-child{
            color:red;
        }
        div p:nth-child(2){
            color:green
        }
        div p:nth-child(odd){
            color:blue;
        }
        div p:nth-child(even){
            color:yellow;
        }
        div p:nth-child(3n+1){
            color:yellow;
        }
        i:before{
            content:"H";
        }
        i:after{
            content:"d";
        }
    </style>
</head>
<body>
    <div>
        <p>子元素</p>
        <p>子元素</p>
        <p>子元素</p>
        <p>子元素</p>
        <span>子元素</span>
        <p>子元素</p>
        <p>子元素</p>
        <p>子元素</p>
    </div>
    <div>
        <p>子元素</p>
    </div>
    <div>
        文字内容
    </div>
    <div>
        
    </div>
    <div></div>
    <i>ello worl</i>
</body>
</html>

课程总结

image-20230715164449650.png