CSS样式

小yu别错过

已于 2023-09-27 17:29:32 修改

阅读量459

点赞数 1

分类专栏： Java 文章标签： css html

于 2021-09-03 22:51:57 首次发布

本文链接：https://blog.csdn.net/m0_52994499/article/details/120089632

版权

Java 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

一、CSS是什么？

一个网页页面由html，css，javascript组成
html相当于一个简陋的骨架，css相当于对这个骨架进行化妆修饰的
css 层叠样式表 cascading style sheets

二、CSS的三种引入方式

CSS三种引入方式：①行内样式②内联样式③外联样式
使用CSS的目的：为了修饰标签的，让标签更好看

2.1行内样式

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 行内样式的写法，目的是为了修饰div标签的
		 学过的每一个标签，都有这个属性叫style
		 style属性值写的是css语法格式
		 css语法格式：
			属性1:属性值1;属性2:属性值2;属性3:属性值3;
		eg:border：边框大小 子属性 solid：边框颜色
			width：宽度
			height：高度
			background-color：背景颜色
			color：字体颜色
		-->
		<div style="border:0.25rem solid gold; width: 31.25rem; height: 25rem; background-color: aqua; color: red;">
			　一望无际的沙漠里，简直就是一个极度喧嚣的世界，一幕幕优美的画面和热闹的舞台剧总是在轮番
			登场，令人心醉神怡。可是，它们的生存，却给人们留下了太多、太深、太久远的启示和忠告。不信?
			你看，在沙漠里，有一种植物叫胡杨，它是沙漠地区特有的珍贵森林资源，因其超顽强的生命力，还被
			人们赞誉为“长着千年不死，死后千年不倒，倒地千年不腐”的英雄树。为了近观胡杨的独特风范，我
			和我的同伴曾走向塔克拉玛干沙漠的深处，在那荒凉的戈壁滩里，映入眼帘的是晶莹剔透的飞沙，迎接
			我们的是难忍的饥渴和孤独，以及炽热的煎熬，动物、植被的残骸四处呈现，而胡杨则展现出与天地抗
			争的勇气和执着!它们顽强的生命，实在是悲壮又令人惊叹!还有一种叫百岁兰的植物，它一生只生长两
			片叶子，但每一片叶子都可以活到百余年甚至上千年的时间;当然，譬如仙人掌、梭梭、红柳树……无不
			让人惊奇和赞颂!
		</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

2.2内联样式

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css内联样式的写法</title>
		<!-- 内联样式的写法是在head标签中，有一个子标签叫style
			在style标签中去写CSS样式去修饰标签
		-->
		<style>
			/* 这个是css里面的注释，和html不一样 */
			/* 首先找到被修饰的标签，然后写大括号，在大括号里面写css语法格式 */
			div{
				width: 6.25rem;
				height: 6.25rem;
				background-color: darkgoldenrod;
			}
			/* 修饰p标签 */
			p{
				width: 18.75rem;
				height: 18.75rem;
				background-color: gold;
			}
			/* 修饰span标签 */
			span{
				/* 专门讲一下颜色表示方式
				 1.html规定好的颜色的英文单词
				 2.十六进制的表示形式 0-F
					R   G   B
					00  00  00 黑色
					FF  00  00 红色
					00  FF  00  绿色
					00 00  ff  蓝色
					十六进制组成了好好的颜色
				 一般用吸色器把颜色吸出来*/
				 color:#E1251B;
			}
		</style>
	</head>
	<body>
		<div>
			仰天大笑出门去，我辈岂是蓬蒿人
		</div>
		<p>离开你一百个星期，我回到了这里，寻找我们爱过的证据，
		没有人愿意提起，玫瑰花它的过去，今天这里的主题，我把它叫做回忆
		</p>
		<div>
			
		</div>
		<span>
			天生我材必有用，千金散尽还复来。
		</span>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

2.3外联样式

首先在当前html文件所在的文件夹里面创建一个名为test.css的CSS文件
文件内容为：

