CSS3

css3新增子级选择器(5个)

注：如何判断一个元素是行内元素还是块级元素？答：加背景颜色查看一下就知道了！

子级选择器
- 含义：子级选择器用于选择带有特定父元素的元素。
- 书写语法：Element1 > Element2
- 注意事项：必须满足父子级关系才能选中标签。(区别于：后代选择器)
兄弟选择器
- 两种书写语法
  
  选择器简介
  element1+element2 匹配同一个父元素中紧跟在element1后面的一个element2元素 element1~element2 匹配同一个元素中在element1后面的所有element2元素
- 相邻兄弟选择器
  - 含义：相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素(只有一个)，而且二者有相同的父元素。
  - 注意：
    1. 只能选中紧跟在后面的一个E2元素
    2. 如果后面紧跟的元素不是所写的标签，则样式不会生效
    3. +符号前后可以添加空格书写
    4. 两者有相同的父元素
- 其他兄弟选择器
  - 含义：匹配同一个父元素中在element1后面的所有的element2元素。
  - 书写语法：element1~element2
  - ~前后可以添加空格书写
- 总结：(满足两个条件)
  1. 同一个爸爸
  2. 兄弟为element2类型的(紧跟的1个/不必紧跟的多个)

选择器	简介
element1+element2	匹配同一个父元素中紧跟在element1后面的一个element2元素	element1~element2	匹配同一个元素中在element1后面的所有element2元素

结构伪类选择器

选择器简介：

选择器	简介
E:first-child	匹配父元素中的第一个子元素E	E:last-child	匹配父元素中的最后一个子元素E	E:nth-child(n)	匹配父元素中的第n个子元素E	E:first-of-type	指定类型E的第一个	E:last-of-type	指定类型E的最后一个	E:nth-of-type(n)	指定类型E的第n个

nth-child(n)
- n可以是：数字、关键字(even偶数、odd奇数)、公式
- 常见的公式如下图所示
- 如果是公式，则从0开始计算，n是从0,1,2,3...一直递增
- 但是第0元素或者超出了元素的个数会忽略
E:nth-child(n)和E:nth-of-type(n)的区别
- 区别：
  1. 第n个元素是E元素的选中
  2. 为E元素的第n个
- 实例

伪元素选择器

新增伪元素

选择器	介绍
E::before	在E元素内部的前面插入一个元素	E::after	在E元素内部的后面插入一个元素	E::first-letter	选择到了E容器内的第一个字母	E::first-line	选择到了E容器内的第一行文字

h5写法和传统写法区别
1. 单冒号E:before
2. 双冒号E::before
3. 浏览器对以上写法都能识别，双冒号是h5的语法规范。
伪元素的注意事项
1. 伪元素只能给双标签添加，不能给单标签添加
2. 伪元素的冒号前不能有空格，如E ::before这个写方法是错误的
3. 伪元素里面必须写上属性content:""
4. before和after创建一个元素，但是属于行内元素 注：如何判断一个元素是行内元素还是块级元素？答：加背景颜色查看一下就知道了！
5. 因为在js的DOM里面看不见刚才创建的元素，所以我们称为伪元素

属性选择器

含义：用来选择包含指定属性的标签

选择器	简介
E[att]	选择具有att属性的E元素	E[att="val"]	选择具有att属性且属性值等于val的E元素	E[att^="val"]	选择具有att属性且属性值以val开头的E元素	E[att$="val"]	选择具有att属性且属性值以val结尾的E元素	E[att*="val"]	匹配具有att属性且属性值中包含val的E元素

选择器权重
- 基础选择器：id选择器 > 类选择器 > 标签选择器 > *
- 伪类选择器、属性选择器的权重等于类选择器
- 伪元素选择器的权重等于标签选择器
注：高级选择器的权重计算：id个数、类选择器个数、标签选择器个数

css3盒模型

css3边框圆角属性
- 属性名: border-radius
- 属性值：像素值或者百分比，百分比参考的是盒子整体宽度、高度的百分比
  
  属性值说明
  x-radius/y-radius 前面是水平半径，后面为垂直半径，得到的是椭圆角 radius 一个属性值，则水平和垂直都设置为同一个值，得到的是圆角
