web前端–Css练习

所用软件：Hbuilder X

1.div块Css设置各种样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		div{
			/*设置宽高属性，用到的像素单位 px*/
			width:100px;
			height:200px;
			background: red;
			/*设置字体颜色，值有三种表示法：英文颜色名、16进制、*/
		    /*color:red*/
			/*color:#ffffff*/
			color:rgb(0,255,255);
			/*设置字体大小 默认像素：16px,最小像素：12px*/
			font-size: 10px;
			/* 设置字形  谷歌默认：微软雅黑*/
			/* IE默认为宋体 */
			font-family: "宋体";
			/* 行高设置 */
			line-height:200px;
			/* 文本加粗 */
			font-weight:600;
			/* 单行文本左右对齐方式：左 中 由右 */
			text-align: center;
			
			}
			p{
				/* 默认字体大小：16px，最小像素：12px */
				line-height: 20px;
				font-weight: normal;
				/* 设置文本线条： 上划线，上划线，删除线*/
				text-decoration:none;
				/* 设置字体形态 */
				font-style:inherit;
				/* 设置首行缩进 */
				text-indent: 2rem;
				/* 设置每个文字之间的距离 */
				letter-spacing: 1px;
			}
		  a{
			  text-decoration: none;
			  font-size: 16px;
			  color: black;
		  }
	</style>
	<body>
		<div>我是DIV</div>
		<p>千百万年前，人类在劳动的过程中将自身从猿的处境中解放出来;一万年前，人类在劳动的过程完成了农业革命从而走向定居生活;两百年前，人类在劳动的过程中完成了工业革命从而步入现代社会。正是因为劳动在人类历史上发挥了极为重要的作用，因此我的演讲主题乃是热爱劳动。但我要进一步强调，热爱劳动，是要热爱自由劳动! 
与自由劳动相对的，是雇佣劳动。由于机器的推广和分工理念的深入人心，雇佣劳动本身，在现代社会已经失去了任何独立的性质，故而才失去了对人们的任何吸引力。所以一些同学的意见：劳动太苦太累，不如花钱请别人来做。这样的想法，与其说不理解劳动、倒不如说一语道破了现代社会的本质：现代社会的所有上层建筑，都是矗立在雇佣劳动为基础的经济结构之上的。</p>
		<a href="">点击进入</a>
	</body>
</html>

#文本类样式：
	font-size  			设置字体大小，浏览器默认字体大小为16px;可最小设置为12px
	font-weight 		设置字体的样式加粗  或者消除加粗
	font-family 		设置字体的字型  一般设置为微软雅黑
	font-style 			可设置字体为斜体
	line-height 		设置行高,一般还可用来设置单行文本的垂直居中
	text-align  		设置单行文本的左右对齐方式
	color  				设置文本的颜色，值有三种表示方法
	text-decoration 	设置线条  下划线   上划线  删除线
	text-indent			设置段落的首行缩进
	letter-spacing 		设置文字之间的间隙

网页显示效果：

在这里插入图片描述

2.盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
	</head>
	<style>
		*{
            /*外边距*/
			margin: 0px;
            /*内边距*/
			padding: 0px;
		}
		div{
			width: 100px;
			height: 100px;
            /*左浮动*/
			float: left;
		}
		.box1{
			background-color: red;
		}
		.box2{
			background-color: green;
			/* 设置外边距 复合属性可以接不同的几个值 */
			/* 值的用法：接一个值：四周都被隔开 */
			/* 两个值 第一个值控制上下 第二个值控制左右*/
			/* 三个值 第一个值控制上，第二个值控制左右，第三个值控制下*/
			/* 四个值分别控制上右下左 */
			margin:0px;
		}
		.box3{
			background-color: yellow;
			/* 设置内边距 符合属性 */
			/* 值的用法同外边距同 */
			padding: 30px;
			width: 40px;
			height: 40px;
		}
		.box4{
			/* background-color: blue; */
			border-left: 2px red dashed;
		}
		.box5{
			background-color: violet;
			width: 1200px;
		}
	</style>
	<body>
		<div class="box1">div1</div>
		<div class="box2">div2</div>
		<div class="box3">div3</div>
		<div class="box4">div4</div>
		<div class="box5">div5</div>
	</body>
