html：

css:

1.什么是css？

css指层叠样式表

css定义如何显示html元素

样式通常存储在样式表中

外部样式表可以极大提高工作效率

外部样式表通常存储在css文件

多个样式定义可以层叠为一

2.css三种设置样式

行内样式法（用的很少）：在行内标签里面添加style属性

内部样式表法（写在head里面，添加style属性）

外部样式表法（需要一个link标签 ）

3.选择器（在列表中选择指定元素）

1.统一表达式： 选择器{ 样式:值; }

优先级（权重值）：id选择器（100）>class选择器（10）>类选择器（1）

标签选择器（直接找到对应标签名，统一设置一组标签样式）

id选择器（#+id名称）

class选择器 [又名类选择器]（.+class名称）

基础背景属性

背景颜色background-color

直接定义法（用英语单词）

16进制定义法:#****** 0-f

三原色定义法:rgb(*,*,*) 0-255

背景图background-image :url();url后面跟图片的相对路径

背景图重复方式（默认是平铺）background-repeat:no-repeat;(改为不重复)

背景图位置 (水平位置) (垂直位置)background-position:垂直 水;平或者写两个像素值 ;

边框属性

宽度

线性

solid实线

dashed虚线

datted点划线

边框颜色

4.盒模型

盒模型：一个元素实际在网页中所占位置大小

宽度=width+border-width+padding+margin

高度=hight+border-hight+padding+maigin

基本表格属性

边框重合border-collaps(边框合并)

5.列表属性

列表符号类型list-style-type:circle squire:

将列表符号改成图片list-style-image:url(路径);

列表符号位置（了解即可，没什么用）

6.内填充和外边距

内填充

padding:多少px内填充。元素(盒子)和内容之间距离;

外边距

margin多少px外边距,元素和元素（盒子）之间距离;

元素水平居中:margin:0 auto

7.定位属性

相对定位position:relative;根据自己的初始定位定位,依然占据原位置。

top 把元素向上推

right 把元素向右推

bottom 把元素向下推

left 把元素向左推

绝对定位position:absolute; 需要找父级

top 把元素向上推

right 把元素向右推

bottom 把元素向下推

left 把元素向左推

固定定位position:fixed;

top 相对界面上侧距离

right 相对界面右侧距离

bottom 相对界面下侧距离

left 相对界面左侧距离

浮动属性

浮动作用：块元素并排显示，想让谁并排就给谁添加浮动

给两个div选择器中加两个float:left;就能实现并排

注意注意！添加浮动后，元素不占位置！！！

8.高级选择器

通用选择器

解释:“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括和标签

分组选择器

p,span {color: red;}解释:将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 D选择器、类选择器、属性选择器混合使用。

后代选择器

p span {color: red}解释:选择

元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。

子选择器

ul>ln{}解释:子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再继续向下选择。

相邻兄弟选择器

p +h1{color: red;}解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

普通兄弟选择器

p-h1{color:red;}解释:普通兄弟选择器匹配和第一个元素后面的所有元素

9.文本基本属性

color颜色

front-size字号

front-family字体

font-weight加粗

font-style倾斜

1.字号大小font-size50px

解释:设置文本的大小。

2字族(字体)font-family:”黑体”解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几 个后备字体

3.字体加粗font-weight: bold;

解释:设置字体是否加粗。

4.字体倾斜 font-stvle:italic

解释:设置字体是否倾斜:

1.text-decoration解释:设置文本出现装饰线。underline下划线 overline上划线line-through 删除划线 none取消装饰线

2.text-transform解释:设置英文文本转换为大小写。uppercase 全部转化为大写lowercase 全部转化为小写 capitalize首字母大写3text-align

解释:指定文本的对齐方式。left向左对其 center居中对齐right 向右对齐 justify内容两段对齐，适用于多行文字

4.text-indent

解释:设置文本首行的缩进。多少px

5.letter-spacing

解释:设置字母之间的间距。 多少px

6.word-spacing解释o设置文本之间的间距。多少px

10.元素转化

1display: block 块元素

2.display:inline 行元素

3.display:none隐藏元素

4.display:inline-block 行级块元素

动画效果

transition-property：设置元素中参与过渡的属性；

transition-duration：设置元素过渡的持续时间；

transition-timing-function：设置元素过渡的动画类型；

transition-delay：设置过渡效果延迟的时间，默认为 0；

transition：简写属性，用于同时设置上面的四个过渡属性

动画中常见函数

1.rotate：

rotate(angle)定义2D旋转

rotateX(angle) x 轴 横向移动

rotateY(angle) y 轴 竖向移动

rotateZ(angle) 双向移动

rotate3d(angle)定义3d旋转

rotate3d(1, 0, 1, -180deg);顺时针旋转消失 --加上deg

2 .translate：

translate（）相当于水平平移，+ 表示向右/下，- 表示向左/上

translateX（x）水平方向平移

translateY（y）垂直方向平移

translateZ（z）相当于放大

translate（x,y）相当于水平平移+垂直平移

translate（x,y,z）相当于水平平移+垂直平移+放大 --加上px

3.scale效果图

scale(数值)定义倍数缩放，

scaleX()通过x轴定义，仅水平方向缩放

scaleY()通过y轴定义，仅垂直方向缩放

scaleZ()通过z轴定义，定义3d缩放

(transform)常用属性

transform-origin: 0 0;设置变形的原点 默认值(center)