- 单一属性(注：先写垂直方向再写水平方向)
  - border-top-left-radius:半径;
  - border-top-right-radius:半径;
  - border-bottom-left-radius:半径;
  - border-bottom-right-radius:半径;
- 简写方法
  - border-radius 类似于padding也可以有四种值的写法。
  - 左上角右上角右下角左下角
  - 左上角右上角和左下角右下角
  - 左上角和右下角右上角和左下角
  - 四个角相同
- /的属性值写法 border-radius属性值中出现了/斜线，那么/前面可以设置水平方向四种值的写法，/后面可以设置垂直方向四种值的写法。实例：水平方向：三值法；垂直方向：两值法
- 浏览器兼容 IE8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。
- 实际应用
  1. 正圆：border-radius设置为宽高的一半，宽与高相等
```
  div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 70px;
  }
```
css3文字阴影
- 作用：text-shadow可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离以及阴影的颜色。
  
  属性值简介
  h-shadow 必需。水平阴影的位置，允许负值。 v-shadow 必需。垂直阴影的位置，允许负值。 blur 可选。模糊的距离 color 可选。阴影的颜色
- 文字阴影语法
```
  h1 {
    text-shadow: 4px 4px 5px #ccc;
  }
```
- 多层阴影
  - 作用：可以向文本添加多个阴影，逗号分隔多个阴影的属性值。注：多阴影中，先写的阴影压盖在后写的阴影上。

属性值	说明
x-radius/y-radius	前面是水平半径，后面为垂直半径，得到的是椭圆角	radius	一个属性值，则水平和垂直都设置为同一个值，得到的是圆角

属性值	简介
h-shadow	必需。水平阴影的位置，允许负值。	v-shadow	必需。垂直阴影的位置，允许负值。	blur	可选。模糊的距离	color	可选。阴影的颜色

css3盒子阴影

作用：box-shadow属性用于对盒子边框添加阴影。

属性值	简介
h-shadow	必需。水平阴影的位置。允许负值	v-shadow	必需。垂直阴影的位置，允许负值	blur	可选。模糊距离	spread	可选。阴影的尺寸	color	可选。阴影的颜色	inset	可选。将外部阴影改为内部阴影

多层阴影
- 可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。注意：多阴影中，先写的阴影压盖在后写的阴影上。

总结
- 不论是文字阴影还是盒子阴影，属性值中的负值与正值都需要遵循x、y轴的坐标

css3过渡属性

属性名：transition
作用：在不使用Flash或者JavaScript的情况下，使用transition可以实现补间动画(过渡效果)，并且当前元素只要有“属性”发生变化时即存在两种状态(用A和B代替)，那么A和B之间就可以实现平滑的过渡动画效果。

语法格式

  transition: 过渡的属性 过渡时间 运动曲线 延时时间;

单一属性写法

属性	描述
transition	简写属性	transition-property	规定应用过渡的CSS属性的名称	transition-duration	定义过渡效果花费的时间。默认是0	transition-timing-function	规定过渡效果的时间曲线。默认是"ease"	transition-delay	规定过渡效果何时开始。默认是0

transition-property过渡的属性
- none表示没有属性过渡
- all表示所有变化的属性都过渡
- 属性名使用具体的属性名，多个属性名中间逗号分隔
时间
- 必需以s为单位，0s也必须加单位。

tansition-timing-function 时间曲线

值	描述
linear	规定以相同速度开始至结束的过渡效果。	ease	慢速开始，然后变快，最后慢速结束	ease-in	慢速开始	ease-out	慢速结束	ease-in-out	慢速开始和结束	cubic-bezier(x1,y1,x2,y2)	在函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标。

贝塞尔曲线

浏览器兼容
- IE10、Firefox、Chrome以及Opera支持transition属性
- Safari需要前缀-webkit-
- 注意：IE9以及更早的版本不支持和transition属性

2D转换

理解什么是2D转换
- 属性名：transform
- 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash实现的效果。
位移translate()
- 书写语法 | 值 | 说明 | | translate(x) | 只有一个数值，表示水平方向的位移 | translate(x,y) | x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负
缩放scale()
- 书写语法：
  值说明
  scale(x,y) x,y分别为改变元素的宽度和高度的倍数 scale(n) 只有一个值，表示宽度和高度同时缩放n倍 scaleX(n) 改变元素的宽度 scaleY(n) 改变元素的高度
