web前端（css3）

文章目录

前言

web页面前端可以分为三个阶段，一个是html（页面结构），css（页面美化），JavaScript（和用户产生交互效果）。css就是相当于一个美颜效果，把一个普通的网页，变的更加美观好看，让元素待在该待的位置。可以改变字体颜色，大小，或者背景颜色，或者元素直接的间距，背景图片等等操作…

1.css简介以及引入方式

css的优缺点
css优点：
1.丰富的样式描述
2.样式和结构的分离，便于维护的管理
3.减少代码量，加快页面的加载
4.样式代码的复用性强
5.多个页面可以使用同一个css样式表

css缺点：
1.浏览器对css支持程度不一样
css语法格式：
1. “属性名:“属性值”
“color: red;”
2.属性值是对属性的相关描述
3.属性名必须是一个合法有标识符
4…css不用区分大小写,推荐使用小写
5.多个样式用”;"隔开

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="zxw" style="color: red;font-size: 25px;">
			元素内容
		</div>
		
	</body>
</html>

文字颜色：
color: 合法的颜色值;

文字大小
font-size: 合法的尺寸单位;

文字加粗
font-weight: 600;

尺寸样式
宽度设置 width: 合法的尺寸单位;
高度设置 height: 合法的尺寸单位;
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="" style="color: RED;FONT-SIZE: 20px; font-weight: 600;width: 200px; height: 150px;">
			文本内容1
		</div>
		<div  id="" style="color: red;font-size:20px;">
			文本内容2
		</div>
	</body>
</html>

css样式的引入方式：
大概可以分为四种：
1.行内样式
2.内部样式
3外部样式
4.导入样式
详细我们来看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导入样式</title>
		<link rel="stylesheet" href="one.css" />
	</head>
	<body>
	
	<div>文本内容</div>
		
		
	</body>
</html>

在这里插入图片描述
css注释
合理使用注释可以使代码更清晰,更易修改（/* 需要被注释的内容*/）
注意：要养成一个写注释的好习惯，不然时间久了自己的代码自己都看不懂
2.css注释快捷键:“ctrl+/”

在这里插入图片描述

2.css优先级以及特性

css继承性：

1.后代元素继承祖先元素的样式
2.只能继承文字，文本样式，其它样式不能继承
3.color,text-开头，font-开头，line-开头可以继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css继承性</title>
		<style type="text/css">
			
			body{
     
     
				color: blue;
			}
		</style>
	</head>
	<body>
		
		<div>
			我是div中的文字<br />
			<span>我是div中的span元素</span>
		</div>
		
	</body>
</html>

css叠加性和层叠性：

css叠加性：

当多个选择器选中的是同一个（类）元素时，加的是不一样的样式，所有选择器都会生效

css层叠性：

当多个选择器选中的是同一个（类）元素时，加的是一样的样式，只有一个选择器都会生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css叠加性和层叠性</title>
		<style type="text/css">
			span{
     
     
				color: white;
			}
			.document{
     
     
				background-color: #008000;
			}
		</style>
	</head>
	<body>
	
		<span class="document">文本内容</span>

	</body>
</html>

css选择器优先级
注意点：选择的范围越精确，优先级就最高。

优先级从低到高：继承样式 - 浏览器预设的样式 -通用选择器 - 标签选择器 - 类选择器 -id选择器

当优先级相同时，后写的样式会覆盖先写的样式

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css优先级</title>
		
		<style type="text/css">
			#idOne{
     
     
				color: green;
			}
			.classOne{
     
      color: #000074;}
			a{
     
     
				color: red;
			}
			
			span{
     
     
				color: #009688;
			}
			div{
     
     
				color: #005500;
			}
		</style>
	</head>
	<body>
		
		<div>
			<a href="" class="classOne" id="idOne">a元素</a>
			<br />
			<span>span元素</span>
		</div>
			
	</body>
</html>

3.css选择器

选择器至关重要，因为当你要给某个元素设置样式的时候，你总要选中这个元素，你写的样式效果才会生效，告诉你编辑器你这个样式是加个那个元素的。

基本选择器

标签选择器

标签选择器:
1.通过标签选择元素
2.无论标签隐藏有多深，标签选择器都可以选中
3.标签选择器，选择的是所有而不一个元素
4.所有的标签都可以是选择器

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style type="text/css">
			div{
     
     
				font-size: 30px;
				color: blue;
				
			}
			p{
     
     
				color: red;
				font-weight: 600;
			}
		</style>
	</head>
	<body>
	
		<div >
			div元素
		</div>
		<p>p元素</p>
		<div >
			<div >
				div元素
					<p>p元素</p>
			</div>
		</div>
		
	</body>
</html>

ID选择器：

1.id属性是标准属性，任何元素都可以有id属性。
2.使用id选择器时，要在id值前加上"#"
3.D选择器只能选中一个元素，同一个页面要保证id的唯一性。不同元素有相同id,也属于非法。
4.定义id时，必须要以字母开头，可以包含数字，下划线等符号
5.定义id时，不要与标签名相同

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#one{
     
     
				color: red;
			}
			#two{
     
     
				color: green;
			}
		</style>
		
	</head>
	<body>
			<ul>
				<li id="one">我要自学网1</li>
				<li id="two">我要自学网2</li>
				<li>我要自学网3</li>
				<li>我要自学网4</li>
				<li>我要自学网5</li>
				<li>我要自学网6</li>
			</ul>
		
	</body>
</html>

类选择器

1.class属性是标准属性，任何元素都可以有class属性。
2.使用class选择器时，要在class值前加上"."
3.class选择器可以被多个元素共同使用,不同元素可以有相同的class值
4.同一个元素可以有多个类名，要使用空格隔开
5.尽量使用类选择器，而不是id选择器

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one{
     
     
				color: red;
				
			}
			.two{
     
     
				font-size: 30px;background-color: #007AFF;
			}
		</style>
		
	</head>
	<body>
			<div>
				<div class="one">文本内容1</div>
				<p class="one two">文本内容2</p>
				<span class="one">文本内容3</span>
			</div>
			<strong class="two">文本内容4</strong>
		
	</body>
</html>

通用选择器（*）
1.可以选中页面中的所有元素。
2.使用通配符"*"进行选择
3.可以进行一些样式重置react（后面会介绍到）

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
     
     
				color: red;
			}
		</style>
	</head>
	<body>

			<div>文本内容1</div>
			<span>文本内容2</span>
			<p>文本内容3</p>
			<strong>文本内容4</strong>
			<br />
			<a href="">文本内容5</a>
	</body>
</html>

高级选择器