footer{
	width: 12.5rem;
	height: 12.5rem;
	background-color: tomato;
	color: #7FFFD4;
}

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部的css文件
			在head头里面写一个link标签，目的是为了引入外部的css文件
			属性：
				rel：连接文件的类型 样式表
				type：css文件类型
				href：外部的css所在路径
		-->
		<link rel="stylesheet" type="text/css" href="./test.css"/>
	</head>
	<body>
		<!-- 外联样式
		 在文件的外部写一个后缀为css的文件
		 引入到我们的当前页面中
		 -->
		<footer>东风不与周郎便，铜雀春深锁二乔</footer>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

三、CSS的选择器

目的：为了找到这个被修饰的标签的。

如果连标签都找不到，何谈修饰？好比你买了化妆品，要给你女朋友化妆，。突然想到自己没有女朋友。很扎心。首先找到女朋友，对她进行化妆

1.标签选择器

2.class选择器

3.id选择器

4.层级选择器

5.组合选择器

6.通配选择器

7.伪类选择器

3.1标签选择器

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签选择器</title>
		<!-- 内联样式的写法 -->
		<!-- 标签选择器，通过标签的名字获取找到标签的 -->
		<style>
			/* span就是html标签的名字
			 对span的内容进行修饰
			 */
			span{
				color: red;
			}
			div{
				color: yellow;
			}
			footer{
				color: blue;
			}
		</style>
	</head>
	<body>
		<span>蓦然回首，那人却在灯火阑珊处</span>
		<div>借问酒家何处有，牧童遥指杏花村</div>
		<div></div>
		<footer>风萧萧兮易水寒，壮士一去兮不复返</footer>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

3.2class选择器

每一个标签都有一个class属性

给class起一个属性的名字，咱们可以通过这个=属性值可以找到这个标签

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* class选择器
				是在标签中写一个class属性
				属性值是自己定义的
				通过.属性值  在{}中找到当前标签进行修饰
			*/
		   .nb{
			   color: red;
		   }
		   .sb{
			   color: blue;
		   }
		   .qb{
			   color: #7FFFD4;
		   }
		</style>
	</head>
	<body>
		<!-- 任何一个标签都有class属性 
			class的属性值可以随便写
			class可以写多个值，中间使用空格隔开
		例如：
			<div class="wwb wabf nb">
				<!-- class有三个值：
					1.wwb
					2.wabf
					3.nb
					这是我自己定义的三个属性值
		-->
		<div class="wwb wabf nb">君不见黄河之水天上来，奔流到海不复回</div>
		<div class="sb">烹羊宰牛且为乐，会须一饮三百杯</div>
		<p class="qb">
			人生得意须尽欢，莫使金樽空对月。
			天生我材必有用，千金散尽还复来。
		</p>
	</body>
</html>

结果如下（示例）：

在这里插入图片描述

3.3id选择器

每一个标签都有id属性 class style name属性
给一个标签写一个id属性，然后给一个id值。通过这个id值找到这个标签

#id值{}
【注意】：id值必须是唯一的，class的值可以重复

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器</title>
		<style>
			/* id选择器  使用关键字   #id值
			 id值必须是唯一的
			 */
			#xkh{
				color: gold;
				width:12.5rem;
				height: 12.5rem;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="xkh">落霞与孤鹜齐飞，秋水共长天一色</div>
		<div>天生我才必有用，千金散尽还复来</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

3.4组合选择器

