超链接样式
学习目标
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