旋转rotate()：找中心点进行旋转
- 书写语法：rotate(数字deg)
- deg为度数单位，正数表示顺时针选转，负数表示逆时针旋转。2D旋转只有一个属性值。
- 注意：元素旋转后，坐标轴也跟着发生转变。因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异。
- 实例：先设置旋转还是先设置位移是有区别的 css .box img {   transform: rotate(30deg) translate(50px); }
倾斜skew()
- 书写语法：transform: skew(数字deg,数字deg);
- 两个属性值分别表示水平和垂直方向的倾斜角度。属性值可以为正可以为负，第二个数值不写默认0
总结
- 角度正负：顺时针、逆时针
- px值正负：x、y 轴
transform-origin(基准点)属性
- 类似于background-position
- 作用：调整元素的水平和垂直方向原点的位置
- 属性值：两个，中间用空格分隔
  
  属性值说明
  x 定义x轴的原点在何处。可能的值:left、center、right、像素值、百分比 y 定义y轴的原点在何处。可能的值:top、center、bottom、像素值、百分比
- 实例：改变基准点

值	说明
scale(x,y)	x,y分别为改变元素的宽度和高度的倍数	scale(n)	只有一个值，表示宽度和高度同时缩放n倍	scaleX(n)	改变元素的宽度	scaleY(n)	改变元素的高度

属性值	说明
x	定义x轴的原点在何处。可能的值:left、center、right、像素值、百分比	y	定义y轴的原点在何处。可能的值:top、center、bottom、像素值、百分比

3D转换

transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的平面效果多了一条z轴，如下图所示
透视
- 含义：透视可以将一个2D平面，在转换的过程当中，呈现3D效果
- 特点：近大远小
- 透视属性perspective
  1. 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。
  2. 属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
  3. 注意：透视属性需要设置给3D变化元素的父级
3D旋转
- 需要分别对三个方向的旋转角度值
  
  属性值说明
  rotateX(angle) 定义沿着X轴的3D旋转 rotateY(angle) 定义沿着Y轴的3D旋转 rotateZ(angle) 定义沿着Z轴的3D旋转
- 注意：属性值的角度区分正负。
  1. 正数表示沿对应坐标轴顺时针方向旋转
  2. 负数表示沿对应坐标轴逆时针方向旋转
3D位移
- 属性值
  值说明
  translateX(x) 设置X轴的位移 translateY(y) 设置y轴的位移 translateZ(z) 定义3D位移，设置Z轴的位移值
- 属性值为像素值或百分比，正负表示位移的方向。
  1. 正值向对应轴的正方向移动
  2. 负值向对应轴的负方向移动
3D正方体案例
transform-style属性
- 作用：设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
- 属性值： flat: 所有子元素在2D平面呈现 preserve-3d: 保留3D空间
浏览器兼容
- IE10、Firefox以及Opera支持transform属性
- Chrome和Safari需要前缀-webkit-
- IE9需要前缀-ms-

属性值	说明
rotateX(angle)	定义沿着X轴的3D旋转	rotateY(angle)	定义沿着Y轴的3D旋转	rotateZ(angle)	定义沿着Z轴的3D旋转

值	说明
translateX(x)	设置X轴的位移	translateY(y)	设置y轴的位移	translateZ(z)	定义3D位移，设置Z轴的位移值

动画

作用：css3中提供了自己的动画制作方法，这可以在与多页面中取代动画图片、Flash动画以及JavaScript.

css3的动画制作分为两步：创建动画、绑定动画

创建动画
- @keyframes规则：能创建从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
  1. 规则：需要使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是的动画开始，100%是动画的完成。
  2. 书写方法
```
  @keyframes 动画名称 {
    动画过程，可以添加任意百分比的动画细节
  }
```

绑定动画

animation属性：将@keyframes中创建的动画绑定到某个选择器，否则不会产生动画效果

语法

  <!-- 其中必须设置 动画名称 和 过渡时间，其他的属性可以根据需求设置 -->
  div {
    animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
  }

单一属性列表

属性	描述
animation-name	动画名称	animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是0	animation-timing-function	规定动画的速度曲线，默认是ease	animation-delay	规定动画何时开始，默认是0	animation-iteration-count	规定动画被播放的次数，默认是1.infinite表示无限次播放