</html>

#盒模型():
组成部份：内容大小(width、height)、内边距(padding)、边框(border)、外边距(margin);

注意padding:元素设置内边距后会自身加大，内容受影响，背景不受影响

内边距(padding)、外边距(margin)复合属性值的用法：
* 接一个值：会控制四个方向.如：margin:0;
* 接二个值：第一个值控制上下，第二个值控制左右.如：margin:0 1;
* 接三个值：第一个值控制上，第二个值控制左右，第三个控制下.如：margin:0 1 0;
* 接四个值：从上开始，顺时针控制  上右下左.如：margin:0 1 0 1;
	
内外边距都可设置单独某一边  left top bottom right,如margin-left：控制左边的外边距
	
border 给元素设置边框， 复合属性接三个值：颜色  大小  线型，例如：border:red 2px solid.
(solid实线,dashed虚线，dotted点线，double 双线) 

可设置单独某一边  left top bottom right,例如border-bottom:red 2px solid.

网页显示效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqXCwBaG-1591716114902)(E:\typoraPic\image-20200609223810545.png)]$

3.overflow的用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>overflow的用法</title>
	</head>
	<style type="text/css">
		div{
            /*宽和高*/
			width: 200px;
			height: 400px;
            /*边线*/
			border: 1px solid red;
			margin: 100px;
            /*
             #overflow属性
            当子级元素大小超出父级元素大小，可以使用此属性做相应处理：全部隐藏 | 以滚动条形式展示
            overflow-x:hidden;x轴溢出隐藏
            overflow-y:hidden;y轴溢出隐藏
            overflow:hidden;x,y轴溢出隐藏
           	overflow: scroll;以滚动条形式展示
            */
			overflow-y:hidden;
			background: red;
            /*鼠标悬停样式*/
			cursor:progress;
		}
	</style>
	<body>
		<div>
			劳动是财富的源泉，但雇佣劳动却不是幸福的源泉。说劳动是财富的源泉，这话不假，可以看到，人类在劳动中不仅实现了自我的解放，还在劳动中创造了所有的物质财富和精神财富，从而在劳动中建立了多姿多彩的现代社会。但雇佣劳动绝对不是幸福的源泉。雇佣劳动的本质，是劳动者作为商品的劳动力在市场的公开出售，因此，给与劳动者的反馈——也就是工资，几乎只限于维持劳动者生活和再生产的必需。同时，在雇佣劳动之下，劳动者通过劳动过程制造的劳动产品，并不属于劳动者自身，这样的劳动产品附加了劳动者劳动凝固的结晶，却于劳动者自身毫无裨益。试问：这样的雇佣劳动除了接受现代社会的层层监视，除了遭受福报的层层奴役，这样的雇佣劳动有什么幸福源泉可言呢? ””
		</div>
		<div>点击</div>
	</body>
</html>

#cursor属性
	设置鼠标 的形状:  hand手势   point可选    wait等待   help帮助....
	每个元素都可设置此属性

网页显示效果：

在这里插入图片描述

4.选择器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选择器练习</title>
	</head>
	<style>
		/* 通配符*<类#<id<行间<！important(不常用) */
		div{
			width: 200px;
			height: 200px;
			margin: 0px;
			padding: 10px;
			background-color: aliceblue;
		}
		.div1{
			border: 2px red solid;
			
		}
		.div2{
			line-height: 100px;
			padding: 0px;
			text-align: center;
		}
		/* 后代选择器 */
		.div3>p{
			background: violet;
		}
		.div4 p{
			color: green;
		}
		/* 交集选择器 */
		h1.haha{
			color: cyan;
		}
		/* 并集选择器 */
		.one,.two{
			color: yellow;
		}
	</style>
	<body>
		<div class="div1">我是DIV1</div>
		<div class="div3">
			<p>我是div3的字集p1</p>
			<p>我是div3的字集p2</p>
			<div>
				<p>我是div3的后代集</p>
			</div>
		</div>		
		<div class="div2">我是DIV2</div>
		<div class="div4">
			<p>我是div4下的P</p>
			<div class="div5"> 
				我是div5下的P
			</div>
		</div>
		<h1 class="haha">你好！</h1>
		<p class="haha">p</p>
		<h3 class="one"> one</h3>
		<h3 class="two">two</h3>
	</body>