后代选择器：
1.描述是一种祖先结构关系，并不一定是父子关系
2.祖先和后代之间要有一个空格隔开
3.标签选择器，ID选择器，class选择器都可以使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代选择器</title>
		<style type="text/css">
			#divone .ulone{
     
     
				color: red;
			}
			#divtwo ul .five{
     
     
				background-color: #0000FF;
			}
			
		</style>
	</head>
	<body>
	
		<div id="divone">
			<ul class="ulone">
				<li class="one">文本元素1</li>
				<li class="two">文本元素2</li>
				<li class="three">文本元素3</li>
				<li class="four">文本元素4</li>
			</ul>
		</div>
		<div id="divtwo">
			<ul class="yltwo">
				<li class="five">文本元素1</li>
				<li class="sex">文本元素2</li>
				<li class="seven">文本元素3</li>
				<li class="eight">文本元素4</li>
			</ul>
		</div>		
	</body>
</html>

并集选择器：
1.同时选中多个元素
2.选择时要用“,”隔开。
3.标签选择器，ID选择器，class选择器都可以使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>并集选择器</title>
		<style type="text/css">
			div,header,.classOne{
     
     
				color: red;
			}
		
		</style>
		
	</head>
	<body>
	
		<div>文本内容1</div>
		<header><p id="idOne">文本内容2</p></header>
		<p class="classOne">文本内容3</p>
	</body>
</html>

序列选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*第一子元素选择器:*/
			h3:first-child{
     
     
				/*选择的是h3元素的父元素中,是h3的第一个子元素,必须同时满足两种条件才能选中*/
				color: red;
			}
			
			/*最后子元素选择器:*/
			div:last-child{
     
     
				/*选择的是div元素的父元素中,是div的最后一个子元素,必须同时满足两种条件才能选中*/
				color: blue;background-color: #55aaff;
			}
			
			/*序列选择器一般用在列表中*/
			
		</style>
	</head>
	<body>		
		<h3>文本内容1</h3>
		<h3>文本内容2</h3>
		<p>文本内容3</p>
		<p>文本内容4</p>
		
				<div >
					<div>文本内容5</div>
					<div>文本内容6</div>
				</div>
				
	</body>
</html>

nth-child选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>nth-child选择器</title>
		<style type="text/css">
			/*选择的是li的父元素中的第5个li子元素*/
			/* li:nth-child(6){color: red;} */
			
			/*选择的是li的父元素中的奇数个li子元素*/
			li:nth-child(2n+1){
     
     color: blue;}
			
			/*选择的是li的父元素中的偶数个li子元素*/
			li:nth-child(2n){
     
     color: green;}
		</style>
	</head>
	<body>
		<ul>
			<li>文本内容1</li>
			<li>文本内容2</li>
			<li>文本内容3</li>
			<li>文本内容4</li>
			<li>文本内容5</li>
			<li>文本内容6</li>
			<li>文本内容7</li>
			<li>文本内容8</li>
			<li>文本内容9</li>
			<li>文本内容10</li>
		</ul>
				
	</body>
</html>

nth-child选择器：
注意:n为0开始自增一直到n数值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>nth-child选择器</title>
		<style type="text/css">
			
			/*选择的是li的父元素中的前6个li子元素*/
			li:nth-child(-n+6){
     
     color: red;}
			
			/*选择的是li的父元素中的从第4个li子元素开始的所有li子元素*/
			/*li:nth-child(n+4){color: red;}*/
			
			/*选择的是li的父元素中的,从第3个开始，第10个结束的li子元素*/
			/*li:nth-child(n+3):nth-child(-n+10){color: red;}*/
			
			/*选择的是li的父元素中的,从1,4,7....li子元素*/
			/* li:nth-child(3n+1){color: red;} */
		</style>
	</head>
	<body>
		<ul>
			<li>文本内容1</li>
			<li>文本内容2</li>
			<li>文本内容3</li>
			<li>文本内容4</li>
			<li>文本内容5</li>
			<li>文本内容6</li>
			<li>文本内容7</li>
			<li>文本内容8</li>
			<li>文本内容9</li>
			<li>文本内容10</li>
			
		</ul>
			</body>
</html>

4.伪类和伪元素：

伪类：元素不同状态表现不同样式
静态伪类：
link:超链接点击之前的样式
visited:超链接点击之后的样式

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>静态伪类</title>
		<style type="text/css">
			a:link{
     
     
				color: red;
			}
			a:visited{
     
     
				color: green;
			}
		</style>
	</head>
	<body>
			
		<a href="http://www.baidu.com">百度</a>

	</body>
</html>

动态伪类：能用任何元素：

hover:鼠标放到元素上的状态，最常用的状态
active:点击时没有松开鼠标的状态，用得不多
focus:输入框在获得焦点时的状态

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 鼠标移入后的样式 */
			div:hover{
     
     
				color: blue;font-size: 20px;font-weight: 600;
			}
			/* 鼠标点击后的样式 */
			div:active{
     
     
				color: red;
			}
			/*  当input输入框获得焦点的时候样式*/
			input:focus{
     
     
				color: green;
			}
		</style>
	</head>
	<body>
		
		<div>文本内容</div>
		
		<input type="text"  value="请输入..." />
		
	</body>
</html>

伪元素：文档结构中没有出现的元素

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素</title>
		<style type="text/css">
			div::first-letter{
     
     
				color: red;
			}
			
			div::first-line{
     
     
				color: blue;
			}
		</style>
	</head>
	<body>
		<!--伪元素使用“::”-->
		<!--::first-letter  选择的是div元素中第一个文字-->
		<!--::first-line   选择的是div元素中第一行文字,会根据浏览器的缩放自动调整-->
				<div>
			<p>风急天高猿啸哀，渚清沙白鸟飞回。</p>
			<p>无边落木萧萧下，不尽长江滚滚来。</p>
			<p>万里悲秋常作客，百年多病独登台。</p>
			<p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p> 
		</div>
	</body>
</html>

伪元素：在指定元素内容前或者后面添加内容
::before 在元素内容之前添加新内容。必须配合content使用
::after 在元素内容之后添加新内容。必须配合content使用
可以把伪元素当成元素来使用
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素</title>
		<style type="text/css">
			div::before{
     
     
				content: "www.baidu.con";
			}
			
			div::after{
     
     
				content: "www.baidu.com";
				color: red;
				font-size: 12px;
					}
			div{
     
     
				background-color: #007AFF;
			}
		</style>
	</head>
	<body>
		
		
		<div>
			文本内容
		</div>
</body>
</html>

5.字体属性

a.字体大小的设置
font-size: 合法的尺寸单位;
可以使用所有css尺寸单位，常见单位有：px em rem % …
当没有设置字号时，浏览会添加默认字号，一般是16px
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字号</title>
	</head>
	<body>
		
		<div>文本内容</div>
		<div style="font-size: 15px;">文本内容1</div>
		<div style="font-size: 1em;">文本内容2</div>
		<div style="font-size: 1.5rem;">文本内容3</div>
		<div style="font-size: 200%;">文本内容3</div>
		
		
	</body>
