前端学习从入门到高级全程记录之5 （CSS高级知识）

最新推荐文章于 2024-05-22 14:36:42 发布

灬银瓶丶

最新推荐文章于 2024-05-22 14:36:42 发布

阅读量379

点赞数 1

分类专栏：前端 CSS HTML 文章标签： HTML 前端 CSS

本文链接：https://blog.csdn.net/zhangbobo1997/article/details/97888949

版权

前端同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML

20 篇文章 0 订阅

订阅专栏

CSS

18 篇文章 0 订阅

订阅专栏

本期学习目标

1.熟练掌握CSS背景属性
2.熟练掌握CSS三大特性
3.熟练掌握CSS盒子模型
4.熟练掌握CSS浮动
5.熟练掌握CSS定位
6.熟练掌握CSS高级技巧强化CSS
typora-copy-images-to: media

1.CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

空格规范

【强制】选择器与{之间必须包含空格。
示例：.selector {}
【强制】属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格。
示例：
font-size：12px；

选择器规范

【强制】当一个rule包含多个selector时，每个选择器声明必须独占一行。
示例：

/* good */
.post,
.page,
.comment {
  line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
示例:

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

属性规范

【强制】属性定义必须另起一行。
示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。
示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

2.行高的测量

在这里插入图片描述

行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。

做法就是：文字的行高等于盒子的高度。

这里情况有些复杂，开始学习我们可以先从简单地地方入手学会。
在这里插入图片描述
上距离和下距离总是相等的，因此文字看上去是垂直居中的。

如果行高等于height高度，文字会垂直居中

如果行高大于高度，文字会偏下

如果行高小于高度，文字会偏上

做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				height: 50px;
				width: 200px;
				background-color: pink;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			我是行高
		</div>
	</body>
</html>

做一个特殊练习，所需要的图片为：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	 .first {
	 	width: 120px;
	 	height: 58px;
	 	background-color: pink;
	 	display: inline-block;
	 	background-image: url(images/bg1.png);
	 	text-align: center; /*水平居中*/
	 	line-height: 58px;  /*行高小于 高度 文字偏上*/
	 	color: #fff;
	 	text-decoration: none;
	 }
	 .second{
	 	width: 120px;
	 	height: 58px;
	 	background-color: pink;
	 	display: inline-block;
	 	background-image: url(images/bg2.png);
	 	text-align: center; /*水平居中*/
	 	line-height: 58px;  /*行高小于 高度 文字偏上*/
	 	color: #fff;
	 	text-decoration: none;
	 }
	 .third{
	 	width: 120px;
	 	height: 58px;
	 	background-color: pink;
	 	display: inline-block;
	 	background-image: url(images/bg3.jpg);
	 	text-align: center; /*水平居中*/
	 	line-height: 58px;  /*行高小于 高度 文字偏上*/
	 	color: #fff;
	 	text-decoration: none;
	 }
	</style>
</head>
<body>
	<a href="#" class="first">导航栏</a>
	<a href="#" class="second">导航栏</a>
	<a href="#" class="third">导航栏</a>
</body>
</html>

在这里插入图片描述
你会发现，明明行高等于高度，为什么看起来有些偏下呢？其实，图片下面的尖角也占一定的高度，如果把尖角的高度补充，会发现文字确实是垂直居中的，看起来不垂直居中是视觉的错觉。所以我们在网页上检查代码，找到行高的地方，手动一点点调整直到自己满意为止。我觉得行高设为50px左右就可以了，然后去改代码，就大功告成了！

3.CSS三大特性

层叠，继承，优先级是我们学习CSS必须掌握的三个特性。

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。就近原则。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				color: red;/*给div设置一个颜色*/
			}
			div{
				color: blue;/*又设置了一个颜色*/
			}
		</style>
	</head>
	<body>
		<div>
			我是层叠
		</div>
	</body>
</html>

自己动手试试，最后的颜色是蓝色。

1.样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行哪个样式。

2.样式不冲突，不会层叠。

我们把代码改一下，再做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				color: red;/*给div设置一个颜色*/
				font-size: 50px;
			}
			div{
				color: blue;/*又设置了一个颜色*/
			}
		</style>
	</head>
	<body>
		<div>
			我是层叠
		</div>
	</body>
</html>

一般如果没有设置字体，字体字号默认为16px，但结果是50px。颜色执行的是下面的div，字号执行的是上面的div。所以样式不冲突是不会层叠的。