</html>

#CSS基本选择器：
	通配符 * <  标签  <  类class  <  ID < 行间 < !important
	
	通配符：选择页面中所有的标签  用*号表示
	
	标签选择：选择对应所有的标签进行样式书写，权重大于通配符，如：div、p、form...
	
	类名选择：给标签元素取名，用class属性 值就是对应的名字(不能以数字开头)
			用点号加名字选择写样式
			一个元素上可以取多个类名,中间用空格隔开
			如果权重相同，那么会以代码加载顺序，后面的覆盖前面
			多个元素可以取相同类名
			
	id选择: 给标签元素通过属性名id取名字，值具有唯一性, 用#加名字选择
			自己写样式时很少到ID   ID更多会给JS用
			
	行间设置：权重大于ID 类名  标签  通配符
	
	!important:手动设置最高权重 ,直接样式后加这句，中间用空格隔开
				真用到这一步了，那么证明你对权重理解不到位
#CSS高级选择器:
	后代选择：父级和后代级用空格隔开
	子代选择：父级和子级用大于号>
	交集选择：一般使用标签加名字  如 ：h1.haha  选择类名为haha的h1标签
	并集选择：几个元素共同作用同一或多条样式, 元素之间用逗号隔开

网页显示效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9EynMpm8-1591716114920)(E:\typoraPic\image-20200609224611627.png)]$

5.图文对齐方式

在src下新建一个img文件夹，再到网站上下载一张图片放到该文件夹下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图文对齐方式</title>
	</head>
	<style type="text/css">
		div{
			border: 1px red solid;
		}
		img{
            /*
            vertical-align: bottom;以图片底部为对齐为基准线
            vertical-align: baseline;以图片baseline为对齐为基准线
           	vertical-align: middle;以图片中为对齐为基准线
            vertical-align: top;以图片顶部为对齐为基准线
            */
			vertical-align: baseline;
		}
	</style>
	<body>
		<!-- 图文对齐 -->
		<div id="">
			<span>我是span</span>
			<img src="img/小黄人相册/1.jpg" >
		</div>
	</body>
</html>

# vertical-align属性:
	针对于图片设置的一个属性
	默认基线对齐  baseline
	基本用法：设置文字和图片对齐：上 、中、基线、下;
	
	高级用法:可解决图片下边有间隙的问题
			img可以看成是一文字类型,具有对齐方式:上 、中、基线、下
			给图片设置此属性，除了baseline值以外，都可以解决问题

网页展示效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95nghTvA-1591716114926)(E:\typoraPic\image-20200609224938738.png)]$

6.浮动属性练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动属性练习</title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: left;
		}
		p{
			width: 130px;
			height: 130px;
			background-color: red;
			float: left;
		}
		span{
			background-color: pink;
			float: left;
			width: 200px;
			height: 200px;
		}
	</style>
	<body>
		<div>我是DIV</div>
		<p>我是P</p>
		<span>我是span</span>
	</body>
</html>

网页展示效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FcltDRfb-1591716114931)(E:\typoraPic\image-20200609231417692.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动练习</title>
	</head>
	<style>
		#Box1{
			width: 400px;
			background-color: red;
			border: yellow 2px solid;
			/* 解决不能自动高度不能撑高的问题 */
			/* 溢出隐藏，再有些的情况下会将字集元素定位 这种方法就不适用 */
			/* overflow: hidden; */
		}
		/* 最终解决方法:伪类 */
		#Box1:after{
			content:'';display: block;clear:both;
		}
		p{
			width: 50px;
			height: 50px;
			margin: 10px;
			background-color: green;
			float: left;
		}
	</style>
	<body>
		<div id="Box1">
			<p>我是p1</p>
			<p>我是p2</p>
			<p>我是p3</p>
			<p>我是p4</p>
			<p>我是p5</p>
			<p>我是p6</p>
			<p>我是p7</p>
			<p>我是p8</p>
			<p>我是p9</p>
			<p>我是p10</p>
			<p>我是p11</p>
			<p>我是p12</p>
			<p>我是p1</p>
			<p>我是p2</p>
			<p>我是p3</p>
			<p>我是p4</p>
			<p>我是p5</p>
			<p>我是p6</p>
			<p>我是p7</p>
			<p>我是p8</p>
			<p>我是p9</p>
			<p>我是p10</p>
			<p>我是p11</p>
			<p>我是p12</p>
		</div>
	</body>
