CSS主要由两个主要的部分组成 选择器以及一条或多条的样式

CSS引入方式

内部引入：直接给标签添加style属性 （麻烦）

多个文件用外部样式

选择器

• 全局选择器：*{}

• 元素选择器：标签{}

• class类选择器 :标签中加class属性 head-style中以 **(.class属性名{})**访问

• class选择器的特点
  

• id选择器：标签中加id属性 head-style中以 （#id属性名{}）访问
  注：id名称是唯一的，不可重复，id不能以数字开头

合并选择器

选择器的优先级

字体

加粗 font-weight: 700; 斜体：font-style: italic; (正常是normal)
指定一个元素的字体：font-family: "Simsun";

背景属性

背景颜色

width: 400px;
height: 400px;    
background-color: blue;

背景图片

width: 400px;
height: 400px;    
background-image: url("古风.png"); #“ ”中为图片路径   

设置图片重复

设置图片大小

设置图片位置

文本

表格

表格边框

table{
    border: 1 solid red;
}

折叠边框

border-collapse: collapse;

表格大小

width height属性

表格文字对齐

text-align:center;  /*左右*/
vertical-align:top; /*上下*/

表格填充

padding: 20px;

表格背景颜色

background-color: aqua;

关系选择器

后代选择器

E标签下所有的F子代都会生效

子代选择器

相邻兄弟选择器

只能向下选择

通用兄弟选择器

盒子模型

div{
	width: 100px;
	height: 160px;
	background-color: red;
	padding: 20px 10px;  /*内边距：上下间距 左右间距*/
	border: 5px solid blue; /*边距：边框粗细 线的类型(soli代表实线) 颜色*/
	margin: 30px;  /*外边距(透明) */
	/*margin,padding都可以独立设置上下左右的间距*/
}

弹性盒子模型

.continer{
	width: 500px;
	height: 500px;
	background-color: bisque;
	display: flex;
}

flex-direction属性（方向）

flex-content属性（上下）

align-items属性（左右）

子元素上的属性（按权重来分配）

脱离文档流

浮动


注：float应写在样式小的方格下 还要主义body内标签的顺序 并且党宽度不够时，会被挤压到下一行

常用模型：将无序标签水平放置

ul li{
	float: left;
	margin: 0 30px;
}
<ul>
	<li>标题1</li>
	<li>标题2</li>
	<li>标题3</li>
</ul>

浮动副作用

清除浮动

父类设置高度

受影响元素增加clear属性：clear: both|left|right;

overflow清除浮动(在外面的盒子设置)

overflow: hidden;
clear: both;

伪对象方式

.continer::after{
	content: "";
	display: block;
	clear: both;
}

定位

父级有定位，则根据父级容器的定位来移动，如果没定位，则根据文档来移动

相对定位

position: relative;
top: 20px;
left: 20px;

绝对定位-可以脱离文档流（三层）

position: absolute;
top: 20px;
left: 20px;

随着页面滚动而滚动

国定定位-可以脱离文档流-页面位置固定

position: fixed;
top: 20px;
left: 20px;

随着页面滚动而不滚动 一般只有一个

Z-index 决定谁覆盖谁

CSS新属性

圆角

阴影

动画

<style>
	div{
		width: 300px;
		height: 300px;
		background-color: red;
		animation: myDh 3s linear 0s infinite; 
	}
	div:hover{
		animation-play-state: paused;  /*鼠标悬停控制*/
	}
	@keyframes myDh{
		0%{
			/*css样式*/
			opacity：0.2； /*透明度*/
			background-color: red;
		}
		50%{
			/*css样式*/
			opacity：0.5；
			background-color: green;
		}
		100%{
			 /*css样式*/
			 opacity：0.5；
			 background-color: red;
		}
	}
</style>

媒体查询

媒体查询会根据设备的大小自动识别加载不同的样式

<style>
	div{
		width: 300px;
		height: 300px;
		background-color: red;
	}
   @media screen and (min-width:768px){
	/*css样式*/
	div{
		background-color: green;
	}
   }
   @media screen and (min-width:768px) and (max-width:996px){
	/*css样式*/
	div{
		background-color: blue;
	}
   }
   @media screen and (max-width:996px){
	/*css样式*/
	div{
		background-color: red;
	}
   }
</style>

雪碧图

display：block; 内连元素变为块状元素

background-image: url(/古风.png);
background-position: **px;