1.伪类选择器
1、分类：
1、超链接伪类选择器：针对超链接的不同状态设置样式
2、动态伪类选择器：所有元素都可以使用
3、使用：
1、超链接伪类选择器：
访问前 :link
访问后 :visited
伪类选择器需要与其他选择器结合使用，不能单独使用
语法：a:link{访问前样式}
a:visited{访问后样式}
2、动态伪类选择器：
1、:hover 鼠标滑过元素时的状态
2、:active 鼠标点按元素的状态
超链接使用注意：
1、超链接可以设置四种状态的样式，书写时必须按照以下顺序定义：
:link
:visited
:hover
:active
2、网页中一般会直接对a标签设置默认样式，配合:hover改变超链接文本色或者背景色
3、:fous
表示文本框或者密码框在获取焦点时的状态
焦点状态：正接受输入或者编辑时的状态
input:fous{样式}
2.内容溢出的处理
块元素可以设置宽高的，如果内容超出尺寸范围，如何处理？
属性：voerflow
取值：
1、visible 默认值，表示溢出内容可见
2、hidden 溢出内容隐藏
3、scorll 为元素添加水平和垂直方向的滚动条，不管内容有没有溢出
4、auto 自动在溢出方向上添加可用的滚动条
3.背景设置
1、背景颜色：
属性：background-color
取值：颜色值
2、背景图片
属性：background-image
取值：url('图片路径')
3、背景图片相关属性：
1、背景图片重复平铺显示：
属性：background-repeat
取值：
1.repeat(默认值) 当图片尺寸小于元素尺寸时，会自动沿水平和垂直方向重复平铺，直到铺满元素
2.repeat-x 设置图片沿水平方向平铺
3.repeat-y 设置图片沿垂直方向平铺
4.noreapte 设置图片不重复平铺
2、背景图片的大小：
属性：background-size
取值：像素值 百分比(取两个值分别表示宽和高，取一个值表示设置宽度，高度等比缩放)
cover(覆盖)等比拉伸图片至足够大，完全覆盖元素
contain(包含)等比拉伸图片至刚好被元素容纳的最大尺寸
3、背景图片的位置：
属性：background-position
取值：
1、像素值：x y 表示背景图片水平和垂直偏移，默认背景图片从元素的左上角显示
2、百分比：0% 0% 50% 50% 100% 100%
3、方位值
水平方向：left center right
垂直方向：top center bottom
设置方位值时，缺少某个方向，默认为center
4.过渡效果
1、什么是过渡
过渡指的是元素在两种状态切换时的平滑过渡效果
2、过渡效果的属性；
1、指定过渡时长
属性：transition-duration
取值：以秒为单位的数值
2、指定过渡属性：
属性：transition-property
取值：大部分的CSS属性名
语法：
1.width(指定单个属性名)
2.width,height(指定多个属性名，使用逗号隔开)
3.all(指定所有发生值改变的属性)
3、指定过渡发生的时间变化曲率
属性：transition-timing-function
取值；
1.linear 匀速变化
2.ease 默认值，慢速开始，中间加速，慢速结束
3.ease-in 慢速开始，加速结束
3.ease-out 快速开始，慢速结束
5.ease-in-out 慢速开始和结束，中间过程先加速后减速
4、指定延迟时间
属性；transition-delay
取值：以s/ms为单位的数值，
练习:创建200*200的元素
鼠标悬停时改为圆形，3s内完成
5、属性简写：
属性：transition
取值:property duration timing-function delay
语法；
1.duration是必填项
2.可以分别为属性设置时长
transition:width 2s,height 3s,background 5s
5.元素的显示效果
1、设置元素显示与隐藏
属性：visibility
取值：
1.visible(默认可见)
2.hidden (元素隐藏,仍然占位)
2、转换元素类型：
属性：dispaly
取值：
1.inline(行内元素)
2.block(块元素)
3.inline-block(行内块元素)
4.none(元素隐藏,在文档中不占位)
3、元素透明度
1.rgba(r,g,b,a)
2.属性：opacity
取值：0-1(0为透明，1为不透明)
使用：1、opacity会使包含元素自身和后代元素在内的所有显示效果都呈现半透明效果
rgba()只能影响当前元素的指定属性的显示效果，文本的半透明效果会被子元素继承
2、子元素与父元素同时设置opacity，子元素的中的半透明效果是两个值的乘积(在
父元素的半透明的基础上再次半透明)
4、鼠标形状改变
默认，鼠标悬停在普通文本上显示为'I',悬停在超链接内容上，显示为手指，其他元素显示为箭头
属性：cursor
取值：
1.dufault
2.pointer(手指形状)
3.text ('I')
5、行内块元素的垂直对其方式
行内块元素默认按照文本的基线对其，会出现元素排列不齐的情况
属性：vertical-align
取值：top/middle/bottom
使用： 为行内块元素设置vertical-align，调整左右元素跟它对其的方式
img,input{
vertical-align:xxx
}
6.元素的转换效果
1、设 1、元素的转换效果主要指元素可以发生平移、缩放、旋转
2、属性：transform
取值：转换函数
注意：多个转换函数之间使用空格隔开
3、元素的转换基准点
默认情况下元素以中心点作为转换的基准点
调整基准点：
属性：transform-origin
取值：x y
可以使用像素值、百分比、或方位值表示基准点的位置
eg: 左上角 0px 0px / 0% 0% / lefh top
方位值:left center right /// top center bottom
4、平移变换：
作用；改变元素在文档中的位置
属性：transform
取值；1.translate(x,y)
x,y分别表示元素在x轴和y轴的上的平移距离，取像素值，可正可负，区分平移方向
2.translate(x)
一个值表示沿x轴平移
3.translateX(value)
指定沿x轴平移
4.translateY(value)
指定沿y轴平移
5、缩放变换
作用：改变元素的尺寸
属性：transform
取值：scale(value)
value为无单位的数值，表示缩放比例
1.value>1 表示元素放大
2.0<value<1 表示缩小
3.value<0 数值仍然表示缩放比，负号表示元素会被翻转
其他取值：
scaleX(value) 沿x轴缩放
scaleY(value) 沿y轴缩放
6、旋转变换
作用：可以设置元素旋转一定的角度显示
属性：transform
取值：rotate(deg)
取角度值，以deg为单位
使用:1.rotate() 表示平面旋转
正值表示顺时针旋转，负值表示逆时针旋转
2.rotateX(deg) 表示沿x轴旋转
3.rotateY(deg) 表示沿y轴旋转
7、转换函数的组合使用
transform: translate() scale() rotate()