CSS最后的执行口诀：长江后浪推前浪，前浪死在沙滩上。

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>继承性</title>
		<style type="text/css">
			.father{
				color: skyblue;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<p>son</p>
		</div>
	</body>
</html>

我们没有给p标签设置大小和字号，但会继承父标签的样式。但不是所有的都能继承过来，比如height不能继承，一般跟文本相关的能继承，但像行高等属性却不能继承。。

简单的理解就是：子承父业。

CSS最后的执行口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

注意：
恰当地使用继承可以简化代码，降低CSS样式地复杂性。子元素可以继承父元素地样式（text-,font-,line-，这些元素开头的都可以继承，以及color属性）

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
做一个小例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>优先级</title>
		<style>
			.yase{
				color: deepskyblue;
			}
			div{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="yase">
			亚瑟
		</div>
	</body>
</html>

结果是蓝色而不是红色，这就是优先执行了类选择器，它的权重更高。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100.总之，它拥有比上面提到的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个！important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，！important都具有最大优先级。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是CSS Specificity，我们称为CSS特性或称非凡性，它是一个衡量CSS值优先级的一个标准，具体规范如下：

specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值重要的	∞ 无穷大

做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>优先级</title>
		<style>
			#ya{/*权重0,1,0,0*/
				color: green;
			}
			.yase{/*类选择器权重高于标签选择器,权重:0,0,1,0*/
				color: deepskyblue;
			}
			div{
				/*权重  0,0,0,1*/
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="yase" id="ya">
			亚瑟
		</div>
	</body>
</html>

id选择器的权重更高，优先执行它的。
在做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>优先级</title>
		<style>
			#ya{/*权重0,1,0,0*/
				color: green;
			}
			.yase{/*类选择器权重高于标签选择器,权重:0,0,1,0*/
				color: deepskyblue;
			}
			div{
				/*权重  0,0,0,1*/
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="yase" id="ya" style="color: orange;">
			亚瑟
		</div>
	</body>
</html>

style的权重更高，所以执行它的。
再来：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>优先级</title>
		<style>
			#ya{/*权重0,1,0,0*/
				color: green;
			}
			.yase{/*类选择器权重高于标签选择器,权重:0,0,1,0*/
				color: deepskyblue;
			}
			div{
				/*权重  无限大*/
				color: red !important;
			}
		</style>
	</head>
	<body>
		<div class="yase" id="ya" style="color: orange;">
			亚瑟
		</div>
	</body>
</html>

！important权重无限大，虽然div权重最低，但加了它之后权重最高，所以优先执行div。

权重是可以叠加的。

做一个练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>权重叠加</title>
		<style type="text/css">
			/*div {权重:0001
				color: green;
			}
			div {
				color: red;
			}*/
			/*1.权重相同,遵循就近原则*/
			
			/*div p {权重:0001+0001=0002
				color: green;
			}
			p{
				color: red;
			}*/
			/*2.权重会叠加*/
			
			.ya{/*权重:0010，比前面都大*/
				color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<p class="ya">亚瑟瑟瑟瑟</p>
		</div>
	</body>
</html>

比如：
div ul li ------> 0,0,0,3

.nav ul li ------> 0,0,1,2

a:hover -----—> 0,0,1,1

.nav a ------> 0,0,1,1

#nav p -----> 0,1,0,1

注意：
1.数位之间没有进制，比如说：0，0，0，5+0，0，0，5=0，0，0，10而不是0，0，1，0，所以不会存在10个div能赶上一个类选择器的情况。

2.继承的权重是0

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>继承权重</title>
		<style type="text/css">
			p{
				color: red;
			}
			div{
				color: green！important;/*权重无限大也没用*/
			}
		</style>
	</head>
	<body>
		<div>
			<p>儿子</p><!--有自己的优先执行自己的-->
		</div>
	</body>
</html>

下面做几道经典权重题，先不要运行代码，先经过自己的分析，说出来结果，再运行看看自己对不对。

第一题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第1题</title>
		<style type="text/css">
			#father #son{  
				color:blue;
			}
			#father p.c2{
				color:black;
			}
			div.c1 p.c2{
				color:red;
			}
			#father{
				color:green !important;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p id="son" class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

第二题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第2题</title>
		<style type="text/css">
			#father{
				color:red;
			}
			p{
				color:blue;  
			}
		</style>
	</head>
	<body>
		<div id="father">
			<p>试问这行字体是什么颜色的？</p>
		</div>
	</body>