要修饰多个标签的时候，而且修饰的样式是一样的，这个时候可以写组合选择器

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组合选择器</title>
		<style>
			/* 要修饰多个标签，而且修饰的样式是一样的，
			这个时候可以写组合选择器 
			*/
			
			/* 组合选择器，用的很多，页面上面很多都是一样的样式
			 这个时候就可以使用组合选择器。使用逗号隔开
			 */
			#div1, .span1, p, footer{
				color: #f30213;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">众里寻他千百度，蓦然回首，那人却在灯火阑珊处</div>
		<span class="span1">但使龙城飞将在，不教胡马度阴山</span>
		<p>	
			桃花坞里桃花庵，桃花庵里桃花仙。桃花仙人种桃树，又摘桃花卖酒钱。
			酒醒只在花前坐，酒醉还来花下眠。半醒半醉日复日，花落花开年复年。
			但愿老死花酒间，不愿鞠躬车马前。车尘马足富者趣，酒盏花枝贫者缘。
			若将富贵比贫贱，一在平地一在天。若将贫贱比车马，他得驱驰我得闲。
			别人笑我太疯癫，我笑他人看不穿。不见五陵豪杰墓，无花无酒锄作田。
		</p>
		<footer>呵呵哒</footer>
		<header>嘻嘻哒</header>
	</body>
</html>

结果如下（示例）：

在这里插入图片描述

3.5层级选择器

标签是可以嵌套标签的，一层一层的找

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层级选择器</title>
		<style>
			/* 一层一层的往下找
			 层级选择器是用空格，每一个标签都是有关系的，子标签的关系
			 */
			/* 我在找标签的时候，为什么不直接找到你呢？而是通过父类的标签找到你
			 但是语法格式有这样的要求，有存在的意义。
			 有的时候层级太深，单纯的直接的去找一个标签，是找不到的，
			 必须通过他的父类的标签，找到他
			 */
			#div1 .div2 div{
				color: red;
			}
			#div4{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div class="div2">
				<div>
					仰天大笑出门去，我辈岂是蓬蒿人
				</div>
			</div>
			<div id="div3">
				<div id="div4">
					磨刀霍霍向猪羊
				</div>
			</div>
		</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

3.6通配选择器

所有的标签都可以生效

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通配选择器</title>
		<style>
			/* 所有的标签都会生效
			 *代表所有的
			 以后会用
			 优先级比较低
			 */
			#div2{
				color: blue;
			}
			* {
				color: red;
				/* 开发的时候一般这样来用通配符
				 设置内边距和外边距为0.目的是让我们整个网页充满整个电脑屏幕的页面
				 */
				margin: 0;
				padding: 0;
			}
			div{
				color: green;
			}
			.div1{
				color: yellow;
			}
			/* 
			优先级：id选择器 > class > 标签 > 通配
			 */
		</style>
	</head>
	<body>
		<div>
			我好困啊！！！
		</div>
		<div class="div1">我想去睡觉</div>
		<div id="div2">我去睡觉吧！！！</div>
		<span>云想衣裳花想容,春风拂槛露华浓 </span>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

3.7伪类选择器