</html>

b.字体设置
font-family:‘字体1’,‘字体2’;
不同设备，不同系统，默认字体不一样，当前电脑的默认字体是“微软雅黑”
当设置的字体没有生效，会显示默认字体
可以设置多种字体，用“,”隔开。当浏览器不支持第1个字体，就会尝试下一个，直到找到可识别的字体。如果都不能识别，会按设备默认字体输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体</title>
		
	</head>
	<body>
	
		
		<div>文本内容</div>
		<div style="font-family:'宋体';">文本内容1</div>
		<div style="font-family: '黑体','宋体';">文本内容2</div>
		
		
		
	</body>
</html>

c.文字颜色
1.color值: 合法的颜色值 ;
2.合法的颜色值有:颜色名 16进制颜色值 RGB颜色值 RGBA颜色值
3.当文字没有设置颜色时，默认为黑色
4. 颜色名可能不被一些浏览器接受，使用16进制颜色值，或RGB颜色值能被所有浏览器识别并正常显示
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字颜色</title>
	</head>
	<body>
		
		
		<div>文本内容</div>
		<div style="color: red ;">文本内容1</div>
		<div style="color: #0000FF;">文本内容2</div>
		<div style="color: rgb(122,89,223);">文本内容3</div>
		<div style="color: rgba(122,89,223,0.8);">文本内容4</div>
		
		
	</body>
</html>

d.字体粗细
语法： font-weight: 字体粗度值;
字体粗度值:
1.数字 100-900 没有单位一般设置成整百数字越大，字体越粗
2.bold 表示粗体相当于数字700
3.bolder 表示特粗体比继承字体粗
4.lighter 表示特细体比继承字体细
5.normal 表示正常字体粗细相当于数字400
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体粗细</title>
	</head>
	<body>
		<!--字体粗细：-->
	
		
		<h4  style="font-weight: normal;">文本内容</h4>
		<div>文本内容</div>
		<div style="font-weight: 100;">文本内容1</div>
		<div style="font-weight: 400;">文本内容2</div>
		<div style="font-weight: 700;">文本内容3</div>
		<div style="font-weight: 900;">文本内容4</div>
		<div style="font-weight: bold;">文本内容5</div>
		<div style="font-weight: bolder;">文本内容6</div>
		<div style="font-weight: lighter;">文本内容7</div>
	</body>
</html>

e.字体风格
font-style: 样式取值;
样式取值:
1.italic 表示倾斜的字体
2.oblique 表示中间状态的倾斜，偏倾斜字体
3.normal 表示正常的字体,经常用来重置字体样式
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体风格</title>
	</head>
	<body>
	
		<div>文本内容</div>
		<div style="font-style: italic;">文本内容1</div>
		<div style="font-style: oblique;">文本内容2</div>
		<i style="font-style: normal;">文本内容3</i>
		<br />
		<em style="font-style: normal;">文本内容4</em>
	
	</body>
</html>

6.文本属性

文本不等同于文字，可以简单理解成包含行级元素，行内块级元素

字体间距
letter-spacing: 合法的尺寸单位或normal;
可以设置负值,当设置成负值时，字间距会比正常间距小
normal:正常的字间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字间距</title>
		<style type="text/css">
			div{
     
     
				letter-spacing: 10px;
				/* letter-spacing: -4px;
				letter-spacing: normal; */
			}
		</style>
	</head>
	<body>
	
		<div>文本内容</div>
		
	</body>
</html>

行高

行高可以控制行与行之间的间距，但不是行间距。控制的是一行的高度
line-height: 值;
1.合理的行高 normal 默认值
2.尺寸单位固定的行高
3.数字当前字体尺寸的倍数来设置行高
4.百分比当前字体尺寸的百分比来设置行高
5.行高经常用来使单行文本垂直居中（行高和文本的高度一样就可以使单行文本居中）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行高</title>
		<style type="text/css">
			div{
     
     
				font-size: 20px;
				
				line-height:1.5;
			}
			p{
     
     
				width: 200px;height: 100px;background: #00AEFF;
				line-height: 100px;text-align: center;
			}
		</style>
	</head>
	<body>
				
		<div>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内
		容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div>
		
		<p>文本内容</p> <!-- 使p元素中的文字垂直居中 -->
		
	</body>
</html>

首行缩进
text-indent: 尺寸单位;
1.默认值： 0
2.使用em作为首行缩进的尺寸单位，1em就表示一个汉字的长度
3允许使用负值，首行会缩进到左边
4.使用百分比，基于父元素宽度的百分比进行缩进,不建议使用
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首行缩进</title>
		<style type="text/css">
			p{
     
     
				/*font-size: 20px;*/
				/*text-indent: 40px;*/
				text-indent: 2em;
				/*text-indent: -2em;*/
				/*text-indent: 50%;*/
			}
		</style>
	</head>
	<body>
		<!--首行缩进-->
	<p>岁月告诉我：风起的时候看落叶；下雨的时候闻雨香 ;春浓的时候看花开；飘雪的季节荡涤心灵——心事澄明，光明坦荡。岁月告诉我：总有风起的早晨，总有绚丽的黄昏。把握自己，活在当下，开心过好每一天。幸福不是你能左右多少，而是时刻伴你左右。 　　岁月告诉我：人生就是一个哭着走来，笑着离去的过程。漫漫人生路，透着沧桑，含着沉香。似那梨花，风吹雨打，洗尽铅华，清韵犹存；似那画卷，经年以后，褪尽色彩，依旧斑斓；似那高山流水，蜿蜒缠绵，时而波涛澎湃，时而溪水潺潺，沟沟坎坎，深深浅浅。 岁月告诉我： 生命中的遇...</p>
	
	</body>
</html>

文本对齐方式：
1.left 默认值，文本排列到左边
2.right 文本排列到右边
3.center 文本排列到中间
4.justify 文本两端对齐，对单行文本无效。不建议使用
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平排列方式</title>
		<style type="text/css">
			div{
     
     
				width: 300px;height: 40px;
				line-height: 40px;background: #9ACD32;
				margin: 100px auto;
				text-align: center;
				/*text-align: right;*/
				/*text-align: center;*/
				/* text-align: justify; */
			}
		</style>
	</head>
	<body>
		
		<div>文本内容<p style="display: inline-block;width: 100%;"></p></div>
	</body>
</html>