</html>

网页展示效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CDkCCjoz-1591716114936)(E:\typoraPic\image-20200609231439143.png)]$

#CSS浮动属性
	
	在标准文档流中，很多时候需要脱标来进行页面布局
	脱标三种方法： 
			float(浮动)   
			absolute(绝对定位)  
			fixed(固定定位)
	脱标特性：元素无行块之分，可设置宽高，可并排（并排的元素都要设置浮动）
	元素无论左浮还右浮都在父级大小之内
	
	float特性：子级元素设置float属性后不能撑高自动高度的父级
		解决问题：让子级浮动了元素也能撑自动高的父级
		解决办法：伪类
		.big:after{
		    content: ''; display: block; clear: both;
		}
		float属性可解决空白折页问题和图片左右之间有间隙

7.块、行、行内元素练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块、行、行内元素练习</title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background:red;
			display: inline;
			margin: 0px;
		}
		/*标准的文档流把标签分为三类：块元素、行内元素、行内块元素
		 块元素（div p h系列 ul li ol）：独占一行，可设置宽高，如果不设置宽，那么会继承父级的100%，高由内容撑高 
		 行内元素(span a i)：不独占一行，不可设置宽高，大小就是内容大小 
		 行内块元素(img input)：不独占一行，可设置宽高 */
	</style>
	<body>
	<div>我是DIV1</div>
	<div>我是DIV2</div>
	<div>我是DIV3</div>
	<div>我是DIV4</div>
	</body>
</html>

演示效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVibua7t-1591716114940)(E:\typoraPic\image-20200609231803572.png)]$

8.背景元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>背景元素</title>
	</head>
	<style>
		.box{
			width: 700px;
			height: 800px;
			margin: 50px;
			border: 2px solid green;
			/* 以颜色做背景 颜色三种表示法：英文 16进制 rgb() */
			/* background-color: rgb(0,0,0); */
			
			/* 以图片作为背景，与直接加一张图片有区别 */
			/* background-image: url(img/1.jpg);
			 */
			/* 设置图片不平铺 */
			/* background-repeat: no-repeat; */
			
			/* 设置背景图片的大小 接两个值 第一个值宽 第二个值高*/
			/* cover 等比拉伸或缩放（具体看图片的大小）到最后一条边碰到边为止 contain相反 */
			/* background-size: contain; */
			
			/* 背景图片定位 */
			/* background-position:left center; */
			
			/* 设置背景固定 */
			/* background-attachment: fixed; */
			
			/* 符合写法 */
			background: pink url(img/3.jpg) no-repeat 30px 100px;
			background-size: 500px 500px;
			background-attachment: fixed;
		}
	</style>
	<body>
		<div class="box">我是DIV</div>
	</body>
</html>

网页展示效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJ4GDqNk-1591716114945)(E:\typoraPic\image-20200609232121574.png)]$

# CSS背景属性:
	在一个元素大小内，可以加入背景，这个背景可以是纯色，还是一张图片
	
	可分拆：
		background-color  设置颜色，三种表示法
		background-image  设置图片为背景
		background-repeat 设置平铺方式，默认XY都平铺   no-repeat repeat-x repeat-y
	
		background-size   设置背景图片大小，接两个值，第一个为宽，第二个为高
						  还可以拉伸图片：cover(等比缩放,最后一条边碰到停止)
						  还可以拉伸图片：contain(等比缩放,第一条边碰到停止)
						  
		background-position  接两个值，第一值为X轴，第二个为Y轴
							 默认为左上角0 0 点
							 值还可以是方位词  left right top bottom center 
	
	复合写法：
		background : 颜色  图片 平铺方式  定位