伪类选择器和a标签（超链接）有关系

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 设置链接字体的颜色的
			 伪类选择器的语法格式比较特殊
			 几种状态
			 */
			/* link不能放在最后 */
			
			/* 
			link：访问之前的状态 
			*/
			a:link{
				color: red;
			}
			/* 
			 visited：访问过后的状态
			 */
			a:visited{
				color: pink;
			}
			/* 
			 hover：鼠标悬停的一个状态
			 */
			a:hover{
				color: blue;
			}
			/* 
			 active：鼠标点上去不松手的一个状态
			 */
			a:active{
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="http://www.taobao.com">去淘宝</a>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

四、CSS的属性

color：设置字体的颜色
width：设置宽度
height：设置高度的
background-color：设置背景颜色的

4.1背景图片的css属性

background-coclor 背景颜色
background-image 背景图片会平铺的
background-repeat 平铺的方式
background-attachment 背景图片的动态效果
background-position 图片的位置

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片</title>
		<style>
			body{
				/* 
				background-image：url(背景图片的路径)：背景图片
				会平铺整个页面  网页背景图片
				首先找一张图片放在当前项目的文件夹中，后缀名为jpg
				 */
				background-image: url(1.jpg);
				
				/* 平铺的方式  background-repeat
					repeat-x：横向平铺
					repeat-y：纵向平铺
					no-repeat：不平铺
				*/
			   background-repeat: no-repeat;
			   
				/* 图片的位置  background-position
				 两个值  第一个是x轴的偏移（离左边的距离）
				 第二个是y轴的偏移（离上面的距离）
				 */
				background-position: 6.25rem 12.5rem;
				
				/* 图片的动态效果  background-attachment
				 scroll  图片和文字相对静止
				 fixed   图片相对文字是动态的
				 */
				background-attachment:fixed ;
			}
		</style>
		
	</head>
	<body>
		<p>
			我望着这些灯，灯光带着昏黄色，似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
			但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯，它们，似乎只有它们默默地在散布一点点的光和热，
			不仅给我，而且还给那些寒夜里不能睡眠的人，和那些这时候还在黑暗中摸索的行路人，
			大片的飞雪飘打在我的脸上，我的皮鞋不时陷在泥泞的土路中，风几次要把我摔倒在污泥里，
			我似乎走进了一个迷阵，永远找不到出口。但是我始终挺起身子向前迈步，因为我看见了一点豆大的灯光。
			灯光，不管是哪个人家的灯光，那可以给行人——甚至像我这样的一个异乡人指路。
			我爱这样的灯光，几盏灯甚或一盏灯的微光固然不能照彻黑暗，可是它会给寒夜里一些不眠的人带来一点勇气，一点温暖。
			孤寂的海上的灯塔挽救了许多船只的沉没，任何航行的船只都可以得到那灯光的指引。
			哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯，虽然不曾唤回那个航海远去的弟弟，可是不少捕鱼归来的邻人都得到了它的帮助。
			光驱散了我心灵的黑暗，热促成它的发育。一个朋友说：“我们不是单靠吃米活着的。”
			我自然也是如此。我的心常常在黑暗的海上漂浮，要不是得着灯光的指引，它有一天也会永沉海底。
		</p>
		<p>
			我望着这些灯，灯光带着昏黄色，似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
			但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯，它们，似乎只有它们默默地在散布一点点的光和热，
			不仅给我，而且还给那些寒夜里不能睡眠的人，和那些这时候还在黑暗中摸索的行路人，
			大片的飞雪飘打在我的脸上，我的皮鞋不时陷在泥泞的土路中，风几次要把我摔倒在污泥里，
			我似乎走进了一个迷阵，永远找不到出口。但是我始终挺起身子向前迈步，因为我看见了一点豆大的灯光。
			灯光，不管是哪个人家的灯光，那可以给行人——甚至像我这样的一个异乡人指路。
			我爱这样的灯光，几盏灯甚或一盏灯的微光固然不能照彻黑暗，可是它会给寒夜里一些不眠的人带来一点勇气，一点温暖。
			孤寂的海上的灯塔挽救了许多船只的沉没，任何航行的船只都可以得到那灯光的指引。
			哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯，虽然不曾唤回那个航海远去的弟弟，可是不少捕鱼归来的邻人都得到了它的帮助。
			光驱散了我心灵的黑暗，热促成它的发育。一个朋友说：“我们不是单靠吃米活着的。”
			我自然也是如此。我的心常常在黑暗的海上漂浮，要不是得着灯光的指引，它有一天也会永沉海底。
		</p>
		<p>
			我望着这些灯，灯光带着昏黄色，似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
			但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯，它们，似乎只有它们默默地在散布一点点的光和热，
			不仅给我，而且还给那些寒夜里不能睡眠的人，和那些这时候还在黑暗中摸索的行路人，
			大片的飞雪飘打在我的脸上，我的皮鞋不时陷在泥泞的土路中，风几次要把我摔倒在污泥里，
			我似乎走进了一个迷阵，永远找不到出口。但是我始终挺起身子向前迈步，因为我看见了一点豆大的灯光。
			灯光，不管是哪个人家的灯光，那可以给行人——甚至像我这样的一个异乡人指路。
			我爱这样的灯光，几盏灯甚或一盏灯的微光固然不能照彻黑暗，可是它会给寒夜里一些不眠的人带来一点勇气，一点温暖。
			孤寂的海上的灯塔挽救了许多船只的沉没，任何航行的船只都可以得到那灯光的指引。
			哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯，虽然不曾唤回那个航海远去的弟弟，可是不少捕鱼归来的邻人都得到了它的帮助。
			光驱散了我心灵的黑暗，热促成它的发育。一个朋友说：“我们不是单靠吃米活着的。”
			我自然也是如此。我的心常常在黑暗的海上漂浮，要不是得着灯光的指引，它有一天也会永沉海底。
		</p>
		<p>
			我望着这些灯，灯光带着昏黄色，似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
			但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯，它们，似乎只有它们默默地在散布一点点的光和热，
			不仅给我，而且还给那些寒夜里不能睡眠的人，和那些这时候还在黑暗中摸索的行路人，
			大片的飞雪飘打在我的脸上，我的皮鞋不时陷在泥泞的土路中，风几次要把我摔倒在污泥里，
			我似乎走进了一个迷阵，永远找不到出口。但是我始终挺起身子向前迈步，因为我看见了一点豆大的灯光。
			灯光，不管是哪个人家的灯光，那可以给行人——甚至像我这样的一个异乡人指路。
			我爱这样的灯光，几盏灯甚或一盏灯的微光固然不能照彻黑暗，可是它会给寒夜里一些不眠的人带来一点勇气，一点温暖。
			孤寂的海上的灯塔挽救了许多船只的沉没，任何航行的船只都可以得到那灯光的指引。
			哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯，虽然不曾唤回那个航海远去的弟弟，可是不少捕鱼归来的邻人都得到了它的帮助。
			光驱散了我心灵的黑暗，热促成它的发育。一个朋友说：“我们不是单靠吃米活着的。”
			我自然也是如此。我的心常常在黑暗的海上漂浮，要不是得着灯光的指引，它有一天也会永沉海底。
		</p>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

4.2边框的css属性

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框的css属性</title>
		<style>
			div{
				width: 6.25rem;
				height: 6.25rem;
				/* 
				边框的样式  border-style 
				属性值：solid（实线）等
				 */
				/* border-style: solid; */
				/* 
				边框的颜色 border-color 各种颜色英文单词或16进制数字
				*/
			   /* border-color: red; */
			   /* 
				边框的宽度 boder-width
				*/
			   /* border-width: 0.625rem; */
			   /* 
				边框的简写 border：属性值1  属性值2  属性值3
				包含了边框的样式  颜色  宽度
				一个属性带三个属性值，相当方便
				但是规定border-style是必须写的
				*/
			   border: solid 0.625rem #0000FF;
			   /* 边框是四个边，咱们还可以对单独边进行设置 不用记！！ */
			/*   border-top-style: dashed;
			   border-left-style: dotted;
			   border-right-style: double;
			   border-bottom-style: groove; */
			   /* 设置边框的圆角 border-radius 圆角的半径 不用记 */
			   border-radius: 1.25rem;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

4.3文本和字体的css属性

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本和字体的css属性</title>
		<style>
			#div1{
				width: 62.5rem;
				height: 18.75rem;
				border: 0.625rem solid red;
				/* 设置字体的颜色 color */
				color: blue;
				/* 设置字体的大小 font-size */
				/* font-size: 3.125rem; */
				/* 设置字体的样式 font-style
				 normal  正常的字体
				 italic 斜体
				 */
				/* font-style: italic; */
				/* 设置字体的权重 font-weight 是否加粗*/
				/* font-weight: bold; */
				/* 规定文本的系列()字体族. font-family 楷体 宋体 微软雅黑*/
				/* font-family: 楷体; */
				
				/* 
				字体简写的写法
				font-size和font-family的值是必须写的
				*/
			   font: bold 30px 楷体;
			   
			   /* 文本线的形状 text-decoration
				line-through 中间线
				overline  上划线
				underline  下划线
				none  去除文本线 a标签有下划线 可以使用这去除
				*/
				text-decoration: underline;
				
				/* 文本的缩进 好多文章 第一句话空两格写 */
				/* text-indent: 3.125rem; */
				
				/* 文本的对齐方式 text-align
				left right center */
				text-align: center;
				
				/* 控制行高 line-height
				 文本的高度问题
				 如果想要文本居中对齐,值必须是div的高度
				 */
				line-height: 300px;
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="div1">你不醉我不醉马路牙子谁来睡</div>
		<a href="http://www.baidu.com">点击跳转到百度</a>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

4.4盒子模型（内边距和外边距）

在这里插入图片描述
内边距：
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距</title>
		<style>
			div{
				width: 12.5rem;
				height: 12.5rem;
				border: 0.1875rem solid skyblue;
				background-color: darkred;
				/* 开始加内边距 关键字 padding-XXX
				一个数据的时候:上下左右都是这个值
				两个数据的时候:第一个数据是上下  第二个是左右的内边距
				三个数据的时候: 上  左右  下
				四个数据的时候: 上  右  下  左(顺时针的)
				*/
			   padding: 2.5rem 5rem 10rem 20rem;
			   /* 单独去指定某一边的内边距 */
			/*   padding-left: 1.875rem;
			   padding-right: 2.5rem;
			   padding-top: 3.125rem;
			   padding-bottom: 6.25rem; */
			   
			}
		</style>
	</head>
	<body>
		<div>若非群玉山头见，会向瑶台月下逢。</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

外边距：
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距</title>
		<style>
			div{
				width: 12.5rem;
				height: 12.5rem;
				border: 0.1875rem solid skyblue;
				background-color: darkred;
				/* 外边距margin 
				和内边距一样
				*/
			   margin: 0.625rem 5rem;
			   /* 外边距用的不多,两个div之间的空间变大一些 */
			}
		</style>
	</head>
	<body>
		<div>云想衣裳花想容，春风拂槛露华浓。</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

4.5浮动

代码如下（示例1）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style>
			img{
				/* 浮动 
				如果不浮动的话,图片和其他元素就对不齐
				*/
			   float: left;
			}
		</style>
	</head>
	<body>
		<p><img src="1.jpg" alt="W3School" style="width: 170px;height: 170px;margin-left: 15px;">
		在我们这个星球上，每天都要发生许多变化，有人倒霉了；有人走运了；有人在创造历史，历史也在成全或者抛弃某些人。
		
		可是对大多数人来说，生活的变化是缓慢的。也许人生仅仅有那么一两个辉煌瞬间——甚至一生都可能在平淡无奇中度过……不过，
		细想过来，每个人的生活同样也是一个世界。即使最平凡的人，也要得为他那个世界的存在而战斗。从这个意义上说，
		在这些平凡的世界里，也没有一天是平静的。
		
		一般说来，包工头不喜欢上过学的农村青年。念书人的叫苦精神总是令人怀疑的。但读书的愿望一下了变得如此强烈，使孙少平简直无法控制。
		他思谋：能不能找个办法既能读书又不让人发现呢？只有一个途径较为可靠，那就是他晚上能单独睡在一个地方——那个刚盖起的那一层没有窗的楼房里。
		
		来到“新居”以后他点亮蜡烛，就躺在墙角麦秸草上的那一堆破被褥里，马上开始读一本小说。周围一片寂静，人们都已经沉沉地入睡了。
		带着凉意的晚风从洞开的窗户中吹进来，摇曳着豆粒般的烛光。
		
		这时天已经微微地亮出了白色。他吹灭蜡烛，出了这个没安门窗的房子。他站在院子里一堆乱七八糟的建筑材料上，
		肿胀的眼睛张望着依然在熟睡中的城市，各种建筑物模糊的轮廓隐匿在一片广漠的寂寥之中。他突然感到了一片荒凉的孤独；
		他希望天能快些大亮，太阳快快从古塔山后面露出少女般的笑脸；大街上重新挤满了人群……他很想立刻能找到田晓霞，和她说些什么。
		总之，他澎湃的心潮一时难以平静下来……
		</p>
	</body>
</html>

结果如下（示例1）：
在这里插入图片描述

代码如下（示例2）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动2</title>
		<style>
			/* 如果没有浮动 上下排列 div是一个块级标签 */
			/* 浮动就是把块变成了行进行排列的 
			div是一个块级标签不可能在一行上面的,但是可以通过浮动让他们在一行上面*/
			#div1{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				float: left;
			}
			#div2{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			#div3{
				width: 100px;
				height: 100px;
				background-color: green;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>

结果如下（示例2）：
在这里插入图片描述

清除浮动

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<style>
			/* 清除浮动的目的  把行级标签变成块级标签，刚好和浮动相反 */
			.div1 {
				float: left;
				width: 100px;
				height: 50px;
				margin: 10px;
				border: 3px solid #73AD21;
			}

			.div2 {
				border: 1px solid red;
			}

			.div3 {
				float: left;
				width: 100px;
				height: 50px;
				margin: 10px;
				border: 3px solid #73AD21;
			}

			.div4 {
				border: 1px solid red;
				clear: left;
			}
		</style>
	</head>
	<body>

		<h1>不使用 clear</h1>
		<div class="div1">div1</div>
		<div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div>
		<br><br>

		<h1>使用 clear</h1>
		<div class="div3">div3</div>
		<div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>

	</body>
</html>

结果如下（示例）：
在这里插入图片描述

4.6定位

①固定定位
②相对定位
③绝对定位

①固定定位

position: fixed
top: 0
left: 0

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位</title>
		<style>
			div.fixed{
				position: fixed;
				top: 0;
				left: 0;
				width: 300px;
				border: 6px solid #73AD21;
			}
		</style>
	</head>
	<body>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		<p>设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：</p>
		
		<div class="fixed">
			我是固定的,滑动页面,我也不动
		</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

①相对定位

参照物是亲父节点

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			#div1{
				background-color: #008000;
			}
			#div2{
				background-color: yellowgreen;
			}
			#div2:hover{
				/* 相对div1来定位,最近的那个亲父节点 */
				position: relative;
				background-color: yellow;
				top: 10px;
				left: 10px;
			}
		</style>
	</head>
	<body>
		<div style="background-color: #0000FF;"></div>
		<div id="div1">
			<div id="div2"></div>
		</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