垂直对齐方式
垂直对齐方式：对行块元素，行内块级元素，表格元素有效
vertical-align: 值;
1.baseline 默认值，对齐父元素基线
2.sub 对齐下标
3.super 对齐上标
4.top 顶部对齐
5.bottom 底部对齐
6.middle 垂直居中对齐
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>垂直对齐方式</title>
		<style type="text/css">
			.a{
     
     
				font-size: 40px;
				background: red;vertical-align: middle;
			}
			.b{
     
     
				font-size: 20px;
				background: #2E8B57;
				/*vertical-align: baseline;*/
				/*vertical-align: sub;*/
				/*vertical-align: super;*/
				/*vertical-align: top;*/
				/*vertical-align: bottom;*/
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		

		
		<div>
			<span class="a">19.9</span>
			<span class="b">元</span>
		</div>
		
		
	</body>
</html>

文本修饰（设置多个值时，只有一个会生效）
text-decoration: none; 可以去掉a元素下划线
text-decoration: 值;
1.underline 定义下划线
2.overline 定义上划线
3.line-through 定义删除线
4.blink 闪烁的文字效果当前所有浏览器都不支持，低版本的火狐浏览器支持。不建议使用
重要：默认值 none 表示没有
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本修饰</title>
		<style type="text/css">
			p{
     
     
				text-decoration: underline;
				/* text-decoration: overline; */
				/* text-decoration: line-through; */
				/* text-decoration: blink; */
			}
			a{
     
     
				text-decoration: none;
			}
		</style>
	</head>
	<body>

		
		<p>文本内容</p>
		
		<a href="#">文本内容</a>
		
	</body>
</html>

文本阴影
text-shadow: 值1 值2 值3 值4;
值1:水平阴影位置,必须。正值时，阴影在右，负值时，阴影在左
值2:垂直阴影位置,必须。正值时，阴影在下，负值时，阴影在上
值3:阴影模糊距离，可选值
值4：阴影颜色，合法颜色值。可选。默认和文字颜色相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本阴影</title>
		<style type="text/css">
			p{
     
     
				/*color: red;*/
				font-size: 30px;font-weight: 700;color: #0000ff;
				/*text-shadow: 2px 3px 2px black;*/
				
				text-shadow: 2px 2px 1px  #ff0000;
			}
		</style>
	</head>
	<body>

		<p>文本内容</p>
		
	</body>
</html>

7.css基础理论

元素类型特点
块级元素：
1.可以设置宽高
2.不能和其它元素呆在一行
3.当没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定
4.当设置有宽高时，元素的宽高就是设置的值

行级元素：
1.不可以设置宽高,设置的宽高无效
2.可以和其它元素呆在一行
3.宽高由元素内容决定

行内块级元素：
1.可以设置宽高
2.可以和其它元素呆在一行
3.当没有设置宽高时，宽高由元素内容决定
4.当设置有宽高时，元素的宽高就是设置的值

元素类型转换

任何元素都可以进行类型转换,元素类型之间可以相互转换
元素类型转换不会影响元素自身的性质

1.转块级元素display: block;
2.转成行级元素display: inline;
3.转成行内块级元素display: inline-block;
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素类型转换</title>
		<style type="text/css">
		
			.one{
     
     
				display: block; width: 200px;height: 200px;background-color: #0077AA;
			}
			.two{
     
     
				 width: 200px;height: 200px;background-color: #55ff00;
			}
		</style>
	</head>
	<body>
		
		<span class="one">转换为块级元素的span可以设置宽高</span>
		<br>
		<span class="two">span原本是行级元素，未经转换成块级元素设置的宽高是不会生效的</span>
		
	</body>
</html>

元素显示和隐藏
1. 元素隐藏：display: none;
页面结构仍然存在
元素所占空间会被隐藏

2.元素显示
display: block;块级元素显示
display: inline;行级元素显示
display: inline-block;行级元素显示
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素显隐</title>
		<style type="text/css">
			div{
     
     
				background: green;
				width: 200px;
				height: 80px;
				display: none;
			}
			/* .one{
				display: block;
			}
			span{
				background: red;
				display: none;
			}
			.two{
				display: inline; 
			}*/
		</style>
	</head>
	<body>
			
		<div class="one">文本内容1</div>
		<span class="two">文本内容2</span>
	</body>
</html>

尺寸单位：
像素：px(用的最多)
1.屏幕上的一个点作为单位，稳定精确
2.用得最多的尺寸单位

em单位
1.em是以自身字体大小作为参考,是自身字体大小的倍数
2.当自身字体大小改变时，em会跟着改变

rem单位
1.rem是以根元素(html元素)字体大小作为参考,是根元素字体大小的倍数
2.当根元素字体大小改变时，rem会跟着改变

%单位（用的也比较多）
1.%是以父元素作为参考,是父元素的百分比
2.当父元素改变时，使用%作单位的子元素会跟着改变

颜色值的表示方式
颜色名称：
1.html和css规范中定义了147种可用的颜色名
2.颜色名用得少

16进制颜色值:

1.#rrggbb ,rr(红色)，gg(绿色)，bb(蓝色)
2.16进制整数规定颜色成分，所有值必须介于 00与ff之间
3.用得多

rgb颜色值

1.通过定义三种（红，绿，蓝）颜色的强度来定义颜色
2.所有值必须介于 0到255之间
3.rgb(红,绿,蓝);

rgba颜色值

1.在rgb颜色值基础上增加了透明度
2.a:alpha表示透明度，取值0-1
3.a取值为0时，表示完全透明，取值为1时，表示完全不透明.值越小，透明度越高

7.背景属性

背景颜色
background-color: 合法的颜色值;
1.合法的颜色值：颜色名，16进制颜色值，rgb颜色值，rgba颜色值
2.如果没有设置背景颜色，那么背景就是透明。默认值：transparent
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景颜色</title>
		<style type="text/css">
			div{
     
     
				width: 100px; height: 100px;line-height: 100px; text-align: center;
				background-color: #ff5500;
				/* background-color: rgb(255,32,58);
				background-color: rgba(255,15,255,0.3);
				background-color: red; */
			}
		</style>
	</head>
	<body>
		
		<div>
			文本内容
			
		</div>
		
	</body>
</html>

背景重复：

背景图片：
background-image: url(图片路径)-
1.图片路径：相对路径绝对路径
2.默认值：none 表示没有背景图片
3.背景颜色和背景图片可以同时设置

background-repeat: 值;
1.repeat 默认值表示重复
2.no-repeat 表示不重复
3.repeat-x 表示水平方向重复
4.repeat-y 表示垂直方向重复
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景重复</title>
		<style type="text/css">
			body{
     
     
				background-image:url(https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2685177128,4134246955&fm=26&gp=0.jpg) ;
				/* background-repeat: repeat ; */
				background-repeat: no-repeat ;
				/*background-repeat: repeat-x ;*/
				/* background-repeat: repeat-y ; */
			}
			

		</style>
	</head>
	<body>
	
	</body>
</html>

背景尺寸
背景尺寸
background-size:宽度高度 ;
1.尺寸单位：背景图片的宽度和高度就是一个固定的值
2.% 以父元素的百分比来设置背景图片的宽度和高度
3. contain 把背景图片扩展至最大尺寸，使宽度或高度完全适应内容区域.保持原来的宽高比例
4. cover 把背景图片扩展至足够大，使背景图片完全覆盖背景区域。背景图片的某些部分无法显示在元素区域中。保持原来的宽高比例
5.当只设置一个值时，第2个值是auto。图片不会变形，会保持原来的宽高比例
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景尺寸</title>
		<style type="text/css">
			div{
     
     
				width: 300px;height: 200px;
				background-color: #0000ff;
				background-image: url(https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1968671538,458150192&fm=26&gp=0.jpg);
				background-repeat:no-repeat ;
				background-size:300px 100px ;
				/* background-size:10em 5em ; */
				/* background-size:100% 100% ; */
				/* background-size: contain; */
				/* background-size: cover; */
				/* background-size: 100% auto; */
				/* background-size: 100%; */
				
			}
		</style>
	</head>
	<body>
		
		
		<div></div>
		
	</body>
</html>.

背景定位
background-position:X(水平位置) Y(垂直位置);

当只设置一个值时，另一个值就是center（表示居中）

1.方向定位：top上 bottom下 right右 left左 center中
2.尺寸单位定位：参考位置是背景图片左上角与元素左上角水平垂直距离.设置一个值时，这个值一定是水平位置
3.%定位 : 0% 0% 图片在左上角，50% 50% 图片水平垂直居中，100% 100% 图片在右下角，
4.背景定位可以使用负值，方向与正值相反
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景定位</title>
		<style type="text/css">
			div{
     
     
				width: 500px;height: 500px;background-color: #00ff00;
				background-image: url(https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1968671538,458150192&fm=26&gp=0.jpg); 
				background-repeat:no-repeat ;
				background-size:200px 200px ;
				/* background-position:right bottom; */
				/* background-position:left bottom; */
				/* background-position:right top; */
				/* background-position:left top; */
				/* background-position:left center; */
				/* background-position:center top; */
				/* background-position:center center; */
				/* background-position:center ; */
				/* background-position: 200px 200px; */
				/* background-position: 50% 50%; */
			}
		</style>
		
	</head>
	<body>
	
		<div></div>
		
	</body>
</html>

背景固定
设置背景图片是否随页面滚动
1.scroll 默认值，背景图片会随页面滚动而移动
2.fixed 背景图片不会随页面滚动而移动
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景固定</title>
		<style type="text/css">
			div{
     
     
				width: 200px;
				background-image: url(https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1968671538,458150192&fm=26&gp=0.jpg); 	
				background-size: 100px 100px;
				background-repeat:no-repeat ;
				background-position:0 100px ;
				/*background-attachment: scroll;*/
				background-attachment: fixed; /* 设置这个值,图片就固定在某个位置,不会随着页面的拖动而改变位置 */
			}
		</style>
	</head>
	<body>
		
		
		
		<div>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div>
	</body>
</html>

背景简写：可以把背景的属性写在一行代码内
background:1颜色值 2背景图片 3背景重复 4背景定位/背景尺寸 5背景固定;

1.可以在一个属性中设置所有背景属性，用空格隔开
2.如果某个值不写，也不会出问题
3.使用背景简写，输入的代码最少，浏览器对背景简写支持度更高
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
     
     
				/* 一条一条写的方式 */
				width: 400px;height: 1000px;
				/*background-color: #00ff00;
				background-image:url(51zxw.png) ;
				background-repeat:no-repeat ;
				background-size:300px 90px ;
				background-position:20px 100px ;
				background-attachment:fixed ;*/
				
				/* 简写方式 */
 background:#00ff00 url(https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1968671538,458150192&fm=26&gp=0.jpg) no-repeat 50px 500px/300px 90px fixed;
			}
		</style>
	</head>
	<body>
		
		
		<div></div>
	</body>