</html>

第三题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第3题</title>
		<style type="text/css">
			div p{   
				color:red;
			}
			#father{
				color:red;
			}
			p.c2{    
				color:blue;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

第四题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="关键词1,关键词2,关键词3" />
		<meta name="description" content="对网站的描述" />
		<title>第4题</title>
		<style type="text/css">
			div div{ 
				color:blue;
			}
			div{
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>
					试问这行字体是什么颜色的？
				</div>
			</div>
		</div>
	</body>
</html>

第五题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div div div div div div div div div div div div{  
			color:red;
		}
		.me{ 
			color:blue;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div class="me">试问这行文字是什么颜色的</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

第六题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.c1 .c2 div{  
			color: blue;
		}
		div #box3 {
			color:green;
		}
		#box1 div {
			color:yellow;
		}
	</style>
</head>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
			<div id="box3" class="c3">
				文字
			</div>
		</div>
	</div>
</body>
</html>

总结优先级：

1.使用了！important声明的规则。
2.内嵌在HTML元素的style属性里面的声明。
3.使用了ID选择器的规则。
4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5.使用了元素选择器的规则。
6.只包含一个通用选择器的规则。
7.同一类选择器则遵循就近原则。

总结：权重是优先级的算法，层叠是优先级的表现

4.CSS背景（background）

CSS可以添加背景颜色和背景图片，以及来进行图片设置。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景图片（image）

语法：background-image:one | url (url)
参数：
one:无背景图（默认的）
url：使用绝对或相对地址指定背景图像

background-image属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和background-color连用。如果图片不重复地话，图片覆盖不到的地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

小技巧：我们提倡背景图片后面的地址，url不要加引导。

背景平铺

语法：

background-repeat:repeat | on-repeat | repeat-x | repeat-y

参数：

repeat:背景图像在纵向和横向上平铺（默认的）
no-repeat：背景图像不平埔
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景</title>
		<style>
			body{
				/*background-image: pink;*/
				background-image: url(images/3.jpg);
				/*repeat : 　背景图像在纵向和横向上平铺
                no-repeat : 　背景图像不平铺
                repeat-x : 　背景图像在横向上平铺
                repeat-y : 　背景图像在纵向平铺 */
               
               /*background-repeat:repeat-x ;*/
               background-repeat:repeat-y ;
			}
		</style>
	</head>
	<body>
	</body>
</html>

每一个的效果都试试，多看多思考。

背景位置（position）

语法：

background-position : length || length

background-position : position || position

参数：
length：百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位。

说明：设置或检索对象的背景图像位置，必须先指定background-image属性。默认值为：（0% 0%）。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%，第二个值将用于纵坐标。

注意：
1.position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
2.如果精确单位和方位名词混合使用，则必须是x坐标在前，y坐标在后面。比如background-position：15px top；则15px一定是x坐标，top是y坐标。

实际工作用的最多的就是背景图片居中对齐了。

下面来做一个很重要的练习，注意，首先需要一张图片，我在网上找了一个李白凤求凰的图片，当然也可以是其他的图片：
在这里插入图片描述
还是老规矩，建一个文件夹，包括imges文件夹和HTML文件。图片放入imges文件夹内，敲入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 500px;
			height: 600px;
			background-color: purple;
	</style>
</head>
<body>

	<div>
		<img src="images/LiBai.png" width="200"/>
	</div>
</body>
</html>

在这里插入图片描述
记住div就是个盒子，现在这个盒子是紫色的，图片默认是放在盒子的左上角。

现在我们是把图片插入到盒子里，这样很难移动位置以达到我们想要的结果，所以我们要把图片作为背景图，这样就能移动位置。

所以我们把div里头的代码删掉，改一下样式代码;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 500px;
			height: 600px;
			background-color: purple;
			background-image: url(images/LiBai.png);
			background-repeat:no-repeat ;
	</style>
</head>
<body>

	<div>

	</div>
</body>
</html>

达到现在的效果：
在这里插入图片描述
现在我们要水平居中，就要用到background-position=x y这个方法。其中x表示是横轴，y表示的是纵轴，我想这个我不必要解释太多，大家都应该知道。那么，在style样式加入一行代码:background-position: center top; /*top上, bottom下, left左, right右，center中间 */
看到的效果如图：
在这里插入图片描述
那么我还需要水平垂直都居中，那么加入以下代码;background-position: center center; /*top上, bottom下, left左, right右，center中间 */
那么我还需要右下：background-position: right bottom;
效果如图：

如果我们改变上面代码中的right bottom,把它们的顺序颠倒：bottom right会怎么样呢？

答案是：不会发生变化。

所以出现了一个重要知识点:
1.position后面可以跟方位名词，它们之间可以没有上下顺序。
这行代码还可以简写：background-postion：left我只写一个方位名词，结果会怎样？如图：
在这里插入图片描述
所以我们又学到了一个知识点:
2.position如果只写一个值，另外一个默认是居中的。
那么我只想让图片移动几像素而已，该如何？

插入以下代码：background-position:14px 50px;
效果如图:
在这里插入图片描述
看到了吗，这样就可以随意改变图片位置。
3.position后面可以跟值（像素px）。但是必须有顺序，x在前，y在后，不能颠倒。

网络上有很多大图，分辨率在1920×1080左右，但有的显示器分辨率低，显示图片不完整，因为图片是默认左上角对齐，该怎么办？

需要的图片：
在这里插入图片描述
那么我们敲入以下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大图</title>
		<style>
			body{
				background-image: url(images/大图.jpg);
			}
		</style>
	</head>
	<body>
	</body>
</html>

效果如图：
在这里插入图片描述
有的显示器分辨率低，导致只能看到图片的左上角部分（因为图片默认左上），那么加入以下代码：

background-position: center top;

效果如图：
在这里插入图片描述
所以为了照顾不同的浏览器，很多网站都会采用这种方法。

背景附着

语法：

background-attachment : scroll | fixed

参数：
scroll：背景图像是随对象内容滚动
fixed:背景图像固定

说明：设置或检索背景图像是随对象内容滚动还是固定的。

练习，还是之前的代码，加一些内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大图</title>
		<style>
			body{
				background-image: url(images/大图.jpg);
				background-position: center top; 
				background-repeat: no-repeat;
			}
			p{color: darkorange;}
		</style>
	</head>
	<body>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
	</body>
</html>

鼠标向下滚动会发现图片会往上去，图片是会动的：
在这里插入图片描述
现在，在样式中加入以下代码：background-attachment: fixed;/*图片固定的*/

你会发现图片不会动了。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background：背景颜色背景图片地址背景平铺背景滚动背景位置

background：transparent url(image.jpg) repeat-y  scroll 50% 0;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大图</title>
		<style>
			body{
				background: #000 url(images/大图.jpg) no-repeat fixed center top;
			}
		</style>
	</head>
	<body>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
		<p>美丽的夜空空空</p>
	</body>
</html>

购物车案例

我们先看一个图片：
在这里插入图片描述
我们要达到这样的效果：鼠标不在图片上面时，显示的是购物车图标，当鼠标移动到图片上面，显示的是登录图片。那怎么才能实现这样的效果？

首先我们需要插入一个盒子（就是div，a等标签），在没有鼠标时，只显示购物车图标，我为了方便理解，设置盒子为黄色，如图：
在这里插入图片描述
这里盒子大小看着稍微大了一些，但其实是要设置为图标一样大小，这样登录图标就不会显示。图片的大小可以用photoshop软件来轻松获取，这就是我为什么在第一期的学习中要求大家安装photoshop。方法有很多，可以看图片属性、借助标尺等等。这里获取的大小为：宽67px，高32px。

那么当鼠标移动到上面，则会这样：
在这里插入图片描述
这样就会达到图片切换效果了，但其实图片只是改了位置而已。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<style>
			a{
				width: 67px;
				height: 32px;
				background: url(images/110.png) no-repeat left top;
				display: block;/*转换为块元素*/
			}
			a:hover{/*鼠标经过时*/
				background-position: left bottom;
			}
		</style>
	</head>
	<body>
		<a href="#"></a>
	</body>
</html>

背景透明（CSS3）

CSS3支持背景半透明的写法语法格式是：

background: rgba(0,0,0,3);

最后一个参数是alpha透明度，取值范围0~1之间

注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

代码练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景透明</title>
		<style>
			body{
				background-color: pink;
			}
			div{
				width: 200px;
				height: 200px;
				/*background-color: #000;*/
				color: #fff;
				background:rgba(0,0,0,0.3);/*red green blue alpha 0~1*/
			}
		</style>
	</head>
	<body>
		<div>我是文字</div>
	</body>
</html>

你可以多改改透明度观察效果，记住取值是0~1。