①绝对定位

参照物是body标签

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			/* 和body标签有关系 */
			#div1{
				background-color: blue;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			#div3{
				background-color: green;
				position: absolute;
				top: 10px;
				left: 10px;
			}
			/* div4在div3中
			相对于最近的祖先元素进行定位的
			*/
		   #div4{
			   background-color: red;
			   position: absolute;
			   top: 10px;
			   left: 10px;
		   }
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3">
			<div id="div4"></div>
		</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

4.7对ul标签进行浮动的效果

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对ul标签添加浮动</title>
		<style>
			a{
				text-decoration: none;
				color: red;
				font-size: 30px;
			}
			li{
				float: left;
				padding-left: 30px;
			}
			div{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul type="none">
				<li><a href="#">秒杀</a></li>
				<li><a href="#">优惠卷</a></li>
				<li><a href="#">plus会员</a></li>
				<li><a href="#">品牌闪购</a></li>
			</ul>
			<!-- 这个div必须放在下一行，不能在右边放了，要另起一行 -->
			<div>今天是个好日子，天气不冷不热</div>
		</div>
	</body>
</html>

结果如下（示例）：
在这里插入图片描述

总结

提示：这里对文章进行总结：没有想好总结

小yu别错过

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS样式

文章目录一、CSS是什么？二、CSS的三种引入方式2.1行内样式2.2内联样式2.3外联样式三、CSS的选择器3.1标签选择器3.2class选择器3.3id选择器3.4组合选择器3.5层级选择器3.6通配选择器3.7伪类选择器四、CSS的属性4.1背景图片的css属性4.2边框的css属性4.3文本和字体的css属性4.4盒子模型（内边距和外边距）4.5浮动4.6定位4.7对ul标签进行浮动的效果总结一、CSS是什么？一个网页页面由html，css，javascript组成html相当于一个简陋的
复制链接

扫一扫