</html>

8.边框属性

边框四大要素：
1.边框宽度：合法的尺寸单位
2.边框颜色：合法的颜色单位
3.边框样式：实线：solid 用得多，一定要记住虚线：dashed双线：double点状:dotted
4.边框方向：top，bottom，left。right（上，下，左，右）

5.border:四个方向都选中
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框宽度和边框颜色</title>
		<style type="text/css">
			div{
     
     
				width: 200px;height: 100px;line-height: 100px;text-align: center;
				background: #008000;
				/*border-top: 4px red solid;*/
				border: 5px rgba(255,0,0,0.8) solid;
				/* border-bottom:  5px rgba(255,0,0,0.8) solid; */
			
			}
		</style>
	</head>
	<body>
			
		<div>文本内容</div>
		
	</body>
</html>

圆角边框：
圆角边框两大要素：
1.圆角方向：通过垂直和水平方向可以表示一个角
注意：先垂直方向，再水平方向
方向1：上下方向2：左右
2.圆角半径：
水平半径垂直半径

圆角边框设置
1.语法：
border-垂直方向-水平方向-radius:水平半径垂直半径;
属性值之间有空格隔开。
2.垂直方向：上top 下bottom
3.水平方向:左left 右right
4.水平半径和垂直半径的值:可以使用合法的尺寸单位，还可以使用%
5.圆角半径设置成一个值时，另一个值和设置的值一样
6.当使用%设置半径时，半径的值是元素宽度或高度的百分比

同时设置4个圆角边框
1.border-radius:上左角上右角下右角下左角;
border-radius:10px 20px 30px 40px;
从上左角到下右角顺时针排列
2.border-radius:上左角上右角和下左角下右角 ;
border-radius:10px 20px 30px;
3.border-radius:上左角和下右角上右角和下左角 ;
border-radius:10px 30px;
4.border-radius:4个角一样的值 ;
border-radius:30px;
最常用的方法

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆角边框设置</title>
		<style type="text/css">
		.box{
     
     
				width: 200px;height: 100px;line-height: 100px;text-align: center;
				background: #008000;
				/*border: 1px red solid;*/
				/* border-top-left-radius:20px 30px; */
				/*border-top-left-radius:50px;*/
				/*border-top-left-radius:50%;
				border-top-right-radius:50%;
				border-bottom-right-radius:50%;
				border-bottom-left-radius:50%;*/
				
				/* border-radius:10px 20px 30px 40px; */
				/*border-radius:10px 20px 30px;*/
				/*border-radius:10px 30px;*/
				border-radius: 30px;
				/* border-radius: 50%; */
				
		</style>
	</head>
	<body>
	<div class="box">文本内容</div>
		
	</body>
</html>

边框阴影
box-shadow: 值1 值2 值3 值4;
值1:水平阴影位置,必须。正值时，阴影在右，负值时，阴影在左
值2:垂直阴影位置,必须。正值时，阴影在下，负值时，阴影在上
值3:阴影模糊距离，可选值
值4:阴影尺寸，可选值
值5：阴影颜色，合法颜色值。可选。默认黑色

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框阴影</title>
		<style type="text/css">
			img{
     
     
				/*box-shadow: 2px 10px 5px 20px #ccc;*/
				border-radius:4px ;
				box-shadow: 2px 2px 2px  4px #aaff00;
			}
		</style>
	</head>
	<body>

		<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2685177128,4134246955&fm=26&gp=0.jpg" >		
	</body>
</html>

轮廓及样式重置
outline: 边框宽度边框颜色边框样式;
轮廓的样式会加在边框之外

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮廓及样式重置</title>
			<style type="text/css">
			div{
     
     
				width: 150px;height: 100px;background: blueviolet;
				border: 10px solid yellow;
				border-radius:10px ;
				box-shadow: 1px 1px 1px #ccc;
				outline: 10px solid red;
				margin-top: 100px; margin-left: 500px;
				
			}
			input,textarea,select{
     
     outline:none} /* 去掉input,textarea,select的点击时产生的淡蓝色轮廓样式 */
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
		<input type="text" name="" id="" value="" />
		<textarea name="" rows="" cols=""></textarea>
		<select name="">
			<option value=""></option>
		</select>
	</body>
</html>

图片效果展示：
在这里插入图片描述

9.盒子模型

在这里插入图片描述

1.所有元素都可以有宽高
2.所有元素都是一个矩形
3.所有元素都看成一个盒子
4.盒子包括：外边距+边框+内边距+元素内容

外边距设置：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外边距设置</title>
		<style type="text/css">
			.box{
     
     
				width: 50px;height: 50px;background: blue;
				margin-top: 50px;		 /* class="box"这个div元素距离上方50px */
				/* margin-bottom:50px;	  		class="box"这个div元素距离下方50px */
				margin-left: 50px;		 /* class="box"这个div元素距离左侧50px */
				/* margin-right: 50px;		  class="box"这个div元素距离右侧50px */
			}	
		</style>
	</head>
	<body>
		<!--外边距要素-->
			<!--1.外边距的方向：top  bottom  left  right-->
			<!--2.外边距尺寸：合法的尺寸单位，百分比-->
		<!--外边距语法-->
			<!--margin-方向: 外边距尺寸;-->
		
		<div style= " border: red 5px solid; height: 100px;width: 200px;">
			
			<div class="box"></div> 
			<!-- 此时的div class="box"的这个元素距离顶部和左侧各50px -->
				
		
		</div>
		
		
	</body>
</html>

外边距简写

同时设置4个方向外边距
1.margin:上右下左;
margin:10px 20px 30px 40px;

2.margin:上左右下 ;
margin:10px 20px 30px;

3.margin:上下左右 ;
margin:10px 30px;

4.margin:4个方向一样的值 ;（最常用的方法）
margin:30px;

外边距注意事项：

1.元素上下排列时，上下外边距会合并（上下外边距取最大值）
2.元素左右排列时，左右外边距会叠加（左右外边距会相加)
3.行级元素只有左右外边距，没有上下外边距
4.块级和行内块级元素的外边距4个方向都有效

内边距：

1.所有元素都可以设置内边距
内边距要素
1.内边距的方向：top bottom left right
2.内边距尺寸：合法的尺寸单位，百分比

内边距语法
1.padding-方向: 内边距尺寸;
2.使用百分比时，参考的是父级的尺寸
3.内边距不能设置负值

同时设置4个方向内边距
1.padding:上右下左;
padding:10px 20px 30px 40px;
从上到左顺时针排列
2.padding:上左右下 ;
padding:10px 20px 30px;
3.padding:上下左右 ;
padding:10px 30px;
4.padding:4个方向一样的值（最常用的方法） ;
padding:30px;

内边距和外边框注意点
如果子元素宽高撑满父元素，然后子元素的父元素设置有四个方向的内边距和边框属性，子元素的大小不会改变，但是父元素的宽高会被增大，box-sizing属性，可以很好的解决这个问题。

box-sizing属性：
box-sizing:content-box:内边距和边框是在元素设置的宽度和高度之外进行绘制

box-sizing:border-box:内边距和边框是在元素设置的宽度和高度之内进行绘制
元素的宽度高度：
设置的宽度=左边框+右边框+左内边距+右内边距+元素内容的宽度

设置的高度=上边框+下边框+上内边距+下内边距+元素内容的高度

溢出隐藏：

overflow四个值：

1.visible:内容不会被修剪，会显示在元素框之外默认值
2.hidden:内容会被修剪，溢出的内容不可见
3.scroll:内容会被修剪,会显示滚动条，以便查看溢出的内容
4.auto:当内容大于元素框时，内容会被修剪,会显示滚动条，以便查看溢出的内容。当内容小于元素框时，不会显示滚动条

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>溢出隐藏</title>
		<style type="text/css">
			div{
     
     
				width: 400px;height: 206px;border: 2px solid red;
				line-height: 21px;
				/*overflow: visible;*/
				/* overflow: hidden; */
				/*overflow: scroll;*/
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<!-- overflow属性是规定内容溢出了元素框时发生的事情 -->
			1.visible:内容不会被修剪，会显示在元素框之外    默认值
			2.hidden:内容会被修剪，溢出的内容不可见
			3.scroll:内容会被修剪,会显示滚动条，以便查看溢出的内容
			4.auto:当内容大于元素框时， 内容会被修剪,会显示滚动条，以便查看溢出的内容。当内容小于元素框时，不会显示滚动条
			
			
		<div>
		
			文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
		</div>
		
	</body>
</html>

让块级元素水平居中：margin: 0 auto;（只限于块级元素）

10.列表，表格，鼠标，滤镜

列表标志：list-style-type:标志类型;
标志类型：
isc : CSS1 默认值。实心圆
circle : CSS1 空心圆
square : CSS1 实心方块
decimal : CSS1 阿拉伯数字
lower-roman : CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenianl : CSS2 未支持。传统的亚美尼亚数字
cjk-ideographic : CSS2 未支持。浅白的表意数字
georgian : CSS2 未支持。传统的乔治数字
lower-greek : CSS2 未支持。基本的希腊小写字母
hebrew : CSS2 未支持。传统的希伯莱数字
hiragana : CSS2 未支持。日文平假名字符
hiragana-iroha : CSS2 未支持。日文平假名序号
katakana : CSS2 未支持。日文片假名字符
katakana-iroha : CSS2 未支持。日文片假名序号
lower-latin : CSS2 未支持。小写拉丁字母
upper-latin : CSS2 未支持。大写拉丁字母
列表标志位置：list-style-position: outside;
outside：默认值，表示标志在列表项之外
inside：默认值，表示标志在列表项之内
列表项图像：list-style-image: url(图像路径);
简写列表样式：list-style:列表标志列表标志位置列表项图像;

li列表样式重置：list-style-type: none;（去掉li前的小圆点，常用，请谨记）

表格属性：
1.单元格间隔：设置相邻的单元格间隔
border-spacing: 水平间隔垂直间隔;
2.边框折叠：
border-collapse: collapse|separate;

separate:默认值，边框会分开
collapse:边框会合并

3.表格宽高：width: 300px;height: 200px;
4.表格文本对齐： vertical-align
5.表格背景：background属性

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格属性</title>
		<style type="text/css">
			table{
     
     
				border-spacing: 30px 50px;
				border-collapse: collapse;
				width: 500px;height: 200px;
				background: #55ffff;
				text-align: center;
				vertical-align: middle  ;
			}
		</style>
	</head>
	<body>
		
		<table border="1">
			
			<tr>
				<td>文本内容1</td>
				<td>文本内容2</td>
				<td>文本内容3</td>
				<td>文本内容4</td>
				<td>文本内容5</td>
			</tr>
			<tr>
				<td>文本内容1</td>
				<td>文本内容2</td>
				<td>文本内容3</td>
				<td>文本内容4</td>
				<td>文本内容5</td>
			</tr>
		</table>
		
	</body>
</html>

鼠标样式设置：

cursor: 样式单词;

default：默认光标（通常是一个箭头）
auto：默认，浏览器设置的光标
crosshair：光标呈现为十字线
pointer：光标呈现为一只手
move：光标呈现某对象可移动
text：光标指示文本
wait：光标指示程序正在忙（通常是一只表或者一个沙漏）

代码示例：

<!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;background: #ccc;
			}
			div:hover{
     
     
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		
		
		<div id="page">点击跳转</div>
		
		<script type="text/javascript">
			document.getElementById("page").onclick=function(){
     
     
				window.location="http://www.baidu.com";
			}
		</script>
	</body>
</html>

饱和度和高斯模糊：

滤镜属性：定义图像的可视效果
语法：filter: 属性值;
1.高斯模糊：filter: blur(合法的尺寸单位);
默认值是0，值越大，图像越模糊
不能设置成百分比

2.饱和度设置：filter: saturate(百分比);
默认值是100%，图像不变，0%时图像会变成黑白图像
值可以超过100%，有更高的饱和度

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>高斯模糊和饱和度</title>
		<style type="text/css">
			img{
     
     
				/*filter: blur(1px);*/
				filter: saturate(0%);
			}
		</style>
	</head>
	<body>
		
		<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2685177128,4134246955&fm=26&gp=0.jpg" width="400"/>
		
	</body>
</html>

灰度和对比度：

1.灰度设置：filter: grayscale(百分比);
值在0%-100%之间。默认是0%
值为100%，图像会变成黑白图像

2.对比度设置：filter: contrast(百分比);
默认值：100%，图像没有变化。值为0%时，图像会变成全黑
当超过100%时，意味运用更低的对比度
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>灰度和对比度</title>
		<style type="text/css">
			img{
     
     
				/*filter: blur(1px);*/
				/*filter: saturate(0%);*/
				/*filter: grayscale(100%);*/
				filter: contrast(20%);
			}
		</style>
	</head>
	<body>
	
		<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2685177128,4134246955&fm=26&gp=0.jpg" width="400"/>
		
	</body>
</html>

透明度设置：

注意：
所有ie浏览器都不支持滤镜属性
老版本谷哥和欧朋浏览器需要加前缀

透明度设置: filter: opacity(百分比);
默认值：100%，表示完全不透明，0%时，表示完全透明
值在0%-100%之间。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>透明度设置</title>
		<link rel="stylesheet" type="text/css" href="reset.css"/>
		<style type="text/css">
		
			img{
     
     
				width: 100%;
				/*filter: blur(1px);*/
				/*filter: saturate(0%);*/
				/*filter: grayscale(50%);*/
				/*filter: contrast(100%);*/
				/*老版谷哥和欧朋浏览器需要加前缀*/
				-webkit-filter: opacity(50%);
				filter: opacity(20%);
			}
		</style>
	</head>
	<body>
	
		<div>
		<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2685177128,4134246955&fm=26&gp=0.jpg" width="400"/>
		</div>	
		
		
	</body>
</html>

11.浮动

浮动：让块级元素能在一行
语法：float: 方向;

浮的特点：
1.浮动元素就像浮云一样浮起来了。浮动元素后面的正常元素会自动补位
2.浮动元素会脱离正常的文档流，并没有完全脱离文档流
3.浮动元素会被父元素宽度所约束，所以浮动元素并没有完全脱离文档流
4.浮动元素会对它下面正常元素中的文字产生影响
动的特点：
5当浮动元素上一行是正常元素，这个浮动元素只能待在当前行，不能跑到上一行
6.左浮动：元素会向左跑，会从上一行最右边出来继续往左跑，直到遇到有浮动属性的元素，才会停止。
7.右浮动：元素会向右跑，会从上一行最左边出来继续往右跑，直到遇到有浮动属性的元素，才会停止。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动元素动特点</title>
		<link rel="stylesheet" type="text/css" href="../reset.css"/>
		<style type="text/css">
			ul{
     
     width: 300px;margin: 50px auto;background: #ccc;color: white;font-size: 30px;}
			li{
     
     
				width: 100px;height: 100px;
				float: right;
			}
			.a{
     
     background: red; 
				/*float: left;*/
			}
			.b{
     
     background: green;
				/* float: left; */
			}
			.c{
     
     
				background: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		
		
		<ul>
			<li class="a">1</li>
			<li class="b">2</li>
			<li class="c">3</li>
		</ul>
	</body>
</html>

浮动元素遇到文字时的效果：
可以缩小浏览器窗口，看图片和文字的效果
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字环绕效果</title>
		<link rel="stylesheet" type="text/css" href="../reset.css"/>
		<style type="text/css">
			p{
     
     text-indent: 2em;}
			img{
     
     
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>秦朝是中国历史上第一个统一的多民族的专制主义中央集权的封建国家。秦始皇为巩固专制主义中央集权所采取的一系列措施，对后世产生了重大影响。秦统一后，为了防御匈奴南侵，在连接原来秦、赵、燕三国北方长城的基础上，又向东、西两段延伸，筑成一道西起临洮、东到辽东的城防。这就是有名的万里长城。秦统治者的暴政导致了农民战争的爆发和秦王朝的灭亡。西汉是中国历史上一个强盛的封建国家。汉高祖刘邦采取的“休养生息”政策，使社会经济得到了恢复和发展，汉文帝、汉景帝推崇黄老治术，采取“轻徭薄赋”、“与民休息”的政策出现了“文景之治”的局面，汉初几位统治者的稳定基础，从而使得汉武帝时国力达到了空前强盛。平定“七国之乱”后，加强了中央集权；通过“罢黜百家，独尊儒术”，在全国加强了思</p>
			<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2229258317,1629892341&fm=26&gp=0.jpg" width="200" style="float: right;"/>
			<p>秦朝是中国历史上第一个统一的多民族的专制主义中央集权的封建国家。秦始皇为巩固专制主义中央集权所采取的一系列措施，对后世产生了重大影响。秦统一后，为了防御匈奴南侵，在连接原来秦、赵、燕三国北方长城的基础上，又向东、西两段延伸，筑成一道西起临洮、东到辽东的城防。这就是有名的万里长城。秦统治者的暴政导致了农民战争的爆发和秦王朝的灭亡。西汉是中国历史上一个强盛的封建国家。汉高祖刘邦采取的“休养生息”政策，使社会经济得到了恢复和发展，汉文帝、汉景帝推崇黄老治术，采取“轻徭薄赋”、“与民休息”的政策出现了“文景之治”的局面，汉初几位统治者的稳定基础，从而使得汉武帝时国力达到了空前强盛。平定“七国之乱”后，加强了中央集权；通过“罢黜百家，独尊儒术”，在全国加强了思</p>
		</div>
		
	</body>
</html>

清除浮动：
清除浮动：规定元素哪一侧不能有浮动元素
1.clear: left; 元素左侧不能有浮动元素
2.clear: right; 元素右侧不能有浮动元素
3.clear: both;元素左右两侧都不能有浮动元素
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动</title>
		<link rel="stylesheet" type="text/css" href="../reset.css"/>
		<style type="text/css">
			ul{
     
     
				width: 300px;height: 100px; margin: 50px auto;background: #ccc;color: white;font-size: 30px;}
			li{
     
     
				width: 100px;height: 100px;
				float: left;
			}
			.a{
     
     background: red; 
				
			}
			.b{
     
     background: green;
				/*clear: right;*/
				clear: both;
			}
			.c{
     
     
				background: blue;
				/*clear: left;*/
			}
		</style>
	</head>
	<body>
	
			
		<ul>
			<li class="a">1</li>
			<li class="b">2</li>
			<li class="c">3</li>
		</ul>
	</body>
</html>

注意：设置清除浮动属性时，要考虑元素的加载顺序
先加载1号元素,1号元素因为就在最左侧所以待在原位不动，然后加载2号元素，因为它的左右两侧不能有浮动元素，所以它不能往上跑，然后加载3号元素，因为此时清除浮动的属性已经加载完了，所以3号元素可以待在2号元素的右侧。

防止元素高度塌陷：
当父元素没有设置高度，然后子元素有设置浮动属性，这时的父元素的高度就会塌陷。

1.直接给父元素设置高度
2.使用伪元素方法在元素内容之后加一个空内容，转成表格元素。设置左右两侧不能有浮动元素
ul::after{
content: “”;
display: table;
clear: both;
}

注意：父元素设置有高度时，不用清浮动。父元素没有设置高度时，一定要清浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>防止高度塌陷</title>
	
		<style type="text/css">
			ul{
     
     border: 1px solid red;width: 352px;margin: 50px auto; list-style-type: none;}
			.a,.b,.c{
     
     
				width: 100px;height: 100px;
				float: left;
			}
			.a{
     
     background: green;}
			.b{
     
     background: blue;}
			.c{
     
     background: orange;}
			ul::after{
     
     
				content: "";
				display: table;
				clear: both;
			}
			
			
		</style>
	</head>
	<body>
			
				
		<ul class="">
			<li class="a "></li>
			<li class="b "></li>
			<li class="c "></li>
			
		</ul>
		
	</body>
</html>

12 定位

定位：规定元素的位置
定位用于没有规律的元素而布局
定位的三种类型：相对定位，绝对定位，固定定位
定位使用方法：
1.规定是哪一个定位方式 position: 定位方式;
2.指定在方向上的偏移量:top bottom left right
3.注意：top和bottom只有一个会生效，left和right只有一个会生效。left和top优先

相对定位： position: relative;

1.指定了相对定位后，元素就是一个定位元素，脱离文档流,但没有完全脱离文档流
2.相对定位元素脱离了文档流，但原来的位置还得保留
3.相对定位是相对于原来的位置进行定位

绝对定位： position: absolute;
1.指定了绝对定位后，元素就是一个定位元素，完全脱离文档流
2.原来的位置不会保留
3.绝对定位是相对于最近有定位属性的父元素进行定位.如果往上没找到有定位元素的父元素，才会相对于body元素进行定位

固定定位： position: fixed;

1.指定了固定定位后，元素就是一个定位元素，完全脱离文档流
2.原来的位置不会保留
3.固定定位是相对于浏览器窗口进行定位.注意：不是相对于body元素进行定位

定位偏移量：
1.可以使用合法的尺寸单位,百分比
2.可以使用负值，当使用负值时，元素的偏移方向与正值相反
3.元素相对于哪个元素进行定位，使用百分比时，就是哪个元素宽度或高度的百分比
代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级</title>
		<link rel="stylesheet" type="text/css" href="../reset.css"/>
		<style type="text/css">

			.box{
     
     width: 502px;height: 502px;border: 1px solid black;margin: 50px auto;position: relative;}
			.pst1,.pst2,.pst3{
     
     width: 150px;height: 150px;}
			.pst1{
     
     
				background: red;
				position: absolute;
				left: 0;
				top:0;
				z-index: 1;
			}
			.pst2{
     
     
				background: green;
				position: absolute;
				left: 50px;
				top:50px;
				z-index: 3;
			}
			.pst3{
     
     
				background: blue;width: 150px;
				position: absolute;
				left: 100px;
				top:100px;
				z-index: 5;
			}
		</style>
	</head>
	<body>
							
			<div class="box">
				<div class="pst1"></div>
				<div class="pst2"></div>
				<div class="pst3"></div>
			</div>
		
	</body>
</html>

文章目录

前言

2.css优先级以及特性

3.css选择器

4.伪类和伪元素：

5.字体属性

6.文本属性

7.css基础理论

7.背景属性

8.边框属性

9.盒子模型

10.列表，表格，鼠标，滤镜

11.浮动

12 定位

猜你喜欢